Website – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Fri, 15 Dec 2023 12:17:32 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Build An AI Image Generator Website in HTML CSS and JavaScript https://www.codingnepalweb.com/ai-image-generator-website-html-javascript/ https://www.codingnepalweb.com/ai-image-generator-website-html-javascript/#respond Fri, 15 Dec 2023 01:52:37 +0000 https://www.codingnepalweb.com/?p=5761 Build An AI Image Generator Website in HTML CSS and JavaScript

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.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Image Generator HTML CSS and JavaScript | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <section class="image-generator">
    <div class="content">
      <h1>AI Image Generator Tool JavaScript</h1>
      <p>Convert your text into an image within a second using this
        JavaScript-powered AI Image Generator tool.</p>
      <form action="#" class="generate-form">
        <input class="prompt-input" type="text" placeholder="Describe what you want to see" required>
        <div class="controls">
          <select class="img-quantity">
            <option value="1">1 Image</option>
            <option value="2">2 Images</option>
            <option value="3">3 Images</option>
            <option value="4" selected>4 Images</option>
          </select>
          <button type="submit" class="generate-btn">Generate</button>
        </div>
      </form>
    </div>
  </section>
  <section class="image-gallery">
    <div class="img-card"><img src="images/img-1.jpg" alt="image"></div>
    <div class="img-card"><img src="images/img-2.jpg" alt="image"></div>
    <div class="img-card"><img src="images/img-3.jpg" alt="image"></div>
    <div class="img-card"><img src="images/img-4.jpg" alt="image"></div>
  </section>
</body>
</html>

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 }, () => 
      `<div class="img-card loading">
        <img src="images/loader.svg" alt="AI generated image">
        <a class="download-btn" href="#">
          <img src="images/download.svg" alt="download icon">
        </a>
      </div>`
  ).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.

 

]]>
https://www.codingnepalweb.com/ai-image-generator-website-html-javascript/feed/ 0
Create A Responsive Coffee Website in HTML and CSS https://www.codingnepalweb.com/create-responsive-coffee-website-html-css/ https://www.codingnepalweb.com/create-responsive-coffee-website-html-css/#respond Sun, 01 Oct 2023 09:18:35 +0000 https://www.codingnepalweb.com/?p=5768 Create A Responsive Coffee Website in HTML and CSS

As a beginner in web development, creating a simple yet responsive website can be an exciting and educational project. It is a great way to learn the basics of HTML fundamentals and CSS styles and gain practical experience in creating and designing a website.

In this blog post, I will guide you through the process of creating an attractive, responsive coffee website using HTML and CSS. My website will focus on a coffee theme, but you can customize it. By creating this website, not only will you learn to create a website, but you’ll also learn how to structure web content properly and apply styling to make it responsive to different screen sizes.

To create our coffee website, we will use common HTML elements like header, navigation bar (nav), ul, li, a, and button, along with some basic CSS properties to style and make our website responsive and attractive. So as a beginner, you should have no trouble following the steps and understanding the codes.

Steps to Create Responsive Coffee Website HTML and CSS

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

  • First, create a folder with any name you like. Then, put 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 code to your index.html file: This code includes essential HTML markup with different semantic tags, such as header, nav, h2, a, ul, li, p, and button, which are used to create the layout of our website. Additionally, this code includes a few lines of  JavaScript code to toggle the mobile menu on small screens.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee Website HTML and CSS | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <!-- Google Fonts Links For Icon -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0">
  </head>
  <body>
    <header>
      <nav class="navbar">
        <a class="logo" href="#">Coffee<span>.</span></a>
        <ul class="menu-links">
          <span id="close-menu-btn" class="material-symbols-outlined">close</span>
          <li><a href="#">Home</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Testimonials</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="#">Contact us</a></li>
        </ul>
        <span id="hamburger-btn" class="material-symbols-outlined">menu</span>
      </nav>
    </header>

    <section class="hero-section">
      <div class="content">
        <h2>Start Your Day With Fresh Coffee</h2>
        <p>
          Coffee is a popular and beloved beverage enjoyed by 
          people around the world.Awaken your senses with a steaming cup of liquid motivation.
        </p>
        <button>Order Now</button>
      </div>
    </section>

    <script>
      const header = document.querySelector("header");
      const hamburgerBtn = document.querySelector("#hamburger-btn");
      const closeMenuBtn = document.querySelector("#close-menu-btn");

      // Toggle mobile menu on hamburger button click
      hamburgerBtn.addEventListener("click", () => header.classList.toggle("show-mobile-menu"));

      // Close mobile menu on close button click
      closeMenuBtn.addEventListener("click", () => hamburgerBtn.click());
    </script>
    
  </body>
</html>

Next, add the following CSS code to your style.css file to style and make your coffee website responsive and attractive. Feel free to experiment with different CSS properties, such as colors, fonts, and backgrounds, to give your personal touch and make the website even more beautiful.

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

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

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px;
}

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

.navbar .logo {
  color: #fff;
  font-weight: 600;
  font-size: 2.1rem;
  text-decoration: none;
}

.navbar .logo span {
  color: #C06B3E;
}

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

.navbar a {
  color: #fff;
  text-decoration: none;
  transition: 0.2s ease;
}

.navbar a:hover {
  color: #C06B3E;
}

.hero-section {
  height: 100vh;
  background-image: url("https://www.codingnepalweb.com/demos/create-responsive-coffee-website-html-css/hero-bg.jpg");
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.hero-section .content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  color: #fff;
}

.hero-section .content h2 {
  font-size: 3rem;
  max-width: 600px;
  line-height: 70px;
}

.hero-section .content p {
  font-weight: 300;
  max-width: 600px;
  margin-top: 15px;
}

.hero-section .content button {
  background: #fff;
  padding: 12px 30px;
  border: none;
  font-size: 1rem;
  border-radius: 6px;
  margin-top: 38px;
  cursor: pointer;
  font-weight: 500;
  transition: 0.2s ease;
}

.hero-section .content button:hover {
  color: #fff;
  background: #C06B3E;
}

#close-menu-btn {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
  display: none;
}

#hamburger-btn {
  color: #fff;
  cursor: pointer;
  display: none;
}

@media (max-width: 768px) {
  header {
    padding: 10px;
  }

  header.show-mobile-menu::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
  }

  .navbar .logo {
    font-size: 1.7rem;
  }

    
  #hamburger-btn, #close-menu-btn {
    display: block;
  }

  .navbar .menu-links {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    padding: 70px 40px 0;
    transition: left 0.2s ease;
  }

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

  .navbar a {
    color: #000;
  }

  .hero-section .content {
    text-align: center;
  }

  .hero-section .content :is(h2, p) {
    max-width: 100%;
  }

  .hero-section .content h2 {
    font-size: 2.3rem;
    line-height: 60px;
  }
  
  .hero-section .content button {
    padding: 9px 18px;
  }
}

Conclusion and final words

In conclusion, creating a responsive website is a valuable and rewarding experience for beginners in the world of web development. I believe that by following the steps and the codes in this post, you’ve successfully created your responsive coffee website using HTML and CSS.

To further improve your HTML and CSS skills for web development, I suggest recreating other attractive website designs available on this website. This practice will help you gain a better understanding of HTML and CSS and boost your confidence in creating entire websites or website components.

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

]]>
https://www.codingnepalweb.com/create-responsive-coffee-website-html-css/feed/ 0
Create A Responsive Footer Section in HTML and CSS https://www.codingnepalweb.com/create-responsive-footer-html-css-only/ https://www.codingnepalweb.com/create-responsive-footer-html-css-only/#respond Sat, 16 Sep 2023 12:02:08 +0000 https://www.codingnepalweb.com/?p=5749 Create A Responsive Footer in HTML and CSS Only

You’ve probably seen footers on almost every website you’ve visited. The footer is a crucial section of a website that appears at the bottom of every page. It usually contains links to important pages and copyright information.

In this blog post, I’ll show you how to make a responsive footer using HTML and CSS. It’s a simple but great project for beginners, helping you understand how to set up a footer layout with HTML and give it a stylish, responsive design with CSS.

To create a footer, we will use commonly used HTML elements like footer, h4, ul, li, a, and button, along with some basic CSS properties to style and make the footer responsive. So you should have no trouble following along and understanding the codes.

Steps to Create Responsive Footer in HTML and CSS

To create a responsive footer 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 footer, h4, form, input, p, li, and buttons, which are used to create our footer layout.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Footer HTML and CSS | CodingNepal</title>
    <!-- Fonts Links For Icon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="footer">
      <div class="footer-row">
        <div class="footer-col">
          <h4>Info</h4>
          <ul class="links">
            <li><a href="#">About Us</a></li>
            <li><a href="#">Compressions</a></li>
            <li><a href="#">Customers</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Collection</a></li>
          </ul>
        </div>

        <div class="footer-col">
          <h4>Explore</h4>
          <ul class="links">
            <li><a href="#">Free Designs</a></li>
            <li><a href="#">Latest Designs</a></li>
            <li><a href="#">Themes</a></li>
            <li><a href="#">Popular Designs</a></li>
            <li><a href="#">Art Skills</a></li>
            <li><a href="#">New Uploads</a></li>
          </ul>
        </div>

        <div class="footer-col">
          <h4>Legal</h4>
          <ul class="links">
            <li><a href="#">Customer Agreement</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">GDPR</a></li>
            <li><a href="#">Security</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Media Kit</a></li>
          </ul>
        </div>

        <div class="footer-col">
          <h4>Newsletter</h4>
          <p>
            Subscribe to our newsletter for a weekly dose
            of news, updates, helpful tips, and
            exclusive offers.
          </p>
          <form action="#">
            <input type="text" placeholder="Your email" required>
            <button type="submit">SUBSCRIBE</button>
          </form>
          <div class="icons">
            <i class="fa-brands fa-facebook-f"></i>
            <i class="fa-brands fa-twitter"></i>
            <i class="fa-brands fa-linkedin"></i>
            <i class="fa-brands fa-github"></i>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Next, add the following CSS codes to your style.css file to make your footer beautiful and responsive. You can experiment with different CSS properties like colors, fonts, and backgrounds to give a personalized touch to your footer. Now, if you load the web page in your browser, you can see your footer design.

/* 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;
}

.footer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 1280px;
  width: 95%;
  background: #10182F;
  border-radius: 6px;
}

.footer .footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3.5rem;
  padding: 60px;
}

.footer-row .footer-col h4 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
}

.footer-col .links {
  margin-top: 20px;
}

.footer-col .links li {
  list-style: none;
  margin-bottom: 10px;
}

.footer-col .links li a {
  text-decoration: none;
  color: #bfbfbf;
}

.footer-col .links li a:hover {
  color: #fff;
}

.footer-col p {
  margin: 20px 0;
  color: #bfbfbf;
  max-width: 300px;
}

.footer-col form {
  display: flex;
  gap: 5px;
}

.footer-col input {
  height: 40px;
  border-radius: 6px;
  background: none;
  width: 100%;
  outline: none;
  border: 1px solid #7489C6 ;
  caret-color: #fff;
  color: #fff;
  padding-left: 10px;
}

.footer-col input::placeholder {
  color: #ccc;
}

 .footer-col form button {
  background: #fff;
  outline: none;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: 0.2s ease;
}

.footer-col form button:hover {
  background: #cecccc;
}

.footer-col .icons {
  display: flex;
  margin-top: 30px;
  gap: 30px;
  cursor: pointer;
}

.footer-col .icons i {
  color: #afb6c7;
}

.footer-col .icons i:hover  {
  color: #fff;
}

@media (max-width: 768px) {
  .footer {
    position: relative;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    border-radius: 0;
  }

  .footer .footer-row {
    padding: 20px;
    gap: 1rem;
  }

  .footer-col form {
    display: block;
  }

  .footer-col form :where(input, button) {
    width: 100%;
  }

  .footer-col form button {
    margin: 10px 0 0 0;
  }
}

Conclusion and final words

In conclusion, as a beginner in web development, creating a stylish footer using HTML and CSS is a simple but rewarding web project. The skills you gained can be used to create various components of a website, such as login forms, navigation bars, home pages, and cards.

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

]]>
https://www.codingnepalweb.com/create-responsive-footer-html-css-only/feed/ 0
Create A Beautiful Responsive Website in HTML and CSS https://www.codingnepalweb.com/create-responsive-website-html-css/ https://www.codingnepalweb.com/create-responsive-website-html-css/#respond Sat, 09 Sep 2023 11:54:18 +0000 https://www.codingnepalweb.com/?p=5738 Create A Beautiful Responsive Website in HTML and CSS

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:

  1. First, create a folder with any name you like. Then, make the necessary files inside it.
  2. Create a file called index.html to serve as the main file.
  3. 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.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Website Homepage HTML and CSS | CodingNepal</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="header">
      <nav class="navbar">
        <h2 class="logo"><a href="#">CodingNepal</a></h2>
        <input type="checkbox" id="menu-toggle" />
        <label for="menu-toggle" id="hamburger-btn">
          <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
            <path d="M3 12h18M3 6h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </label>
        <ul class="links">
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
        <div class="buttons">
          <a href="#" class="signin">Sign In</a>
          <a href="#" class="signup">Sign Up</a>
        </div>
      </nav>
    </header>
    <section class="hero-section">
      <div class="hero">
        <h2>Mobile App Development</h2>
        <p>
          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.
        </p>
        <div class="buttons">
          <a href="#" class="join">Join Now</a>
          <a href="#" class="learn">Learn More</a>
        </div>
      </div>
      <div class="img">
        <img src="https://www.codingnepalweb.com/demos/create-responsive-website-html-css/hero-bg.png" alt="hero image" />
      </div>
    </section>
  </body>
</html>

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.

]]>
https://www.codingnepalweb.com/create-responsive-website-html-css/feed/ 0
Create Website with Login & Registration Form in HTML CSS and JavaScript https://www.codingnepalweb.com/create-website-login-registration-form-html/ https://www.codingnepalweb.com/create-website-login-registration-form-html/#respond Thu, 31 Aug 2023 18:33:30 +0000 https://www.codingnepalweb.com/?p=5729 Create Website with Login & Registration Form in HTML CSS and JavaScript

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:

  1. First, create a folder with any name you like. Then, make the necessary files inside it.
  2. Create a file called index.html to serve as the main file.
  3. Create a file called style.css to hold the CSS code.
  4. Create a file called script.js to hold the JavaScript code.
  5. 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.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website with Login and Registration Form | CodingNepal</title>
    <!-- Google Fonts Link For Icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <header>
        <nav class="navbar">
            <span class="hamburger-btn material-symbols-rounded">menu</span>
            <a href="#" class="logo">
                <img src="images/logo.jpg" alt="logo">
                <h2>CodingNepal</h2>
            </a>
            <ul class="links">
                <span class="close-btn material-symbols-rounded">close</span>
                <li><a href="#">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Courses</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
            <button class="login-btn">LOG IN</button>
        </nav>
    </header>

    <div class="blur-bg-overlay"></div>
    <div class="form-popup">
        <span class="close-btn material-symbols-rounded">close</span>
        <div class="form-box login">
            <div class="form-details">
                <h2>Welcome Back</h2>
                <p>Please log in using your personal information to stay connected with us.</p>
            </div>
            <div class="form-content">
                <h2>LOGIN</h2>
                <form action="#">
                    <div class="input-field">
                        <input type="text" required>
                        <label>Email</label>
                    </div>
                    <div class="input-field">
                        <input type="password" required>
                        <label>Password</label>
                    </div>
                    <a href="#" class="forgot-pass-link">Forgot password?</a>
                    <button type="submit">Log In</button>
                </form>
                <div class="bottom-link">
                    Don't have an account?
                    <a href="#" id="signup-link">Signup</a>
                </div>
            </div>
        </div>
        <div class="form-box signup">
            <div class="form-details">
                <h2>Create Account</h2>
                <p>To become a part of our community, please sign up using your personal information.</p>
            </div>
            <div class="form-content">
                <h2>SIGNUP</h2>
                <form action="#">
                    <div class="input-field">
                        <input type="text" required>
                        <label>Enter your email</label>
                    </div>
                    <div class="input-field">
                        <input type="password" required>
                        <label>Create password</label>
                    </div>
                    <div class="policy-text">
                        <input type="checkbox" id="policy">
                        <label for="policy">
                            I agree the
                            <a href="#" class="option">Terms & Conditions</a>
                        </label>
                    </div>
                    <button type="submit">Sign Up</button>
                </form>
                <div class="bottom-link">
                    Already have an account? 
                    <a href="#" id="login-link">Login</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

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.

]]>
https://www.codingnepalweb.com/create-website-login-registration-form-html/feed/ 0
How to Create An Amazon Clone in HTML and CSS https://www.codingnepalweb.com/create-amazon-website-clone-html-css/ https://www.codingnepalweb.com/create-amazon-website-clone-html-css/#respond Mon, 17 Jul 2023 16:13:41 +0000 https://www.codingnepalweb.com/?p=5673 How to Create An Amazon Clone in HTML and CSS

If you’re new to web development and excited to create your own website, why not start by creating an Amazon-inspired homepage? It’s a valuable project that allows you to practice your skills while making a familiar and engaging website.

In this blog post, I’ll guide you through the process of creating a simple yet impressive Amazon clone using only HTML and CSS. By recreating the main elements of the Amazon homepage, such as the navigation bar, search bar, hero section, cards, and footer, you’ll gain a solid understanding of how these components come together to create an attractive website.

Throughout the post, we’ll also explore different HTML tags and CSS properties that will help us efficiently create our Amazon-inspired homepage. To keep it beginner-friendly, we’ll use tags like nav, sections, divs, inputs, links, footer, and other commonly used tags.

Steps To Create an Amazon Clone in HTML and CSS

To create an Amazon-inspired Homepage Clone using only HTML and CSS, follow these step-by-step instructions:

  • 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. This folder includes the Amazon logo, hero background image, and shopping card images.

To start, add the following HTML codes to your index.html file: These codes include navigation (nav), sections, input fields, links, and various other tags necessary for your Amazon clone webpage.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Amazon Website Clone | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
</head>
<body>
    <header>
      <nav class="navbar">
        <div class="nav-logo">
          <a href="#"><img src="images/amazon_logo.png" alt="logo"></a>
        </div>
        <div class="address">
          <a href="#" class="deliver">Deliver</a>
          <div class="map-icon">
            <span class="material-symbols-outlined">location_on</span>
            <a href="#" class="location">Nepal</a>
          </div>
        </div>

        <div class="nav-search">
          <select class="select-search">
            <option>All</option>
            <option>All Categories</option>
            <option>Amazon Devices</option>
          </select>
          <input type="text" placeholder="Search Amazon" class="search-input">
          <div class="search-icon">
            <span class="material-symbols-outlined">search</span>
          </div>
        </div>

        <div class="sign-in">
         <a href="#"> <p>Hello, sign in</p>
          <span>Account &amp; Lists</span></a>
        </div>

        <div class="returns">
          <a href="#"><p>Returns</p>
            <span>&amp; Orders</span></a>
        </div>

        <div class="cart">
          <a href="#">
            <span class="material-symbols-outlined cart-icon">shopping_cart</span>
            </a>
            <p>Cart</p>
        </div>
      </nav>
      
      <div class="banner">
        <div class="banner-content">
          <div class="panel">
            <span class="material-symbols-outlined">menu</span>
            <a href="#">All</a>
          </div>
  
          <ul class="links">
            <li><a href="#">Today's Deals</a></li>
            <li><a href="#">Customer Service</a></li>
            <li><a href="#">Registry</a></li>
            <li><a href="#">Gift Cards</a></li>
            <li><a href="#">Sell</a></li>
          </ul>
          <div class="deals">
            <a href="#">Shop deals in Electronics</a>
          </div>
        </div>
      </div>
    </header>

    <section class="hero-section"></section>

    <section class="shop-section">
      <div class="shop-images">
        <div class="shop-link">
          <h3>Shop Laptops &amp; Tables</h3>
          <img src="images/img-1.png" alt="card">
          <a href="#">Shop now</a>
        </div>
        <div class="shop-link">
          <h3>Shop Smartwatches</h3>
          <img src="images/img-2.png" alt="card">
          <a href="#">Shop now</a>
        </div>
        <div class="shop-link">
          <h3>Create with Strip Lights</h3>
          <img src="images/img-3.png" alt="card">
          <a href="#">Shop now</a>
        </div>
        <div class="shop-link">
          <h3>Home Refresh Ideas</h3>
          <img src="images/img-4.png" alt="card">
          <a href="#">Shop now</a>
        </div>
      </div>
    </section>

    <footer>
      <a href="#" class="footer-title">
        Back to top
      </a>
      <div class="footer-items">
        <ul>
          <h3>Get to Know Us</h3>
          <li><a href="#">About us</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#">Press Release</a></li>
          <li><a href="#">Amazon Science</a></li>
        </ul>
        <ul>
          <h3>Connect with Us</h3>
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Instagram</a></li>
        </ul>
        <ul>
          <h3>Make Money with Us</h3>
          <li><a href="#">Sell on Amazon</a></li>
          <li><a href="#">Sell under Amazon Accelerator</a></li>
          <li><a href="#">Protect and Build Your Brand</a></li>
          <li><a href="#">Amazon Global Selling</a></li>
          <li><a href="#">Become an Affiliate</a></li>
          <li><a href="#">Fulfillment by Amazon</a></li>
          <li><a href="#">Advertise Your Products</a></li>
          <li><a href="#">Amazon Pay on Merchants</a></li>
        </ul>
        <ul>
          <h3>Let Us Help You</h3>
          <li><a href="#">COVID-19 and Amazon</a></li>
          <li><a href="#">Your Account</a></li>
          <li><a href="#">Return Centre</a></li>
          <li><a href="#">100% Purchase Protection</a></li>
          <li><a href="#">Amazon App Download</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </footer>

</body>
</html>

Next, add the following CSS codes to your style.css file to make your webpage look like Amazon’s homepage. These codes include various styles for elements like color, background, and border, and even the background image for the hero section.

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

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

html {
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: #fff;
}

a:hover {
  color: #ddd;
}

/* Header or Navbar */
header {
  width: 100%;
  background-color: #0f1111;
}

.navbar {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #fff;
  max-width: 1280px;
  margin: 0 auto;
}

.nav-logo img {
  margin-top: 10px;
  width: 128px;
}

.address .deliver {
  margin-left: 20px;
  font-size: 0.75rem;
  color: #ccc;
}

.address .map-icon {
  display: flex;
  align-items: center;
}


.nav-search {
  display: flex;
  justify-content: space-evenly;
  max-width: 620px;
  width: 100%;
  height: 40px;
  border-radius: 4px;
}

.select-search {
  background: #f3f3f3;
  width: 50px;
  text-align: center;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border: none;
}

.search-input {
  max-width: 600px;
  width: 100%;
  font-size: 1rem;
  border: none;
  outline: none;
  padding-left: 10px;
}

.search-icon {
  max-width: 45px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  background: #febd68;
  color: #000;
  cursor: pointer;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.sign-in p,
.returns p {
  font-size: 0.75rem;
}

.sign-in,
.returns span {
  font-size: 0.875rem;
  font-weight: 600;
}

.cart {
  display: flex;
}

.cart .cart-icon {
  font-size: 2.5rem
}

.cart p {
  margin-top: 20px;
  font-weight: 500;
}

.banner {
  padding: 10px 20px;
  background: #222f3d;
  color: #fff;
  font-size: 0.875rem;
}

.banner-content {
  margin: 0 auto;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel {
  max-width: 1280px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.panel span {
  margin-right: 7px;
}

.links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 15px;
  flex-grow: 1;
  margin-left: 15px;
}

.links a {
  padding: 10px 0;
}

.deals a {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Hero Section */
.hero-section {
  height: 400px;
  background-image: url("images/hero-img.jpg");
  background-position: center;
  background-size: cover;
}

/* Shop Section */
.shop-section {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #f3f3f3;
  padding: 50px 0;
}

.shop-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  max-width: 1280px;
  width: 100%;
}

.shop-link {
  background-color: #fff;
  padding: 30px;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  white-space: nowrap;
}


.shop-link img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  margin-bottom: 10px;
}

.shop-link h3 {
  margin-bottom: 10px;
}

.shop-link a {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.9rem;
  color: blue;
  font-weight: 500;
  transition: color 0.3s ease;
}

.shop-link:hover a {
  color: #c7511f;
  text-decoration: underline;
}

/* Footer */
.footer-title {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #37475a;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  height: 60px;
}

.footer-items {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  margin: 0 auto;
  background: #232f3e;
}

.footer-items h3 {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  margin: 20px 0 10px 0;
}

.footer-items ul {
  list-style: none;
  margin-bottom: 20px;
}

.footer-items li a {
  color: #ddd;
  font-size: 0.875rem;
}

.footer-items li a:hover {
  text-decoration: underline;
}

Conclusion and Final words

In conclusion, building an Amazon-inspired clone using HTML and CSS is a helpful project, especially for those new to web development. By following the steps outlined in this blog post, you have successfully created your own version of an Amazon homepage.

To continue improving your web development skills, I suggest you try recreating the responsive Fiverr homepage in HTML and CSS. This project will teach you how to use media queries to create a responsive layout for the website.

If you encounter any problems while creating your Amazon-inspired Homepage, you can download the source code files for this project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

]]>
https://www.codingnepalweb.com/create-amazon-website-clone-html-css/feed/ 0
Make a Simple Responsive Website in HTML and CSS https://www.codingnepalweb.com/make-simple-responsive-website-html-css/ https://www.codingnepalweb.com/make-simple-responsive-website-html-css/#respond Sat, 17 Jun 2023 16:16:33 +0000 https://www.codingnepalweb.com/?p=5594 Make a Simple Responsive Website in HTML and CSS

In the process of acquiring knowledge in web development, one of the crucial skills for learners is the ability to build both simple and complex websites. A strong skill for learners is the capability to create a website using only HTML and CSS, without relying on frameworks like Bootstrap.

A website is a collection of digital resources, such as web pages and related stuff. It is a digital platform with interactive features, multimedia, and text that is designed to provide users with a variety of information, services, or resources.

In this blog post, you will discover how to design a contemporary and visually appealing website using HTML and CSS. The website will feature a logo, a navigation bar, a sidebar menu, and a curved design at the bottom. Additionally, it will be responsive, ensuring it adapts well to different devices and screen sizes.

The video tutorial and demo of the website provided below aim to guide you through the process of creating a straightforward, responsive website using HTML and CSS. Each step will be clearly demonstrated, allowing you to follow along and learn effectively.

Simple Responsive Website in HTML and CSS

As you have seen the process of building a basic, responsive website with a curved pattern at the bottom using HTML and CSS. Furthermore, this website is fully responsive.

I strongly recommend watching the complete video tutorial to learn how to visually create this website design step by step. However, if you prefer not to watch the tutorial, you can proceed with reading the blog for instructions on creating the website independently.

Steps To Create Website in HTML and CSS

To create this simple responsive website in HTML and CSS, follow these step-by-step instructions:

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

To start, add the following HTML codes to your index.html file: The provided code segment consists of a website header and an unordered list (ul) for website navigation. It also includes a hamburger button that allows toggling of the website’s sidebar in the mobile version and images.

<!DOCTYPE html>
<!-- Coding by CodingNepal || www.codingnepalweb.com -->
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Responsive Website in HTML CSS</title>
    <link rel="stylesheet" href="style.css" />
    <script src="../custom-scripts.js" defer></script>
  </head>
  <body>
    <main>
      <!-- Header Start -->
      <header>
        <nav class="nav container">
          <h2 class="nav_logo"><a href="#">CodingNepal</a></h2>

          <ul class="menu_items">
            <img src="images/times.svg" alt="timesicon" id="menu_toggle" />
            <li><a href="#" class="nav_link">Home</a></li>
            <li><a href="#" class="nav_link">About</a></li>
            <li><a href="#" class="nav_link">Service</a></li>
            <li><a href="#" class="nav_link">Project</a></li>
            <li><a href="#" class="nav_link">Contact</a></li>
          </ul>
          <img src="images/bars.svg" alt="timesicon" id="menu_toggle" />
        </nav>
      </header>
      <!-- Header End -->

      <!-- Hero Start -->
      <section class="hero">
        <div class="row container">
          <div class="column">
            <h2>Top free tool and extension to <br />radiply grow you business</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis, architecto? Consectetur enim obcaecati velit quibusdam iure, perspiciatis accusantium, voluptatibus possimus cum voluptates dolorum optio ab vitae. Praesentium voluptas quia voluptates at aperiam aliquid vitae autem!</p>
            <div class="buttons">
              <button class="btn">Read More</button>
              <button class="btn">Contact Us</button>
            </div>
          </div>
          <div class="column">
            <img src="images/hero.png" alt="heroImg" class="hero_img" />
          </div>
        </div>
        <img src="images/bg-bottom-hero.png" alt="" class="curveImg" />
      </section>
      <!-- Hero End-->
    </main>

    <script>
      const header = document.querySelector("header");
      const menuToggler = document.querySelectorAll("#menu_toggle");

      menuToggler.forEach(toggler => {
        toggler.addEventListener("click", () => header.classList.toggle("showMenu"));
      });
    </script>
  </body>
</html>

Next, add the following CSS codes to your style.css file to apply visual styling to your website. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties.

/* 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;
}
main {
  background: #6610f2;
}
.container {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
}
.nav_logo {
  padding: 10px 0;
}
.menu_items {
  display: flex;
  list-style: none;
  gap: 20px;
}
a {
  color: #fff;
  text-decoration: none;
}

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: url(images/bg-dot.png), url(images/bg-dot.png), url(images/bg-round.png), url(images/bg-tree.png);
  background-position: 10px 10px, bottom 215px right 10px, left 55% top -1%, left 45% bottom -1px;
  background-repeat: no-repeat;
}
.curveImg {
  position: absolute;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}
.hero .row {
  display: flex;
  align-items: center;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  padding: 0 60px;
  gap: 30px;
  justify-content: space-between;
}
.hero .row h2,
.hero .row p {
  color: #fff;
}
.hero .row h2 {
  font-size: 36px;
  margin-bottom: 16px;
}
.hero .column {
  width: 50%;
}
.buttons {
  display: flex;
  margin-top: 25px;
  gap: 10px;
}
.btn {
  padding: 14px 26px;
  background: #fff;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn:last-child {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
}
.btn:last-child:hover {
  background-color: #fff;
  color: #333;
}
.hero_img {
  width: 100%;
  z-index: 10;
  position: relative;
}
#menu_toggle {
  display: none;
}

/* Reponsive */
@media (width < 860px) {
  #menu_toggle {
    display: block;
  }
  .nav {
    padding: 0 20px;
    background-color: #fff;
  }

  .menu_items {
    position: fixed;
    top: 0;
    width: 260px;
    background-color: #fff;
    height: 100%;
    left: -100%;
    padding: 50px 30px 30px;
    flex-direction: column;
    transition: all 0.5s ease;
  }
  .showMenu .menu_items {
    left: 0;
  }
  a {
    color: #333;
  }
  #menu_toggle {
    width: 20px;
    cursor: pointer;
  }
  .menu_items #menu_toggle {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .hero {
    padding-top: 130px;
  }
  .hero .row {
    flex-direction: column;
    padding: 0 20px;
    justify-content: center;
  }
  .hero .row .column {
    width: 100%;
  }
}

@media (width < 600px) {
  .hero {
    padding-top: 80px;
  }
  .hero .row h2 {
    font-size: 26px;
  }
  .buttons {
    justify-content: center;
  }
  .btn {
    padding: 10px 16px;
  }
}

 

Conclusion and Final Words

In conclusion, creating a responsive website with a modern feel allows you to apply your skills to a real-world website. I hope that by following the steps in this post, you’ve successfully created your own website using HTML and CSS.

To further improve your web development skills, you can try to create our 10+ website templates that are created using HTML, CSS, and JavaScript. This project helps you expand your knowledge.

If you encounter any difficulties while creating your own Website or if your code is not working as expected, you can download the source code files for this website for free by clicking the Download button.

]]>
https://www.codingnepalweb.com/make-simple-responsive-website-html-css/feed/ 0
Create A Responsive Custom Website using HTML and CSS https://www.codingnepalweb.com/create-responsive-custom-website-html-css/ https://www.codingnepalweb.com/create-responsive-custom-website-html-css/#respond Tue, 30 May 2023 07:51:26 +0000 https://www.codingnepalweb.com/?p=5515 Create A Responsive Custom Website using HTML and CSS

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.

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:

  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. 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.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camping Gear Website | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome Link for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
  </head>
  <body>
    <header>
      <nav class="navbar">
        <h2 class="logo"><a href="#">LOGO</a></h2>
        <input type="checkbox" id="menu-toggler">
        <label for="menu-toggler" id="hamburger-btn">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px">
            <path d="M0 0h24v24H0z" fill="none"/>
            <path d="M3 18h18v-2H3v2zm0-5h18V11H3v2zm0-7v2h18V6H3z"/>
          </svg>
        </label>
        <ul class="all-links">
          <li><a href="#home">Home</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#about">About Us</a></li>
          <li><a href="#contact">Contact Us</a></li>
        </ul>
      </nav>
    </header>

    <section class="homepage" id="home">
      <div class="content">
        <div class="text">
          <h1>Camping Gear and Essentials</h1>
          <p>
            Discover top-quality camping gear for unforgettable outdoor adventures. <br> Gear up and make lasting memories.</p>
        </div>
        <a href="#services">Our Services</a>
      </div>
    </section>

    <section class="services" id="services">
      <h2>Our Services</h2>
      <p>Explore our wide range of camping gear services.</p>
      <ul class="cards">
        <li class="card">
          <img src="images/tents.jpg" alt="img">
          <h3>Tents</h3>
          <p>Experience comfort and protection with our high-quality camping tents.</p>
        </li>
        <li class="card">
          <img src="images/bags.jpg" alt="img">
          <h3>Sleeping Bags</h3>
          <p>Stay cozy and warm during your camping trips with our premium sleeping bags.</p>
        </li>
        <li class="card">
          <img src="images/stoves.jpg" alt="img">
          <h3>Camp Stoves</h3>
          <p>Cook delicious meals in the great outdoors with our reliable camp stoves.</p>
        </li>
        <li class="card">
          <img src="images/backpacks.jpg" alt="img">
          <h3>Backpacks</h3>
          <p>Carry your essentials comfortably with our durable and functional camping backpacks.</p>
        </li>
        <li class="card">
          <img src="images/chair.jpg" alt="img">
          <h3>Camp Chairs</h3>
          <p>Relax and unwind in style with our comfortable and portable camping chairs.</p>
        </li>
        <li class="card">
          <img src="images/light.jpg" alt="img">
          <h3>Camp Lights</h3>
          <p>Illuminate your campsite with our reliable and energy-efficient camping lights.</p>
        </li>
      </ul>
    </section>

    <section class="portfolio" id="portfolio">
      <h2>Our Portfolio</h2>
      <p>Take a look at some of our memorable camping adventures.</p>
      <ul class="cards">
        <li class="card">
          <img src="images/camping-1.jpg" alt="img">
          <h3>Mountain Hiking</h3>
          <p>Embark on an exhilarating hiking adventure in the breathtaking mountain ranges.</p>
        </li>
        <li class="card">
          <img src="images/camping-2.jpg" alt="img">
          <h3>Lakeside Camping</h3>
          <p>Enjoy a tranquil camping experience by the serene shores of picturesque lakes.</p>
        </li>
        <li class="card">
          <img src="images/camping-3.jpg" alt="img">
          <h3>Beach Camping</h3>
          <p>Escape to sandy beaches and camp under the starry sky by the crashing waves.</p>
        </li>
        <li class="card">
          <img src="images/camping-4.jpg" alt="img">
          <h3>Forest Exploration</h3>
          <p>Discover the wonders of lush forests and immerse yourself in nature's beauty.</p>
        </li>
        <li class="card">
          <img src="images/camping-5.jpg" alt="img">
          <h3>RV Camping</h3>
          <p>Experience the freedom of road trips and camping adventures with our RV rentals.</p>
        </li>
        <li class="card">
          <img src="images/camping-6.jpg" alt="img">
          <h3>Desert Camping</h3>
          <p>Embark on a unique desert camping experience and witness stunning landscapes.</p>
        </li>
      </ul>
    </section>

    <section class="about" id="about">
      <h2>About Us</h2>
      <p>Discover our story in providing camping services.</p>
      <div class="row company-info">
        <h3>Our Story</h3>
        <p>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.</p>
      </div>
      <div class="row mission-vision">
        <h3>Our Mission</h3>
        <p>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.</p>
        <h3>Our Vision</h3>
        <p>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.</p>
      </div>
      <div class="row team">
        <h3>Our Team</h3>
        <ul>
          <li>John Doe - Founder and CEO</li>
          <li>Jane Smith - Gear Specialist</li>
          <li>Mark Johnson - Customer Representative</li>
          <li>Sarah Brown - Operations Manager</li>
        </ul>
      </div>
    </section>

    <section class="contact" id="contact">
      <h2>Contact Us</h2>
      <p>Reach out to us for any inquiries or feedback.</p>
      <div class="row">
        <div class="col information">
          <div class="contact-details">
            <p><i class="fas fa-map-marker-alt"></i> 123 Campsite Avenue, Wilderness, CA 98765</p>
            <p><i class="fas fa-envelope"></i> info@campinggearexperts.com</p>
            <p><i class="fas fa-phone"></i> (123) 456-7890</p>
            <p><i class="fas fa-clock"></i> Monday - Friday: 9:00 AM - 5:00 PM</p>
            <p><i class="fas fa-clock"></i> Saturday: 10:00 AM - 3:00 PM</p>
            <p><i class="fas fa-clock"></i> Sunday: Closed</p>
            <p><i class="fas fa-globe"></i> www.codingnepalweb.com</p>
          </div>          
        </div>
        <div class="col form">
          <form>
            <input type="text" placeholder="Name*" required>
            <input type="email" placeholder="Email*" required>
            <textarea placeholder="Message*" required></textarea>
            <button id="submit" type="submit">Send Message</button>
          </form>
        </div>
      </div>
    </section>

    <footer>
      <div>
        <span>Copyright © 2023 All Rights Reserved</span>
        <span class="link">
            <a href="#">Home</a>
            <a href="#contact">Contact</a>
        </span>
      </div>
    </footer>

  </body>
</html>

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.

]]>
https://www.codingnepalweb.com/create-responsive-custom-website-html-css/feed/ 0
Create Sidebar Menu in HTML CSS & JavaScript https://www.codingnepalweb.com/sidebar-menu-html-css-javascript/ https://www.codingnepalweb.com/sidebar-menu-html-css-javascript/#respond Fri, 28 Apr 2023 06:57:16 +0000 https://www.codingnepalweb.com/?p=4108 Create Sidebar Menu in HTML CSS & JavaScript

Developing proficiency in creating a sidebar menu with a dropdown is a valuable skill in the domain of web development. Although the sidebar is a fundamental component of a website, it can be created using a concise combination of HTML, CSS, and JavaScript.

Today in this blog post, you will be taught how to build a Sidebar Menu using HTML, CSS, and JavaScript, which will include the functionality of dropdown menus. I have also published a blog featuring 5 Free Sidebar Templates. I trust that they will also prove advantageous to you.

Video Tutorial of Sidebar Menu in HTML CSS & JavaScript

 

As demonstrated in the video tutorial of the Sidebar Menu, it has the ability to expand and collapse, and it includes a submenu feature that becomes visible upon clicking on the navigation link. The sidebar has the potential to accommodate numerous navigation links since it is scrollable.

I would highly recommend you watch the video tutorial of the Sidebar Menu. It will really help you to create this sidebar menu step by step as well as to understand HTML CSS & JavaScript code.

Steps for Creating a Sidebar Menu in HTML CSS & JavaScript

To create a sidebar using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

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

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 all the source code files of the Sidebar Menu, by clicking on the given download button.

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

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sidebar Menu for Admin Dashboard | CodingNepal</title>
    <link rel="stylesheet" href="style.css" />
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
  </head>
  <body>
    <nav class="sidebar">
      <a href="#" class="logo">CodingLab</a>

      <div class="menu-content">
        <ul class="menu-items">
          <div class="menu-title">Your menu title</div>

          <li class="item">
            <a href="#">Your first link</a>
          </li>

          <li class="item">
            <div class="submenu-item">
              <span>First submenu</span>
              <i class="fa-solid fa-chevron-right"></i>
            </div>

            <ul class="menu-items submenu">
              <div class="menu-title">
                <i class="fa-solid fa-chevron-left"></i>
                Your submenu title
              </div>
              <li class="item">
                <a href="#">First sublink</a>
              </li>
              <li class="item">
                <a href="#">First sublink</a>
              </li>
              <li class="item">
                <a href="#">First sublink</a>
              </li>
            </ul>
          </li>
          <li class="item">
            <div class="submenu-item">
              <span>Second submenu</span>
              <i class="fa-solid fa-chevron-right"></i>
            </div>

            <ul class="menu-items submenu">
              <div class="menu-title">
                <i class="fa-solid fa-chevron-left"></i>
                Your submenu title
              </div>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
              <li class="item">
                <a href="#">Second sublink</a>
              </li>
            </ul>
          </li>

          <li class="item">
            <a href="#">Your second link</a>
          </li>

          <li class="item">
            <a href="#">Your third link</a>
          </li>
        </ul>
      </div>
    </nav>

    <nav class="navbar">
      <i class="fa-solid fa-bars" id="sidebar-close"></i>
    </nav>

    <main class="main">
      <h1>Admin Dashboard Content</h1>
    </main>

    <script src="script.js"></script>
  </body>
</html>

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

/* 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;
}
.sidebar {
  position: fixed;
  height: 100%;
  width: 260px;
  background: #11101d;
  padding: 15px;
  z-index: 99;
}
.logo {
  font-size: 25px;
  padding: 0 15px;
}
.sidebar a {
  color: #fff;
  text-decoration: none;
}
.menu-content {
  position: relative;
  height: 100%;
  width: 100%;
  margin-top: 40px;
  overflow-y: scroll;
}
.menu-content::-webkit-scrollbar {
  display: none;
}
.menu-items {
  height: 100%;
  width: 100%;
  list-style: none;
  transition: all 0.4s ease;
}
.submenu-active .menu-items {
  transform: translateX(-56%);
}
.menu-title {
  color: #fff;
  font-size: 14px;
  padding: 15px 20px;
}
.item a,
.submenu-item {
  padding: 16px;
  display: inline-block;
  width: 100%;
  border-radius: 12px;
}
.item i {
  font-size: 12px;
}
.item a:hover,
.submenu-item:hover,
.submenu .menu-title:hover {
  background: rgba(255, 255, 255, 0.1);
}
.submenu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  cursor: pointer;
}
.submenu {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: calc(-100% - 26px);
  height: calc(100% + 100vh);
  background: #11101d;
  display: none;
}
.show-submenu ~ .submenu {
  display: block;
}
.submenu .menu-title {
  border-radius: 12px;
  cursor: pointer;
}
.submenu .menu-title i {
  margin-right: 10px;
}
.navbar,
.main {
  left: 260px;
  width: calc(100% - 260px);
  transition: all 0.5s ease;
  z-index: 1000;
}
.sidebar.close ~ .navbar,
.sidebar.close ~ .main {
  left: 0;
  width: 100%;
}
.navbar {
  position: fixed;
  color: #fff;
  padding: 15px 20px;
  font-size: 25px;
  background: #4070f4;
  cursor: pointer;
}
.navbar #sidebar-close {
  cursor: pointer;
}
.main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  z-index: 100;
  background: #e7f2fd;
}
.main h1 {
  color: #11101d;
  font-size: 40px;
  text-align: center;
}

Third, paste the following codes into your script.js file.

const sidebar = document.querySelector(".sidebar");
const sidebarClose = document.querySelector("#sidebar-close");
const menu = document.querySelector(".menu-content");
const menuItems = document.querySelectorAll(".submenu-item");
const subMenuTitles = document.querySelectorAll(".submenu .menu-title");

sidebarClose.addEventListener("click", () => sidebar.classList.toggle("close"));

menuItems.forEach((item, index) => {
  item.addEventListener("click", () => {
    menu.classList.add("submenu-active");
    item.classList.add("show-submenu");
    menuItems.forEach((item2, index2) => {
      if (index !== index2) {
        item2.classList.remove("show-submenu");
      }
    });
  });
});

subMenuTitles.forEach((title) => {
  title.addEventListener("click", () => {
    menu.classList.remove("submenu-active");
  });
});

If you face any difficulties while creating your 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 on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

 

]]>
https://www.codingnepalweb.com/sidebar-menu-html-css-javascript/feed/ 0
10+ Website Templates Design in HTML CSS and JavaScript https://www.codingnepalweb.com/free-website-templates-designs-source-code/ https://www.codingnepalweb.com/free-website-templates-designs-source-code/#respond Tue, 13 Dec 2022 21:11:21 +0000 https://www.codingnepalweb.com/?p=4131 Top 10 Website Templates Design in HTML CSS & JavaScript

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 

Simple Website in HTML and 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

Simple Portfolio Website 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

Glassmorhism Website 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

Portfolio Website 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

Coming Soon Website in HTML CSS & JavaScript

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

Website 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.

8. Complete Website Design in HTML CSS & JavaScript

Coffee Website 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

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

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

Responsive Personal Portfolio Website in HTML CSS and 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.

12. Responsive Custom Website in HTML & CSS

Create A Responsive Custom Website using HTML and 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.

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!!

]]>
https://www.codingnepalweb.com/free-website-templates-designs-source-code/feed/ 0