Search Results for “portfolio” – CodingNepal

Build An AI Image Generator Website in HTML CSS and JavaScript

CodingNepal — Fri, 15 Dec 2023 01:52:37 +0000

Websites like Midjourney and DALL-E have gained significant popularity in recent months or years for their ability to generate creative and imaginative images using AI. If you’re a beginner web developer, have you ever considered creating your own version of an AI image generator website? The great news is that with the help of only HTML, CSS, and JavaScript, you too can build a website like Midjourney or DALL-E.

If you’re unfamiliar, Midjourny and DALL-E are AI image-generation websites. They use a machine-learning model to create images based on text descriptions. Users can input their desired image prompt, and these websites will generate a corresponding image that matches the description.

In this blog post, I will provide a step-by-step guide on how to build your own website for generating AI images using HTML, CSS, and JavaScript. The website will be built entirely from scratch using pure JavaScript. So, as a beginner, you can gain practical experience by applying your newly learned HTML, CSS, and JavaScript skills to real-world web projects.

On this custom AI image generation website, users enter their prompt, choose the number of images they want to generate, and click the “Generate” button. The AI will then create images based on the user prompt. To download each image, the user can click on the corresponding download button provided.

Video Tutorial of AI Image Generator HTML and JavaScript

If you enjoy learning through video tutorials, the above YouTube video can be an excellent resource. In the video, I’ve explained each line of code and included informative comments to make building your own AI image generator website simple and easy to follow.

However, if you like reading blog posts or want a step-by-step guide for this project, you can continue reading this post. By the end of this post, you will have your own AI image generator website that you can showcase with your friends and include in your portfolio.

Steps to Build AI Image Generator Website HTML & JavaScript

To build an AI image generator website using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:

First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.
Create a file called script.js for the JavaScript code.
Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.

To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.





  
  
  AI Image Generator HTML CSS and JavaScript | CodingNepal
  
  


  
    
      AI Image Generator Tool JavaScript
      Convert your text into an image within a second using this
        JavaScript-powered AI Image Generator tool.

Next, add the following CSS codes to your style.css file to make your AI image generator website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website. Now, if you load the web page in your browser, you can see your AI image generator website with four preloaded images.

/* Importing Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.image-generator {
  height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: url("images/bg.jpg");
  background-size: cover;
  background-position: center;
}

.image-generator::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #121212;
}

.image-generator .content {
  position: relative;
  color: #fff;
  padding: 0 15px;
  max-width: 760px;
  text-align: center;
}

.image-generator h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

.image-generator p {
  margin-top: 10px;
  font-size: 1.35rem;
}

.image-generator .generate-form {
  height: 56px;
  padding: 6px;
  display: flex;
  margin-bottom: 15px;
  background: #fff;
  align-items: center;
  border-radius: 30px;
  margin-top: 45px;
  justify-content: space-between;
}

.generate-form .prompt-input {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 17px;
  border: none;
  background: none;
  font-size: 1rem;
  border-radius: 30px;
}

.generate-form .controls {
  display: flex;
  height: 100%;
  gap: 15px;
}

.generate-form .img-quantity {
  outline: none;
  border: none;
  height: 44px;
  background: none;
  font-size: 1rem;
}

.generate-form .generate-btn {
  font-size: 1rem;
  outline: none;
  border: none;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  height: 100%;
  padding: 0 25px;
  border-radius: 30px;
  background: #4949E7;
}

.generate-form .generate-btn[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

.generate-form button:hover {
  background: #1d1de2;
}

.image-gallery {
  display: flex;
  gap: 15px;
  padding: 0 15px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 50px auto;
  max-width: 1250px;
}

.image-gallery .img-card {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 285px;
}

.image-gallery .img-card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.image-gallery .img-card.loading img {
  width: 80px;
  height: 80px;
}

.image-gallery .img-card .download-btn {
  bottom: 15px;
  right: 15px;
  height: 36px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
}

.image-gallery .img-card .download-btn img {
  width: 14px;
  height: 14px;
}

.image-gallery .img-card:not(.loading):hover .download-btn {
  opacity: 1;
  pointer-events: auto;
}

@media screen and (max-width: 760px) {
  .image-generator {
    height: 45vh;
    padding-top: 30px;
    align-items: flex-start;
  }

  .image-generator h1 {
    font-size: 1.8rem;
  }

  .image-generator p {
    font-size: 1rem;
  }

  .image-generator .generate-form {
    margin-top: 30px;
    height: 52px;
    display: block;
  }

  .generate-form .controls {
    height: 40px;
    margin-top: 15px;
    justify-content: end;
    align-items: center;
  }

  .generate-form .generate-btn[disabled] {
    opacity: 1;
  }

  .generate-form .img-quantity {
    color: #fff;
  }

  .generate-form .img-quantity option {
    color: #000;
  }

  .image-gallery {
    margin-top: 20px;
  }

  .image-gallery .img-card:not(.loading) .download-btn {
    opacity: 1;
    pointer-events: auto;
  }
}

@media screen and (max-width: 500px) {
  .image-gallery .img-card {
    width: 100%;
  }
}

Finally, add the following JavaScript code to your script.js file to make your AI image generator website functional. This code handles various functions, even listeners, input handling, API calls, image rendering, etc. to generate AI images based on user prompts.

const generateForm = document.querySelector(".generate-form");
const generateBtn = generateForm.querySelector(".generate-btn");
const imageGallery = document.querySelector(".image-gallery");

const OPENAI_API_KEY = "YOUR-OPENAI-API-KEY-HERE"; // Your OpenAI API key here
let isImageGenerating = false;

const updateImageCard = (imgDataArray) => {
  imgDataArray.forEach((imgObject, index) => {
    const imgCard = imageGallery.querySelectorAll(".img-card")[index];
    const imgElement = imgCard.querySelector("img");
    const downloadBtn = imgCard.querySelector(".download-btn");
    
    // Set the image source to the AI-generated image data
    const aiGeneratedImage = `data:image/jpeg;base64,${imgObject.b64_json}`;
    imgElement.src = aiGeneratedImage;
    
    // When the image is loaded, remove the loading class and set download attributes
    imgElement.onload = () => {
      imgCard.classList.remove("loading");
      downloadBtn.setAttribute("href", aiGeneratedImage);
      downloadBtn.setAttribute("download", `${new Date().getTime()}.jpg`);
    }
  });
}

const generateAiImages = async (userPrompt, userImgQuantity) => {
  try {
    // Send a request to the OpenAI API to generate images based on user inputs
    const response = await fetch("https://api.openai.com/v1/images/generations", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${OPENAI_API_KEY}`,
      },
      body: JSON.stringify({
        prompt: userPrompt,
        n: userImgQuantity,
        size: "512x512",
        response_format: "b64_json"
      }),
    });

    // Throw an error message if the API response is unsuccessful
    if(!response.ok) throw new Error("Failed to generate AI images. Make sure your API key is valid.");

    const { data } = await response.json(); // Get data from the response
    updateImageCard([...data]);
  } catch (error) {
    alert(error.message);
  } finally {
    generateBtn.removeAttribute("disabled");
    generateBtn.innerText = "Generate";
    isImageGenerating = false;
  }
}

const handleImageGeneration = (e) => {
  e.preventDefault();
  if(isImageGenerating) return;

  // Get user input and image quantity values
  const userPrompt = e.srcElement[0].value;
  const userImgQuantity = parseInt(e.srcElement[1].value);
  
  // Disable the generate button, update its text, and set the flag
  generateBtn.setAttribute("disabled", true);
  generateBtn.innerText = "Generating";
  isImageGenerating = true;
  
  // Creating HTML markup for image cards with loading state
  const imgCardMarkup = Array.from({ length: userImgQuantity }, () => 
      `
        
        
          
        
      `
  ).join("");

  imageGallery.innerHTML = imgCardMarkup;
  generateAiImages(userPrompt, userImgQuantity);
}

generateForm.addEventListener("submit", handleImageGeneration);

Please note that your website is still unable to generate AI images because you have not provided your API key in the OPENAI_API_KEY variable. We’re using OpenAI API to generate images. So to get a free API key from OpenAI, sign up for an account at https://platform.openai.com/account/api-keys.

” Remember that when you sign up for OpenAI, you’ll get a free $5 credit for your API usage. If your account is older than 3 months or the credit runs out, you’ll need a paid account or create a new one with a new number to keep using the API. Your API usage and expiration date can be found on the account’s usage page.”

To understand the JavaScript code better, I recommend watching the above video tutorial, reading the code comments, and experimenting with the code.

Conclusion and Final words

In conclusion, building your own AI-powered image generation website is not just an exciting project but also a valuable opportunity to apply your web development skills to projects that are increasingly in demand in today’s digital world.

By following the steps outlined in this article, I believe that you have successfully created your own unique version of an AI image generator. Feel free to experiment with different styles and features to take your website to the next level. To further improve your skills, I recommend you try creating a ChatGPT clone, chatbot, or image search engine.

If you encounter any problems while building your AI-powered image generation website, you can download the source code files for this project for free by clicking the Download button. Remember that after downloading the file, you’ll have to provide your valid OpenAI API key into the OPENAI_API_KEY variable in the script.js file.

Create A Beautiful Responsive Website in HTML and CSS

CodingNepal — Sat, 09 Sep 2023 11:54:18 +0000

In today’s age, having a basic understanding of web development can be incredibly useful. Whether you want to showcase your portfolio, start a blog, or just experiment with web design, creating a simple website homepage is a great place to start.

In this beginner-friendly post, I’ll guide you through the process of creating your first website homepage using HTML and CSS. You’ll learn how to build an interactive homepage featuring a navigation bar, place elements on the page, and style them to make your website visually appealing and engaging.

To create a responsive website homepage, we will use commonly used HTML elements like div, h2, h1, and button, as well as basic CSS properties. This project is beginner-friendly, so you should have no trouble following along.

Steps to Create Website Homepage HTML & CSS

To create a responsive website homepage using HTML and CSS, follow these simple step-by-step instructions:

First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.

To start, add the following HTML codes to your index.html file: This code includes essential HTML markup with different semantic tags like header, nav, h2, div, p, ul, li, buttons, etc. to create a website homepage.




  
    
    
    Responsive Website Homepage HTML and CSS | CodingNepal
    
  
  
    
      
        CodingNepal
        
        
          
        
        
          Home
          About Us
          Services
          Portfolio
          Contact Us
        
        
          Sign In
          Sign Up
        
      
    
    
      
        Mobile App Development
        
          Join us in the exciting world of programming and turn your ideas into
          reality. Unlock the world of endless possibilities - learn to code and
          shape the digital future with us.
        
        
          Join Now
          Learn More

Next, add the following CSS codes to your style.css file to apply visual styling to the homepage, like color, font, background, etc. After that, you can view your attractive and responsive website homepage by loading the web page in your browser.

/* Importing Google font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

body {
  height: 100vh;
  width: 100%;
  background: linear-gradient(to bottom, #175d69 23%, #330c43 95%);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 15px;
}

.navbar .logo a {
  font-size: 1.8rem;
  text-decoration: none;
  color: #fff;
}

.navbar .links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 35px;
}

.navbar .links a {
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  padding: 10px 0;
  transition: 0.2s ease;
}

.navbar .links a:hover {
  color: #47b2e4;
}

.navbar .buttons a {
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
  padding: 15px 0;
  transition: 0.2s ease;
}

.navbar .buttons a:not(:last-child) {
  margin-right: 30px;
}

.navbar .buttons .signin:hover {
  color: #47b2e4;
}

.navbar .buttons .signup {
  border: 1px solid #fff;
  padding: 10px 20px;
  border-radius: 0.375rem;
  text-align: center;
  transition: 0.2s ease;
}

.navbar .buttons .signup:hover {
  background-color: #47b2e4;
  color: #fff;
}

.hero-section {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 95vh;
  padding: 0 15px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-section .hero {
  max-width: 50%;
  color: #fff;
}

.hero h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #c9c7c7;
}

.hero-section .img img {
  width: 517px;
}

.hero-section .buttons {
  margin-top: 40px;
}

.hero-section .buttons a {
  text-decoration: none;
  color: #fff;
  padding: 12px 24px;
  border-radius: 0.375rem;
  font-weight: 600;
  transition: 0.2s ease;
  display: inline-block;
}

.hero-section .buttons a:not(:last-child) {
  margin-right: 15px;
}

.buttons .join {
  background-color: #47b2e4;
}

.hero-section .buttons .learn {
  border: 1px solid #fff;
  border-radius: 0.375rem;
}

.hero-section .buttons a:hover {
  background-color: #47b2e4;
}

/* Hamburger menu styles */
#menu-toggle {
  display: none;
}

#hamburger-btn {
  font-size: 1.8rem;
  color: #fff;
  cursor: pointer;
  display: none;
  order: 1;
}

@media screen and (max-width: 1023px) {
  .navbar .logo a {
    font-size: 1.5rem;
  }

  .links {
    position: fixed;
    left: -100%;
    top: 75px;
    width: 100%;
    height: 100vh;
    padding-top: 50px;
    background: #175d69;
    flex-direction: column;
    transition: 0.3s ease;
  }

  .navbar #menu-toggle:checked ~ .links {
    left: 0;
  }

  .navbar #hamburger-btn {
    display: block;
  }

  .header .buttons {
    display: none;
  }

  .hero-section .hero {
    max-width: 100%;
    text-align: center;
  }

  .hero-section img {
    display: none;
  }
}

Conclusion and final words

In conclusion, creating a website homepage is a simple but valuable project for a beginner web developer. I believe that by following the steps in this post, you’ve successfully created your very first responsive website homepage using HTML and CSS.

Remember to experiment and customize your website to add personal touches and make it even more beautiful. To continue improving your HTML and CSS skills, why not try recreating other attractive website designs available on this website? These designs are not limited to simple homepage designs but also include complete website designs.

If you encounter any problems while creating your website homepage, you can download the source code files for this homepage project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.

Create Website with Login & Registration Form in HTML CSS and JavaScript

CodingNepal — Thu, 31 Aug 2023 18:33:30 +0000

If you’re new to web development, creating a website with login and registration forms is an excellent way to learn and practice basic skills like designing a navigation menu bar, creating a website homepage, and building login and registration forms.

In this blog post, I’ll guide you through the process of creating a responsive website with login and registration forms using HTML, CSS, and JavaScript. By completing this project, you’ll gain practical experience and learn essential web development concepts like DOM manipulation, event handling, conditional statements, and more.

In this project, the website’s homepage features a navigation bar and a login button. When you click on the button, a login form will popup with a cool blurred background effect. The form has an image on the left and input fields on the right side. If you want to sign up instead, simply click on the sign-up link and you’ll be taken to the registration form.

The website’s navigation bar and forms are completely responsive. This means that the content will adjust to fit any screen size. On a smaller screen, the navigation bar will pop up from the right side when the hamburger button is clicked and in the forms the left image section will remain hidden.

Video Tutorial of Website with Login & Registration Form

If you enjoy learning through video tutorials, the above YouTube video is an excellent resource. In this video, I’ve explained each line of code and included informative comments to make the process of creating your own website with login and registration forms beginner-friendly and easy to follow.

However, if you like reading blog posts or want a step-by-step guide for this project, you can continue reading this post. By the end of this post, you’ll have your own website with forms that are simple to customize and implement into your other projects.

Steps to Create Website with Login & Registration Form

To create a responsive website with login and registration forms using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:

First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css to hold the CSS code.
Create a file called script.js to hold the JavaScript code.
Finally, download the Images folder and place it in your project directory. This folder contains all the images you’ll need for this project.

To start, add the following HTML codes to your index.html file. These codes include all essential HTML elements, such as header, nav, ul, form, and more for the project.





    
    
    Website with Login and Registration Form | CodingNepal
    
    
    
    


    
        
            menu
            
                
                CodingNepal
            
            
                close
                Home
                Portfolio
                Courses
                About us
                Contact us
            
            
        
    

    
    
        close
        
            
                Welcome Back
                Please log in using your personal information to stay connected with us.
            
            
                LOGIN
                
                    
                        
                        Email
                    
                    
                        
                        Password
                    
                    Forgot password?
                    
                
                
                    Don't have an account?
                    Signup
                
            
        
        
            
                Create Account
                To become a part of our community, please sign up using your personal information.
            
            
                SIGNUP
                
                    
                        
                        Enter your email
                    
                    
                        
                        Create password
                    
                    
                        
                        
                            I agree the
                            Terms & Conditions
                        
                    
                    
                
                
                    Already have an account? 
                    Login

Next, add the following CSS codes to your style.css file to apply visual styling to your website and forms. You can experiment with different CSS properties like colors, fonts, and backgrounds to give a unique touch to your website.

/* Importing Google font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

body {
    height: 100vh;
    width: 100%;
    background: url("images/hero-bg.jpg") center/cover no-repeat;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 0 10px;
}

.navbar {
    display: flex;
    padding: 22px 0;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
}

.navbar .hamburger-btn {
    display: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
}

.navbar .logo {
    gap: 10px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar .logo img {
    width: 40px;
    border-radius: 50%;
}

.navbar .logo h2 {
    color: #fff;
    font-weight: 600;
    font-size: 1.7rem;
}

.navbar .links {
    display: flex;
    gap: 35px;
    list-style: none;
    align-items: center;
}

.navbar .close-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    display: none;
    color: #000;
    cursor: pointer;
}

.navbar .links a {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.1s ease;
}

.navbar .links a:hover {
    color: #19e8ff;
}

.navbar .login-btn {
    border: none;
    outline: none;
    background: #fff;
    color: #275360;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.15s ease;
}

.navbar .login-btn:hover {
    background: #ddd;
}

.form-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    max-width: 720px;
    background: #fff;
    border: 2px solid #fff;
    transform: translate(-50%, -70%);
}

.show-popup .form-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.1s;
}

.form-popup .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #878484;
    cursor: pointer;
}

.blur-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.1s ease;
}

.show-popup .blur-bg-overlay {
    opacity: 1;
    pointer-events: auto;
}

.form-popup .form-box {
    display: flex;
}

.form-box .form-details {
    width: 100%;
    color: #fff;
    max-width: 330px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login .form-details {
    padding: 0 40px;
    background: url("images/login-img.jpg");
    background-position: center;
    background-size: cover;
}

.signup .form-details {
    padding: 0 20px;
    background: url("images/signup-img.jpg");
    background-position: center;
    background-size: cover;
}

.form-box .form-content {
    width: 100%;
    padding: 35px;
}

.form-box h2 {
    text-align: center;
    margin-bottom: 29px;
}

form .input-field {
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: 20px;
}

.input-field input {
    height: 100%;
    width: 100%;
    background: none;
    outline: none;
    font-size: 0.95rem;
    padding: 0 15px;
    border: 1px solid #717171;
    border-radius: 3px;
}

.input-field input:focus {
    border: 1px solid #00bcd4;
}

.input-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #4a4646;
    pointer-events: none;
    transition: 0.2s ease;
}

.input-field input:is(:focus, :valid) {
    padding: 16px 15px 0;
}

.input-field input:is(:focus, :valid)~label {
    transform: translateY(-120%);
    color: #00bcd4;
    font-size: 0.75rem;
}

.form-box a {
    color: #00bcd4;
    text-decoration: none;
}

.form-box a:hover {
    text-decoration: underline;
}

form :where(.forgot-pass-link, .policy-text) {
    display: inline-flex;
    margin-top: 13px;
    font-size: 0.95rem;
}

form button {
    width: 100%;
    color: #fff;
    border: none;
    outline: none;
    padding: 14px 0;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    margin: 25px 0;
    background: #00bcd4;
    transition: 0.2s ease;
}

form button:hover {
    background: #0097a7;
}

.form-content .bottom-link {
    text-align: center;
}

.form-popup .signup,
.form-popup.show-signup .login {
    display: none;
}

.form-popup.show-signup .signup {
    display: flex;
}

.signup .policy-text {
    display: flex;
    margin-top: 14px;
    align-items: center;
}

.signup .policy-text input {
    width: 14px;
    height: 14px;
    margin-right: 7px;
}

@media (max-width: 950px) {
    .navbar :is(.hamburger-btn, .close-btn) {
        display: block;
    }

    .navbar {
        padding: 15px 0;
    }

    .navbar .logo img {
        display: none;
    }

    .navbar .logo h2 {
        font-size: 1.4rem;
    }

    .navbar .links {
        position: fixed;
        top: 0;
        z-index: 10;
        left: -100%;
        display: block;
        height: 100vh;
        width: 100%;
        padding-top: 60px;
        text-align: center;
        background: #fff;
        transition: 0.2s ease;
    }

    .navbar .links.show-menu {
        left: 0;
    }

    .navbar .links a {
        display: inline-flex;
        margin: 20px 0;
        font-size: 1.2rem;
        color: #000;
    }

    .navbar .links a:hover {
        color: #00BCD4;
    }

    .navbar .login-btn {
        font-size: 0.9rem;
        padding: 7px 10px;
    }
}

@media (max-width: 760px) {
    .form-popup {
        width: 95%;
    }

    .form-box .form-details {
        display: none;
    }

    .form-box .form-content {
        padding: 30px 20px;
    }
}

After applying the styles, load the webpage in your browser to view your website. The forms are currently hidden and will only appear later using JavaScript. Now, you will only see the website with the navigation bar and hero image.

Finally, add the following JavaScript code to your script.js file. The code contains click event listeners which can toggle classes on various HTML elements. Although the code is simple and easy to understand, it is recommended to watch the video tutorial above, pay attention to the code comments, and experiment with the code for better understanding.

const navbarMenu = document.querySelector(".navbar .links");
const hamburgerBtn = document.querySelector(".hamburger-btn");
const hideMenuBtn = navbarMenu.querySelector(".close-btn");
const showPopupBtn = document.querySelector(".login-btn");
const formPopup = document.querySelector(".form-popup");
const hidePopupBtn = formPopup.querySelector(".close-btn");
const signupLoginLink = formPopup.querySelectorAll(".bottom-link a");

// Show mobile menu
hamburgerBtn.addEventListener("click", () => {
    navbarMenu.classList.toggle("show-menu");
});

// Hide mobile menu
hideMenuBtn.addEventListener("click", () =>  hamburgerBtn.click());

// Show login popup
showPopupBtn.addEventListener("click", () => {
    document.body.classList.toggle("show-popup");
});

// Hide login popup
hidePopupBtn.addEventListener("click", () => showPopupBtn.click());

// Show or hide signup form
signupLoginLink.forEach(link => {
    link.addEventListener("click", (e) => {
        e.preventDefault();
        formPopup.classList[link.id === 'signup-link' ? 'add' : 'remove']("show-signup");
    });
});

Conclusion and Final words

In conclusion, creating a website’s homepage that features forms is a hands-on experience to learn various website components and fundamental web development concepts. I believe that by following the steps outlined in this blog post, you’ve successfully created your own website with login and registration forms using HTML, CSS, and JavaScript.

To further improve your web development skills, I recommend you try recreating other websites and login form projects available on this website. This will give you a better understanding of how HTML, CSS, and JavaScript are used to create unique website components.

If you encounter any problems while creating your website with forms, you can download the source code files for this project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.

Create Hoverable Sidebar Menu in HTML CSS and JavaScript

CodingNepal — Fri, 02 Jun 2023 08:37:20 +0000

With the dynamic nature of websites on the internet, the type, user interface, and user experience design of the sidebar menu are constantly evolving. One noticeable trend is the emergence of sidebar menus that expand and collapse upon mouse hover.

Hoverable sidebar menus are a specific kind of sidebar that occupies minimal space on a webpage, initially appearing as small icons. But, upon hovering over them, they expand and reveal their complete content.

In this blog post, I will provide a step-by-step guide on creating a responsive hoverable sidebar menu using HTML, CSS, and JavaScript. To enhance the user experience, the sidebar will have a lock icon at the top, allowing users to easily enable or disable the hoverable feature on the menu.

I highly recommend watching the comprehensive video tutorial below, which provides a step-by-step guide for creating a hoverable sidebar menu. This video tutorial will assist you in understanding and implementing the hoverable sidebar menu effectively.

Hoverable Sidebar Menu in HTML CSS & JavaScript

In this video tutorial, I have constructed a hoverable sidebar menu using HTML, CSS, and JavaScript. My goal was to provide a clear and step-by-step explanation of how to create a sidebar menu.

If you prefer not to watch the provided video tutorial, you can continue reading the article to learn how to create this sidebar menu on your own.

Steps For Creating Sidebar Menu in HTML and CSS

To create a hoverable Sidebar Menu using HTML CSS and JavaScript follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file: These codes include all the necessary CDN links and HTML sidebar layout.




  
    
    
    
    Hoverable Sidebar Menu HTML CSS & JavaScript
    
    
    
    
  
  
    
      
        
          
        
        CodingNepal
        
        
      

      
        
          
            
              Dashboard
              
            
            
              
                
                Overview
              
            
            
              
                
                All Projects
              
            
          

          
            
              Editor
              
            
            
              
                
                Magic Build
              
            
            
              
                
                New Projects
              
            
            
              
                
                Upload New
              
            
          

          
            
              Setting
              
            
            
              
                
                Notice Board
              
            
            
              
                
                Award
              
            
            
              
                
                Setting
              
            
          
        

        
          
            
          
          
            David Oliva
            david@gmail.com

Next, include the following CSS code in your style.css file to implement styling to the elements and employ media queries for ensuring responsiveness on various screen sizes. You can modify this code according to your preferences by adjusting properties such as color, font, size, and other CSS attributes to achieve your desired design.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  background: #eef5fe;
}
/* Pre css */
.flex {
  display: flex;
  align-items: center;
}
.nav_image {
  display: flex;
  min-width: 55px;
  justify-content: center;
}
.nav_image img {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  object-fit: cover;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 270px;
  background: #fff;
  padding: 15px 10px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}
.sidebar.close {
  width: calc(55px + 20px);
}
.logo_items {
  gap: 8px;
}
.logo_name {
  font-size: 22px;
  color: #333;
  font-weight: 500px;
  transition: all 0.3s ease;
}
.sidebar.close .logo_name,
.sidebar.close #lock-icon,
.sidebar.close #sidebar-close {
  opacity: 0;
  pointer-events: none;
}
#lock-icon,
#sidebar-close {
  padding: 10px;
  color: #4070f4;
  font-size: 25px;
  cursor: pointer;
  margin-left: -4px;
  transition: all 0.3s ease;
}
#sidebar-close {
  display: none;
  color: #333;
}
.menu_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 40px;
  overflow-y: auto;
  height: calc(100% - 82px);
}
.menu_container::-webkit-scrollbar {
  display: none;
}
.menu_title {
  position: relative;
  height: 50px;
  width: 55px;
}
.menu_title .title {
  margin-left: 15px;
  transition: all 0.3s ease;
}
.sidebar.close .title {
  opacity: 0;
}
.menu_title .line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  width: 20px;
  border-radius: 25px;
  background: #aaa;
  transition: all 0.3s ease;
}
.menu_title .line {
  opacity: 0;
}
.sidebar.close .line {
  opacity: 1;
}
.item {
  list-style: none;
}
.link {
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #707070;
}
.link:hover {
  color: #fff;
  background-color: #4070f4;
}
.link span {
  white-space: nowrap;
}
.link i {
  height: 50px;
  min-width: 55px;
  display: flex;
  font-size: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.sidebar_profile {
  padding-top: 15px;
  margin-top: 15px;
  gap: 15px;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}
.sidebar_profile .name {
  font-size: 18px;
  color: #333;
}
.sidebar_profile .email {
  font-size: 15px;
  color: #333;
}

/* Navbar */
.navbar {
  max-width: 500px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 60%;
  transform: translateX(-50%);
  background: #fff;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  justify-content: space-between;
}
#sidebar-open {
  font-size: 30px;
  color: #333;
  cursor: pointer;
  margin-right: 20px;
  display: none;
}
.search_box {
  height: 46px;
  max-width: 500px;
  width: 100%;
  border: 1px solid #aaa;
  outline: none;
  border-radius: 8px;
  padding: 0 15px;
  font-size: 18px;
  color: #333;
}
.navbar img {
  height: 40px;
  width: 40px;
  margin-left: 20px;
}

/* Responsive */
@media screen and (max-width: 1100px) {
  .navbar {
    left: 65%;
  }
}
@media screen and (max-width: 800px) {
  .sidebar {
    left: 0;
    z-index: 1000;
  }
  .sidebar.close {
    left: -100%;
  }
  #sidebar-close {
    display: block;
  }
  #lock-icon {
    display: none;
  }
  .navbar {
    left: 0;
    max-width: 100%;
    transform: translateX(0%);
  }
  #sidebar-open {
    display: block;
  }
}

Lastly, added the provided JavaScript code to your script.js file to enable the functionality of expanding and collapsing the sidebar on mouse hover.

// Selecting the sidebar and buttons
const sidebar = document.querySelector(".sidebar");
const sidebarOpenBtn = document.querySelector("#sidebar-open");
const sidebarCloseBtn = document.querySelector("#sidebar-close");
const sidebarLockBtn = document.querySelector("#lock-icon");

// Function to toggle the lock state of the sidebar
const toggleLock = () => {
  sidebar.classList.toggle("locked");
  // If the sidebar is not locked
  if (!sidebar.classList.contains("locked")) {
    sidebar.classList.add("hoverable");
    sidebarLockBtn.classList.replace("bx-lock-alt", "bx-lock-open-alt");
  } else {
    sidebar.classList.remove("hoverable");
    sidebarLockBtn.classList.replace("bx-lock-open-alt", "bx-lock-alt");
  }
};

// Function to hide the sidebar when the mouse leaves
const hideSidebar = () => {
  if (sidebar.classList.contains("hoverable")) {
    sidebar.classList.add("close");
  }
};

// Function to show the sidebar when the mouse enter
const showSidebar = () => {
  if (sidebar.classList.contains("hoverable")) {
    sidebar.classList.remove("close");
  }
};

// Function to show and hide the sidebar
const toggleSidebar = () => {
  sidebar.classList.toggle("close");
};

// If the window width is less than 800px, close the sidebar and remove hoverability and lock
if (window.innerWidth < 800) {
  sidebar.classList.add("close");
  sidebar.classList.remove("locked");
  sidebar.classList.remove("hoverable");
}

// Adding event listeners to buttons and sidebar for the corresponding actions
sidebarLockBtn.addEventListener("click", toggleLock);
sidebar.addEventListener("mouseleave", hideSidebar);
sidebar.addEventListener("mouseenter", showSidebar);
sidebarOpenBtn.addEventListener("click", toggleSidebar);
sidebarCloseBtn.addEventListener("click", toggleSidebar);

Conclusion and Final Words

In conclusion, learning how to create a responsive hoverable sidebar menu using HTML, CSS, and JavaScript enhances your web development skills and provides insight into the process of building a custom website’s sidebars. By following the instructions provided, I hope that you have successfully created an appealing and functional Side Navigation Menu Bar.

Additionally, on this website, you’ll find a wide range of Sidebar Menu Templates, including options for business websites, portfolio websites, and more. These templates are built using HTML, CSS, and JavaScript. It’s a great opportunity for you to explore and try recreating them, allowing you to enhance your web development skills even further.

If you encounter any difficulties while creating your own hoverable sidebar menu or your code is not working as expected, you can download the source code files for this sidebar menu for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Create A Responsive Custom Website using HTML and CSS

CodingNepal — Tue, 30 May 2023 07:51:26 +0000

In today’s digital landscape, a well-designed and user-friendly website is essential for establishing an online presence. So, as a beginner web developer, it’s important to learn how to create responsive custom websites using HTML and CSS.

In this blog post, we’ll guide you through building your responsive custom website using HTML and CSS. Our example website will focus on camping gear and highlight sellers of essential equipment. You can also choose a different theme and customize it to your liking.

The website consists of key sections: Home, Services, Portfolio, About Us, Contact Us and Footer. Each section is fully responsive, adapting seamlessly to different screen sizes. On smaller devices, a hamburger menu provides convenient toggling of the menu visibility.

The Home section serves as the landing page with a navigation bar, captivating background image, descriptive text, and a call-to-action button. Services are showcased in visually appealing cards, while the Portfolio section displays accomplished projects through captivating image cards.

The About Us section shares the website’s story, mission, vision, and team details. Contact Us provides contact information and a user-friendly form for email, phone number, and messages. The footer section includes a copyright message and additional navigation links.

https://www.codingnepalweb.com/wp-content/uploads/2023/05/Create-A-Responsive-Custom-Website-using-HTML-and-CSS.mp4

Steps For Creating Custom Website in HTML and CSS

To create a responsive custom website using HTML and CSS, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Download and place the images folder in your project directory for the custom website. You can also use your own images if desired.

To start, add the following HTML codes to your index.html file: These codes include all the necessary CDN links, website layout, and different sections. Here you can change the website details according to your theme.

Camping Gear Website | CodingNepal

LOGO

Home
Services
Portfolio
About Us
Contact Us

Camping Gear and Essentials

Discover top-quality camping gear for unforgettable outdoor adventures.
Gear up and make lasting memories.

Our Services

Our Services
Explore our wide range of camping gear services.

Tents
Experience comfort and protection with our high-quality camping tents.

Sleeping Bags
Stay cozy and warm during your camping trips with our premium sleeping bags.

Camp Stoves
Cook delicious meals in the great outdoors with our reliable camp stoves.

Backpacks
Carry your essentials comfortably with our durable and functional camping backpacks.

Camp Chairs
Relax and unwind in style with our comfortable and portable camping chairs.

Camp Lights
Illuminate your campsite with our reliable and energy-efficient camping lights.

Our Portfolio
Take a look at some of our memorable camping adventures.

Mountain Hiking
Embark on an exhilarating hiking adventure in the breathtaking mountain ranges.

Lakeside Camping
Enjoy a tranquil camping experience by the serene shores of picturesque lakes.

Beach Camping
Escape to sandy beaches and camp under the starry sky by the crashing waves.

Forest Exploration
Discover the wonders of lush forests and immerse yourself in nature's beauty.

RV Camping
Experience the freedom of road trips and camping adventures with our RV rentals.

Desert Camping
Embark on a unique desert camping experience and witness stunning landscapes.

About Us
Discover our story in providing camping services.

Our Story
Experience the excellence of our camping gear and services, where we have been offering high-quality camping essentials and gear for outdoor enthusiasts for over a decade. Our commitment to quality and customer satisfaction ensures that every adventurer can rely on us for their camping needs.

Our Mission
At Camping Gear Experts, our mission is to equip outdoor enthusiasts with top-notch camping gear and essentials that enhance their outdoor experiences. We strive to provide reliable, durable, and innovative products that contribute to memorable adventures and lasting memories.
Our Vision
Our vision is to become the go-to destination for camping enthusiasts, known for our extensive selection of premium camping gear and exceptional customer service. We aspire to inspire and enable people to embrace the beauty of nature and create unforgettable camping experiences.

Our Team

John Doe - Founder and CEO
Jane Smith - Gear Specialist
Mark Johnson - Customer Representative
Sarah Brown - Operations Manager

123 Campsite Avenue, Wilderness, CA 98765
info@campinggearexperts.com
(123) 456-7890
Monday - Friday: 9:00 AM - 5:00 PM
Saturday: 10:00 AM - 3:00 PM
Sunday: Closed
www.codingnepalweb.com

Home
Contact

Next, add the following CSS codes to your style.css file to apply styling to the elements, set background images, and utilize media queries for responsiveness across different viewports. Feel free to customize this code by changing the color, font, size, and other CSS properties to match your desired design preferences.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #f2f2f2;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  display: flex;
  justify-content: center;
  background: #333;
}

.navbar {
  display: flex;
  padding: 0 10px;
  max-width: 1200px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.navbar input#menu-toggler {
  display: none;
}

.navbar #hamburger-btn {
  cursor: pointer;
  display: none;
}

.navbar .all-links {
  display: flex;
  align-items: center;
}

.navbar .all-links li {
  position: relative;
  list-style: none;
}

.navbar .logo a {
  display: flex;
  align-items: center;
  margin-left: 0;
}

header a, footer a {
  margin-left: 40px;
  text-decoration: none;
  color: #fff;
  height: 100%;
  padding: 20px 0;
  display: inline-block;
}

header a:hover, footer a:hover {
  color: #ddd;
}

.homepage {
  height: 100vh;
  width: 100%;
  position: relative;
  background: url("images/home-bg.jpg");
  background-position: center 65%;
  background-size: cover;
  background-attachment: fixed;
}

.homepage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
}

.homepage .content {
  display: flex;
  height: 85%;
  z-index: 3;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.homepage .content h1 {
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 10px;
}

.homepage .content .text {
  margin-bottom: 50px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.content a {
  color: #000;
  display: block;
  text-transform: uppercase;
  font-size: 18px;
  margin: 0 10px;
  padding: 10px 30px;
  border-radius: 5px;
  background: #fff;
  border: 2px solid #fff;
  transition: 0.4s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}

.content a:hover {
  color: #fff;
  background: rgba(255,255,255,0.3);
}

section {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 80px 0 0;
}

section h2 {
  font-size: 2rem;
}

section > p {
  text-align: center;
}

section .cards {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin-top: 50px;
  padding: 0 10px;
  justify-content: space-between;
}

section.about {
  margin: 0 auto;
  max-width: 1200px;
}

.about .company-info {
  margin-top: 30px;
}

.about h3 {
  margin: 30px 0 10px;
}

.about .team {
  text-align: left;
  width: 100%;
}

.about .team ul {
  padding-left: 20px;
}

section .cards .card {
  background: #fff;
  padding: 40px 15px;
  list-style: none;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.04);
  margin-bottom: 40px;
  width: calc(100% / 3 - 30px);
  text-align: center;
}

.portfolio .cards .card {
  padding: 0 0 20px;
}

.services .card img {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
  border-radius: 100%;
  object-fit: cover;
}

.portfolio .card img {
  width: 100%;
  padding-bottom: 10px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 7px;
}

.cards .card p {
  padding: 0 15px;
  margin-top: 5px;
}

.about .row {
  padding: 0 10px;
}

.contact .row {
  margin: 60px 0 90px;
  display: flex;
  max-width: 1200px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.contact .row .col {
  padding: 0 10px;
  width: calc(100% / 2 - 50px);
}

.contact .col p {
  margin-bottom: 10px;
}

.contact .col p i {
  color: #7a7a7a;
  margin-right: 10px;
}

.contact form input {
  height: 45px;
  margin-bottom: 20px;
  padding: 10px;
  width: 100%;
  font-size: 16px;
  outline: none;
  border: 1px solid #bfbfbf;
}

.contact form textarea {
  padding: 10px;
  width: 100%;
  font-size: 16px;
  height: 150px;
  outline: none;
  resize: vertical;
  border: 1px solid #bfbfbf;
}

.contact form button {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 17px;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  background: #333;
  transition: 0.2s ease;
}

.contact form button:hover {
  background: #525252;
}

footer {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #000;
  padding: 20px 0;
}

footer div {
  padding: 0 10px;
  max-width: 1200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

footer span {
  color: #fff;
}

footer a {
  padding: 0;
}

@media screen and (max-width: 860px) {
  .navbar .all-links {
    position: fixed;
    left: -100%;
    width: 300px;
    display: block;
    height: 100vh;
    top: 75px;
    background: #333;
    transition: left 0.3s ease;
  }

  .navbar #menu-toggler:checked~.all-links {
    left: 0;
  }

  .navbar .all-links li {
    font-size: 18px;
  }

  .navbar #hamburger-btn {
    display: block;
  }

  section > p {
    text-align: center;
  }

  section .cards .card {
    width: calc(100% / 2 - 15px);
    margin-bottom: 30px;
  }

  .homepage .content h1 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .homepage .content .text {
    font-size: 17px;
  }

  .content a {
    font-size: 17px;
    padding: 9px 20px;
  }

  .contact .row {
    flex-direction: column;
  }

  .contact .row .col {
    width: 100%;
  }

  .contact .row .col:last-child {
    margin-top: 40px;
  }

  footer a {
    height: 0;
  }
}

@media screen and (max-width: 560px) {
  section .cards .card {
    width: 100%;
    margin-bottom: 30px;
  }
}

If you look at the HTML and CSS code carefully, you’ll notice the implementation of the input type checkbox, which effectively toggles the visibility of the navigation bar when the hamburger icon is clicked. The website’s code is thoughtfully organized and straightforward, making it easily understandable, especially for beginners.

Conclusion and Final Words

In conclusion, learning how to create a responsive custom website using HTML and CSS enhances your web development skills and provides insight into the process of building a custom website. By following the instructions provided, I hope that you have successfully created an appealing and functional website.

Additionally, on this website, you’ll find a wide range of website templates, including options for business websites, portfolio websites, and more. These templates are built using HTML, CSS, and JavaScript. It’s a great opportunity for you to explore and try recreating them, allowing you to enhance your web development skills even further.

If you encounter any difficulties while creating your own custom website or your code is not working as expected, you can download the source code files for this camping gear theme website for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Responsive Personal Portfolio Website in HTML CSS and Bootstrap

CodingNepal — Sun, 28 May 2023 06:57:51 +0000

Building a personal portfolio website is a valuable skill for web developers. With HTML, CSS, and Bootstrap, you can create an attractive, responsive, and functional website to showcase your talent or services.

In this blog post, we will guide you through the process of building a responsive portfolio website that includes key sections such as Home, Skills, Portfolio, About Us, Curriculum Vitae (CV), Contact Us Form, and Footer.

The Home section will feature a navigation bar, a background image, descriptive text, and a call-to-action button. In the skills section, visually appealing cards will display your skills and expertise. The Portfolio section will showcase your accomplished projects using captivating image cards.

The About Us section will present your achievements in a vertical timeline format, highlighting your professional journey. The Curriculum Vitae (CV) section will showcase essential personal and professional details in a resume format.

The Contact Us section will feature a contact form with fields for email, username, phone number, and message, and finally, the Footer section will feature a copyright message and some social media buttons.

https://www.codingnepalweb.com/wp-content/uploads/2023/05/Responsive-Personal-Portfolio-Website-in-HTML-CSS-and-Bootstrap-only.mp4

Steps For Creating Responsive Portfolio Website in Bootstrap

To create a responsive personal portfolio website using HTML, CSS, and Bootstrap follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Download the images folder and put this folder inside the project folder. This folder has all the images that will be used for this portfolio website. But, if you want, you can use your own images.

To start, add the following HTML codes to your index.html file: These codes include all the necessary CDN links, website layout, and different sections. Since we’ve used Bootstrap for the portfolio website, it’s nearly complete here without the need for extensive custom CSS.

Remember, adding your own personal touch by customizing the website with your unique details and requirements can greatly enhance its overall appeal.



  
    
    
    Portfolio Website | CodingNepal
    
    
    
    
    
    
  
  
    
    
      
        
          James Anderson
          
          
            
              
                SKILLS
              
              
                PORTFOLIO
              
              
                ABOUT
              
              
                CURRICULUM VITAE
              
              
                CONTACT
              
          
        
      
    

    
    
      
        James Anderson
        Information & Computer Systems 
 student
        TELL ME MORE
      
    
    
    
    
      
        
          SKILLS
          Continuously improving my skills and knowledge in the field.
        
      
      
        
          
          Front-end Development
          Proficient in HTML, CSS, and JavaScript. Experienced in responsive web design, building user-friendly interfaces, and using modern frameworks like ReactJS.
        
        
          
          Back-end Development
          Skilled in server-side programming using technologies like Node.js and Express. Experience working with databases such as MongoDB and MySQL.
        
        
          
          Mobile App Development
          Proficient in developing mobile apps for iOS and Android using frameworks like React Native. Experienced in building engaging and intuitive mobile user interfaces.
        
      
    

    
    
      
        
          PORTFOLIO
          A collection of projects I've worked on.
        
        
          
            
              
              
                E-commerce Website
                HTML/CSS/JavaScript
              
            
          
          
            
              
              
                Responsive Landing Page
                HTML/CSS/Bootstrap
              
            
          
          
            
              
              
                Calculator App
                HTML/CSS/JavaScript
              
            
          
          
            
              
              
                Blog Website
                HTML/CSS/PHP
              
            
          
          
            
              
              
                Task Management App
                ReactJS
              
            
          
          
            
              
              
                Data Visualization
                Python/Plotly
              
            
          
        
            
    

    
    
      
        
          ABOUT
          Learn more about me, my background, and what motivates me.
        
      
      
        
          1995-2008
          Early Passion for Technology
          From an early age, I became fascinated with computers and programming. Starting with basic HTML and CSS, I gradually expanded my skills to include JavaScript and various frameworks.
        
        
          
        
      
      
        
          
        
        
          2008-2014
          Higher Education and Career Growth
          During my university years, I studied computer science and gained hands-on experience through internships and freelance projects. This period fueled my passion for creating innovative solutions and solving complex problems.
        
      
      
        
          2014-Present
          Professional Excellence and Continuous Learning
          Throughout my career, I have consistently sought opportunities to refine my skills and stay updated with the latest technologies. I strive for excellence in every project I undertake and aim to deliver valuable and impactful results.
        
        
          
        
      
      
        
          
        
        
          Future
          Continuing to Make a Difference
          I am committed to leveraging my skills and expertise to contribute to meaningful projects that have a positive impact on society. I am eager to take on new challenges and collaborate with talented individuals to create innovative solutions.
        
      
      
        
          Your
Next
Hire
        
            
    

    
    
      
        
          CURRICULUM VITAE
          A small sampling of some of the projects I've worked on as a student of the ICS program.
        
      
      
        
          
          James Anderson
          
             your.email@example.com
             (123) 456-7890
             Your Address
          
          
            
            
            
          
          Technical Skills
          
            HTML
            CSS
            JavaScript
            
          
          Personal Interests
          
            Interest 1
            Interest 2
            Interest 3
            
          
        
        
          Profile
          
          Write a brief description of yourself, your background, and your goals. Highlight your key strengths and experiences.
          Highlights of Qualifications
          
          
            Qualification 1
            Qualification 2
            Qualification 3
            
          
          Education
          
          
            Year - Year
            University/Institution
            Degree/Program
          
          Additional Courses & Training
          
          
            Year
            Course/Training
            Institution/Organization
          
          Work Experience
          
          
            Year - Year
            Job Position
            Company/Organization
            
          
          Extracurricular Activities
          
          
            Organization Name
            Role/Position
            Details of your involvement and contributions
          
        
            
    

     
     
      
        
          CONTACT ME
          Interested if I'd be the right fit for your team? Fill in this form and I will respond within 24-48 hours.
        
        
          
            
              
                
                  
                    
                    Enter Name*
                  
                  
                    
                    Enter Email*
                  
                  
                    
                    Enter Phone*
                  
                
                
                  
                  Enter Message*
                
                
                  
                
              
  
            
          
        
       
     

     
     
      
        Copyright © 2023 James Anderson

Next, add the following few custom CSS codes to your style.css file to style some elements, add background images, and do other things on the website. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties.

/* Color variables */
:root {
  --white-color: #fff;
  --bg-color: #fff;
  --gray-color: #ccc;
}

/* Changing background color */
body {
  background: var(--bg-color) !important;
}

/* Changing link color */
.nav-item .nav-link {
  color: var(--white-color);
}

/* Hero section background image */
.hero {
  height: 100vh;
  background-image: url("../images/home-bg.jpg");
  background-repeat: no-repeat;
  background-position: 60% 0%;
  background-size: cover;
  background-attachment: fixed;
}

#skills i {
  height: 100px;
  width: 100px;
}

#portfolio img {
  height: 300px;
  object-fit: cover;
}

#about .img,
#about img,
.hire-text h2 {
  position: relative;
}

/* Timeline background line */
#about .img::before {
  content: "";
  left: 50%;
  width: 4px;
  position: absolute;
  height: calc(100% + 140px);
  background: var(--gray-color);
}

#about img,
#about .hire-text h2 {
  width: 140px;
}

#about .hire-text h2 {
  height: 140px;
}

.social-icons a {
  width: 40px;
  height: 40px;
}

footer .social-icons a {
  width: 30px;
  height: 30px;
}

#cv img {
  width: 230px;
}

/* Contact section background image */
#contact {
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-image: url("../images/contact-bg.jpeg");
}

@media screen and (max-width: 990px) {
  #skills .card {
    width: calc(100% / 2 - 10px) !important;
  }
}

@media screen and (max-width: 668px) {
  #skills .card,
  #portfolio .card-wrapper {
    width: 100% !important;
  }
 #about .hire-text h2 {
   height: 70px;
   width: 70px;
 }
}

Conclusion and Final Words

In conclusion, building a responsive portfolio website using HTML, CSS, and Bootstrap is a valuable skill that boosts your online presence and showcases your talents. By following the provided instructions, you’ve successfully created an attractive and functional personal portfolio website.

Additionally, you can explore a wide range of website design templates available on this platform, all built with HTML, CSS, and JavaScript. These templates not only serve as valuable learning resources for aspiring web developers but also provide practical solutions for various purposes.

If you encounter any difficulties while creating your own portfolio website or your code is not working as expected, you can download the source code files for this portfolio website for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

10+ Website Templates Design in HTML CSS and JavaScript

CodingNepal — Tue, 13 Dec 2022 21:11:21 +0000

If you want to learn how to create the best Website Templates Design using HTML, CSS, and JavaScript and want step-by-step guidance, this blog is for you.

In this blog, I have provided a list of the 10+ Best Website Templates Design with source code that is created using HTML, CSS, and JavaScript. I believe that even if you are a complete beginner in these languages then also, you will be able to create these templates using the provided basic code. Recently, I shared a list of the top 5 sidebar designs. I hope you found it helpful.

Generally, we can understand that a website is a collection of related web pages that are hosted on a web server and can be accessed over the internet through a web browser. Websites typically provide information, offer online services, or sell products and services. Users can access a website by entering a domain name or IP address into a web browser’s address bar.

Let’s get into our list of Top 10 Website Templates Design in HTML CSS & JavaScript

1. Simple Website Design in HTML & CSS

In this list, this is the simple website design I make in HTML and CSS. It includes a navigation bar with a logo and navigation links, some text and a button, and a full-screen image. These elements are often used in website design.

If you are new to HTML and CSS and want to create a simple website design, you should try making this website. The provided links include the source code file and a video tutorial to guide you through the process. This is a great way to learn the basics of HTML and CSS and create a simple website template.

2. Simple Portfolio Website Template in HTML & CSS

This is a Simple Portfolio website design created using HTML and CSS. The website includes a profile image, logo, navigation links, the person’s name, short details, and a button. This design is a great way to showcase a person’s skills and experience and can be easily customized using HTML and CSS.

If you are a beginner in HTML and CSS and want to create a simple Portfolio Website, this design is a good starting point. The provided links include a video tutorial and the source code files to help you get started. This is a great way to learn the basics of HTML and CSS and create a simple portfolio website template.

4. Glassmorphism Website Template in HTML & CSS

This is the only website template on this list with a Glassmorphism user interface. Glassmorphism is a popular design trend that involves using transparent and semi-transparent elements to create a distinctive and eye-catching user interface. Using HTML and CSS, it is possible to create a wide range of website designs, including those with a Glassmorphism user interface.

I created a website using HTML and CSS that has a Glassmorphism user interface. The website design includes a logo, navigation links, two buttons, some text, and a video play section. It also has two circles on the back. The provided links include the source code and a video tutorial to help you create this design.

5. Portfolio Website Design with Typing Text Animation

One of the interesting features of this portfolio website is the typing text animation. It also has a beautiful background image and a search box. These features make the website eye-catching and engaging and can be easily implemented using HTML and CSS.

If you are interested in creating a portfolio website that stands out and showcases your skills and experience in a unique way, you should consider trying to create this design. Visit the given links for the source code and the video tutorial for this Portfolio Website Template.

6. Coming Soon Website Template in HTML CSS & JS

This is the coming soon website template which is created in HTML CSS and JavaScript. As you can on this Website I have some basic content like text, time, and email address fields. The time decreases every second.

If you already have a basic understanding of HTML, CSS, and JavaScript, this website can help you improve your skills. Check out the links provided for video tutorials and the source code for this coming soon website design.

7. Website Design with Dark/Light Mode and Color Switcher

In this website template, you can get some advanced features like Color Switcher and Dark/Light Mode. By clicking on the color switcher you can choose whatever color you want on your website. As well you can change this Website theme to dark mode.

If you want to create a customizable website with modern features like a color switcher and a dark/light mode toggle with HTML, CSS, and JavaScript. The provided link includes the source code and video tutorials for this website design.

Watch Video Tutorial

Download Source Code

8. Complete Website Design in HTML CSS & JavaScript

This is a single-page website design with multiple sections. The website template includes a variety of sections such as sliding images, testimonials, a navigation bar, a newsletter, a footer, and more. The website is fully responsive and is built using HTML, CSS, and JavaScript.

If you are looking for a complete single-page website with various features, this project may meet your needs. Visit the provided links including the source code and video tutorial for this coffee website template design.

9. Portfolio Website Template in HTML CSS & JavaScript

This is a fully responsive, single-page portfolio website template built using HTML, CSS, and JavaScript. The website template includes sections for the header, about us, contact us, footer, and more.

If you are looking for a portfolio website with a single page and multiple sections, this project may be a good fit for your needs. The provided links include the source code and video tutorial for this portfolio website template.

10. Portfolio Website Template with Typing Text Animation

The main attraction of this Portfolio Website Design is the typing text animation. This is a one-page website with multiple sections that are fully responsive. I have also included an owl carousel feature. This website was built using HTML, CSS, JavaScript, and the Owl carousel plugin.

If you want a modern portfolio website with features that can help improve your HTML, CSS, and JavaScript skills, this project is for you. The source code and video tutorial for the Portfolio Website Template are available in the provided links.

11. Responsive Personal Portfolio Website in Bootstrap

This is a responsive personal portfolio website that was created using HTML, CSS, and Bootstrap. This website includes key sections such as Home, Skills, Portfolio, About Us, Curriculum Vitae (CV), Contact Us Form, and Footer.

Since I used Bootstrap to create this website, it ensures seamless responsiveness and a user-friendly experience. Whether you’re a student seeking to learn by recreating this website or an aspiring professional looking to showcase your portfolio, this website is the perfect way to present your talents to the world.

Watch Video Tutorial
Download Source Code

12. Responsive Custom Website in HTML & CSS

This is a custom responsive website created using only pure HTML and CSS. This website focuses on camping gear and highlights sellers of essential equipment. But you can also choose a different theme and customize it to your liking.

This website consists of key sections: home, services, portfolio, about us, contact us and footer. Each section is fully responsive, adapting seamlessly to different screen sizes. On smaller devices, a hamburger menu provides convenient toggling of the menu’s visibility.

Watch Video Tutorial
Download Source Code

Conclusion

In this list, I presented the 10+ Best Free Website Templates Designs created with HTML, CSS, and JavaScript. I hope you liked them and found them useful. Additionally, there are many other website template designs on our website that we did not include in this list. Feel free to check them out and find the perfect one for your needs.

If you want to improve your skills in HTML, CSS, and JavaScript, then consider subscribing to My YouTube Channel. There, you will find video tutorials that cover a variety of topics related to pure HTML, CSS, and JavaScript.

If you found this blog helpful, I encourage you to share it with others. Thank you!!

Create Navigation Menu Hover Animation in HTML CSS

CodingNepal — Mon, 21 Nov 2022 21:11:21 +0000

You may have seen the hover animation navigation menu on websites when the pointer is moved to any menu link. If you are looking for a quick and easy way to create this Underline hover animated menu, this blog is for you.

But before continuing this blog, If you haven’t read my previous article about how to create a Login & Registration Form in HTML CSS, be sure to check it out. I hope it will improve your HTML and CSS skills.

In this blog, you’ll learn how to create Navigation Menu Hover Animation in HTML & CSS. Hover animations like these are commonly used on websites. Even if you only know the basics of HTML and CSS, you can still use them to create Navigation Menu Hover Animation.

Navigation hover animation is the term for the animation that shows when a user hovers over a navigation link. In essence, these animations provide the impression that we have clicked or hovered over them.

Have a look at the given preview of my animated navigation as you can see there are some navigation links and you are seeing only one underline under the navigation links

If you want to create this Navigation Hover Animation Menu step-by-step with me, you can check out the video tutorial that I have provided below. I have explained all the HTML and CSS code that I used.

Navigation Menu Hover Animation | Video Tutorial

All of the HTML and CSS code that I used to create this hover animation is provided. Instead of duplicating the code or downloading the source code file, I strongly advise you to watch the full video explanation of this Navigation Menu Hover Animation. By watching the video tutorial, you will be able to create this Navigation Menu Hover Animation.

As you have seen all the navigation menu bar hover animations and effects using HTML and CSS in this video tutorial. At first, we only saw navigation links, but when I moved the cursor over the menu links, beautiful and distinct underlined animations appeared smoothly.

I hope now you can create this Navigation Menu Hover Animation in HTML and CSS. If you want to take all the HTML and CSS code that I have used to create these animated menu links then all the source codes are given below.

Menu Hover Animation [Source Codes]

To create a Navigation Menu Hover Animation, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Navigation Menu Hover Animation by clicking on the given download button.

First, paste the following codes into your index.html file.





  
  
  
   Navigation Bar Hover Animation 
  
  


  
    
      
        Home
        About
        Services
        Contact

Second, paste the following codes into your style.css file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.container{
  width: 100%;
  height: 100vh;
  background: #2192ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
nav{
  background: #fff;
  border-radius: 9px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
nav ul li{
  display: inline-block;
  list-style: none;
  font-size: 2rem;
  padding: 0 10px;
  margin: 0 20px;
  cursor: pointer;
  position: relative;
}
nav ul li:after{
  content: '';
  width: 0;
  height: 3px;
  background: #2192ff;
  position: absolute;
  left: 0;
  bottom: -10px;
  transition: 0.5s;
}
nav ul li:hover::after{
  width:100%;
}

If you face any difficulties while creating your Navbar Hover Animation or your code is not working as expected, you can download the source code files for this Navigation Menu Bar Hover Animation for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

How to Create a Simple Website in HTML & CSS | With Source Code

CodingNepal — Mon, 07 Nov 2022 21:11:20 +0000

Are you looking for Simple Website Design, If your answer is yes then you are in the right post? In this blog, you will learn to create a simple website design using HTML & CSS. I already have created a lot of Website Designs. I hope you will like those projects.

A website is a collection of web pages located under a single domain name. websites are typically dedicated to a particular topic or purpose, such as news, education, commerce, entertainment, or social networking.

Have a quick look at the given preview of our website. In this image, I have added a full background image, a logo, links, text, and buttons. And here, as you can see, when I take the cursor over the link, the link’s color will be pink.

If you want to see the actual demo of this Website then you can watch the video given below. After watching the video tutorial, You will also get an idea of the HTML and CSS code that I have used to create this website.

Video Tutorial | Create Simple Website in HTML & CSS

As you have seen in this video tutorial of this Simple Website. First, there is a full background image after that you can see the logo, some links, texts, and buttons. As you’ve seen in this video whenever I take the cursor over the menu links the color of the menu link will be changed, also whenever I take the cursor over the hire me button the background color of the link will be changed and you can see white text color and border color there.

That’s how you can create a simple website design using HTML and CSS only. I hope you are now able to create this simple website using HTML and CSS. If you are a beginner I suggest you don’t skip the video. It might be difficult for you so, try to understand the codes, methods, and logic.

A Simple Website [Source Codes]

To create Create a Simple Website, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Create a Simple Website by clicking on the given download button.

First, paste the following codes into your index.html file.

 




  
  
  
 Simple Website Design
  
  


  
    
      
        Portfolio.
      
      
        Home
        About
        Services
        Contact
      
      
        Log in
        Register
      
    
    
      Hello,
It's Me CoderGirl
      I'm A Web Developer & Designer. I Will Make Your Project Beautiful And Attractive,
You Can Find Me On GitHub.
    
    
      Hire Me

Second, paste the following codes into your style.css file.

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Karla', sans-serif;
}
body{
  color: #fff;
}
.container{
  width: 100%;
  height: 100vh;
  background-image: url(back.jpg);
  background-position: center;
  background-size: cover;
  padding-top: 35px;
  padding-left: 8%;
  padding-right: 8%;
}
nav{
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo a{
  font-size: 40px;
  text-decoration: none;
}
span{
  color: #f9004d;
}
nav ul li{
  display: inline-block;
  list-style: none;
  margin: 10px 15px;
}
nav ul li a{
  text-decoration: none;
  transition: 0.5s;
}
nav ul li a:hover{
  color: #f9004d;
}
.login{
  text-decoration: none;
  margin-right: 15px;
  font-size: 18px;
}
.btn{
  background: #000;
  border-radius: 6px;
  padding: 9px 25px;
  text-decoration: none;
  transition: 0.5s;
  font-size: 18px;
}

.content{
  margin-top: 10%;
  max-width: 600px;
}
.content h2{
  font-size: 60px
}
.content p{
  margin-top: 10px;
  line-height: 25px;
}
a{
  color: #fff;
}
.link {
  margin-top: 30px;
}
.hire{
  color: #000;
  text-decoration: none;
  background: #fff;
  padding: 9px 25px;
  font-weight: bold;
  border-radius: 6px;
  transition: 0.5s;
}
.link .hire:hover{
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}

That’s all, now you’ve successfully created a project on the Website. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

How to Create Profile Card in HTML & CSS

CodingNepal — Fri, 30 Sep 2022 21:11:20 +0000

Hey dude, I believe you are doing well. As usual, today you will learn to Create A Profile Card UI Design using only HTML and CSS. I have already created many Card Designs I hope you have watched them. Today’s profile card will be simple and valuable.

Profile cards are card design that contains important details of a specific person in a brief way. It could contain details like a person’s name, email, social media links for that person, and other important details. We can find this type of profile card on websites like portfolio websites and other types of websites

Have a quick look at the given image of our Profile Card Design. As you can see on the image there are lots of details I have added like profile image, name, social media link buttons, subscribe and message button, and the numbers of likes, comments, and shares.

You can watch the demo of this Profile Card UI Design from the video that I have provided below. Also, you can get all the ideas of HTML and CSS code that I have used to create this beautiful profile card design.

How to Create Profile Card in HTML & CSS | Video Tutorial

I have provided all the HTML and CSS code that I have used to create this Profile Card UI Design. Before getting into the source code file. I would like to explain the given video tutorial on the profile card briefly.

As you have seen in the video tutorial on the Profile Card UI Design. There was an image with a beautiful border, some buttons,s and social media links. To create this profile card I used only HTML and CSS. As you have seen I have created this profile card from scratch.

I hope, now you can make this profile card using HTML and CSS. If you are feeling difficulty creating this profile card, I have provided all the source codes below, from there you can copy or download all the source code files of this beautiful profile card.

Profile Card UI Design [Source Code]

To get the following HTML and CSS code for the Profile Card. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.




  
    
    
    
    

    
    

    
    
  
  
    
      
        
      

      
        CodingLab
        YouTuber & Blogger
      

      
        
          
        
        
          
        
        
          
        
        
          
        
      

      
        
        
      

      
        
          
          60k
        
        
          
          20k
        
        
          
          12k

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
}
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 370px;
  width: 100%;
  background: #fff;
  border-radius: 24px;
  padding: 25px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}
.profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 36%;
  width: 100%;
  border-radius: 24px 24px 0 0;
  background-color: #4070f4;
}
.image {
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color: #4070f4;
  padding: 3px;
  margin-bottom: 10px;
}
.image .profile-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
}
.profile-card .text-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333;
}
.text-data .name {
  font-size: 22px;
  font-weight: 500;
}
.text-data .job {
  font-size: 15px;
  font-weight: 400;
}
.profile-card .media-buttons {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.media-buttons .link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  margin: 0 8px;
  background-color: #4070f4;
  text-decoration: none;
}
.profile-card .buttons {
  display: flex;
  align-items: center;
  margin-top: 25px;
}
.buttons .button {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  border: none;
  border-radius: 24px;
  margin: 0 10px;
  padding: 8px 24px;
  background-color: #4070f4;
  cursor: pointer;
  transition: all 0.3s ease;
}
.buttons .button:hover {
  background-color: #0e4bf1;
}
.profile-card .analytics {
  display: flex;
  align-items: center;
  margin-top: 25px;
}
.analytics .data {
  display: flex;
  align-items: center;
  color: #333;
  padding: 0 20px;
  border-right: 2px solid #e7e7e7;
}
.data i {
  font-size: 18px;
  margin-right: 6px;
}
.data:last-child {
  border-right: none;
}

Search Results for “portfolio” – CodingNepal

Build An AI Image Generator Website in HTML CSS and JavaScript

Video Tutorial of AI Image Generator HTML and JavaScript

Steps to Build AI Image Generator Website HTML & JavaScript

AI Image Generator Tool JavaScript

Conclusion and Final words

Create A Beautiful Responsive Website in HTML and CSS

Steps to Create Website Homepage HTML & CSS

Mobile App Development

Conclusion and final words

Create Website with Login & Registration Form in HTML CSS and JavaScript

Video Tutorial of Website with Login & Registration Form

Steps to Create Website with Login & Registration Form

Welcome Back

LOGIN

Create Account

SIGNUP

Conclusion and Final words

Create Hoverable Sidebar Menu in HTML CSS and JavaScript

Hoverable Sidebar Menu in HTML CSS & JavaScript

Steps For Creating Sidebar Menu in HTML and CSS

Conclusion and Final Words

Create A Responsive Custom Website using HTML and CSS

Steps For Creating Custom Website in HTML and CSS

Camping Gear and Essentials

Our Services

Tents

Sleeping Bags

Camp Stoves

Backpacks

Camp Chairs

Camp Lights

Our Portfolio

Mountain Hiking

Lakeside Camping

Beach Camping

Forest Exploration

RV Camping

Desert Camping

About Us

Our Story

Our Mission

Our Vision

Our Team

Contact Us

Conclusion and Final Words

Responsive Personal Portfolio Website in HTML CSS and Bootstrap

Steps For Creating Responsive Portfolio Website in Bootstrap

James Anderson

Information & Computer Systems student

SKILLS

Continuously improving my skills and knowledge in the field.

Front-end Development

Back-end Development

Mobile App Development

PORTFOLIO

A collection of projects I've worked on.

E-commerce Website

Responsive Landing Page

Calculator App

Blog Website

Task Management App

Data Visualization

ABOUT

Learn more about me, my background, and what motivates me.

1995-2008

Early Passion for Technology

2008-2014

Higher Education and Career Growth

2014-Present

Professional Excellence and Continuous Learning

Future

Continuing to Make a Difference

YourNextHire

CURRICULUM VITAE

A small sampling of some of the projects I've worked on as a student of the ICS program.

James Anderson

Technical Skills

Personal Interests

Profile

Information & Computer Systems
student

Your
Next
Hire

Hello,
It's Me CoderGirl