Join Now

Create a Responsive Landing Page Using Html, Css and JavaScript

  • By CodingManish
  • Create a Responsive Landing Page Using Html, Css and JavaScript

    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, CSS and Javascript.

    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.

  • Video Tutorial of Responsive Landing Page
  • Steps For Creating Custom Website in HTML, CSS and Javascript

    • Create a Folder: Name the folder anything you like. For example, let's name it "landing_website".

    • Inside the Folder, Create Files:

      • index.html: This will serve as the main HTML file.
      • style.css: This file will contain your CSS code.
      • script.js: This file will contain your JavaScript code.

    HTML Structure (index.html):
      
       
         
          
       
     <!DOCTYPE html>
     <html lang="en">
       <!-- CodingManish -->
       <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>Responsive Landing Page using HTML, CSS & Javascript</title>
         <link rel="stylesheet" href="style.css" />
         <link
           href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
           rel="stylesheet"
         />
         <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
       </head>
       <body>
         <!-- ==== HEADER ==== -->
         <header class="container header">
           <!-- ==== NAVBAR ==== -->
           <nav class="nav">
             <div class="logo">
               <h2>CODEWITHMANISH.</h2>
             </div>
     
             <div class="nav_menu" id="nav_menu">
               <button class="close_btn" id="close_btn">
                 <i class="ri-close-fill"></i>
               </button>
     
               <ul class="nav_menu_list">
                 <li class="nav_menu_item">
                   <a href="#" class="nav_menu_link">account</a>
                 </li>
                 <li class="nav_menu_item">
                   <a href="#" class="nav_menu_link">about</a>
                 </li>
                 <li class="nav_menu_item">
                   <a href="#" class="nav_menu_link">service</a>
                 </li>
                 <li class="nav_menu_item">
                   <a href="#" class="nav_menu_link">contact</a>
                 </li>
               </ul>
             </div>
     
             <button class="toggle_btn" id="toggle_btn">
               <i class="ri-menu-line"></i>
             </button>
           </nav>
         </header>
     
         <section class="wrapper">
           <div class="container">
             <div class="grid-cols-2">
               <div class="grid-item-1">
                  <h1 class="main-heading">
                   Welcome to <span>CodeWithManish.</span>
                   <br />
                  
                 <h3 class="main-heading" > I'm
                     <span class="multi-text"></span>
                     <span class="blink"></span>
                   </h3>
                 </h1>
                 <p class="info-text">
                   Build a beautiful, modern website with flexible components built
                   from scratch.
                 </p>
     
                 <div class="btn_wrapper">
                   <button class="btn view_more_btn">
                     view all pages <i class="ri-arrow-right-line"></i>
                   </button>
     
                   <button class="btn documentation_btn">documentation</button>
                 </div>
               </div>
               <div class="grid-item-2">
                 <div class="team_img_wrapper">
                   <img src="—Pngtree—hacker programming flat clipart illustration_5388978.png" alt="team-img" />
                 </div>
               </div>
             </div>
           </div>
         </section>
     
         <section class="wrapper">
           <div class="container" data-aos="fade-up" data-aos-duration="1000">
             <div class="grid-cols-3">
               <div class="grid-col-item">
                 <div class="icon">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                   >
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                     />
                   </svg>
                 </div>
                 <div class="featured_info">
                   <span>Built for developers </span>
                   <p>
                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                     ratione facilis animi voluptas exercitationem molestiae.
                   </p>
                 </div>
               </div>
               <div class="grid-col-item">
                 <div class="icon">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                   >
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"
                     />
                   </svg>
                 </div>
                 <div class="featured_info">
                   <span>Designed to be modern</span>
                   <p>
                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
                     ipsum esse corrupti. Quo, labore debitis!
                   </p>
                 </div>
               </div>
     
               <div class="grid-col-item">
                 <div class="icon">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                   >
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
                     />
                   </svg>
                 </div>
                 <div class="featured_info">
                   <span>Documentation for everything</span>
                   <p>
                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Non
                     nostrum voluptate totam ipsa corrupti vero!
                   </p>
                 </div>
               </div>
             </div>
           </div>
         </section>
     
         <footer>
           
         </footer>
     
      
         <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
      
         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
       
         <script src="script.js" defer></script>
       </body>
     </html>   
        
    
        
      
      
      
    CSS Styling (style.css):
        
      
        
      
    
    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Inter", sans-serif;
    }
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    
    
    :root {
      --fixed-header-height: 4.5rem;
    }
    
    
    body {
      width: 100%;
      height: 100vh;
      overflow-x: hidden;
      background-color: #39696941;
    }
    ul li {
      list-style-type: none;
    }
    a {
      text-decoration: none;
    }
    button {
      background-color: transparent;
      border: none;
      outline: none;
      cursor: pointer;
    }
    
    .container {
      width: 100%;
    }
    @media screen and (min-width: 1040px) {
      .container {
        width: 1040px;
        margin: 0 auto;
      }
    }
    /* ==== HEADER ==== */
    .header {
      height: var(--fixed-header-height);
      padding: 0 1.7rem;
    }
    
    /* ==== NAV ==== */
    .nav {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    /* ==== LOGO ==== */
    .logo h2 {
      font-size: 30px;
      color: #31484b;
    }
    /* ====  NAV-MENU  ==== */
    .nav_menu_list {
      display: flex;
      align-items: center;
    }
    .nav_menu_list .nav_menu_item {
      margin: 0 2rem;
    }
    .nav_menu_item .nav_menu_link {
      font-size: 18.5px;
      line-height: 27px;
      color: rgb(56, 88, 94);
      text-transform: capitalize;
      letter-spacing: 0.5px;
    }
    .nav_menu_link:hover {
      color: rgb(21, 255, 0);
    }
    .toggle_btn {
      font-size: 20px;
      font-weight: 600;
      color: var(--lg-heading);
      z-index: 4;
    }
    .nav_menu,
    .close_btn {
      display: none;
    }
    .show {
      right: 3% !important;
    }
    /* ====  WRAPPER ==== */
    .wrapper {
      width: 100%;
      padding-left: 1.7rem;
      padding-right: 1.7rem;
      padding-top: 5rem;
      margin-bottom: 5rem;
    }
    .grid-cols-2 {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4rem;
    }
    .grid-item-1 {
      padding-top: 5rem;
      padding-left: 1.5rem;
    }
    .main-heading {
      font-weight: 600;
      font-size: 50px;
      line-height: 55px;
      color: rgba(3, 3, 3, 0.74);
    }
    .main-heading span {
      color: rgb(88, 182, 166);
      font-weight: 800;
      font-size: 40px;
    }
    .info-text {
      margin-top: 1.5rem;
      font-size: 19px;
      line-height: 28px;
      color: #334157;
    }
    .btn_wrapper {
      margin-top: 3.5rem;
      display: flex;
      width: 100%;
    }
    .btn {
      width: 110px;
      height: 50px;
      background-color: rgba(50, 72, 78, 0.986);
      display: block;
      font-size: 16px;
      color: #fff;
      text-transform: capitalize;
      border-radius: 7px;
      letter-spacing: 1px;
      transition: 0.4s;
    }
    .btn:hover {
      transform: translateY(-3px);
      background-color: rgba(255, 0, 0, 0.432);
    }
    .view_more_btn {
      width: 180px;
      height: 55px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      letter-spacing: 0;
      color: #fff;
      font-weight: 500;
      margin-right: 10px;
      box-shadow: 0 0.5rem 1.5rem rgba(22, 28, 45, 0.1);
    }
    .view_more_btn i {
      margin-left: 0.7rem;
    }
    .view_more_btn:hover {
      transition: box-shadow 0.25s ease, transform 0.25s ease;
    }
    .documentation_btn {
      width: 150px;
      height: 55px;
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      letter-spacing: 0;
      background-color: #e1e7fc;
      color: #0e2a86;
      box-shadow: 0 0.5rem 1.5rem rgba(22, 28, 45, 0.1);
    }
    .documentation_btn:hover {
      background-color: #d7ddf1;
      transition: box-shadow 0.25s ease, transform 0.25s ease;
    }
    .grid-item-2 {
      width: 100%;
      height: 100%;
    }
    .team_img_wrapper {
      width: 500px;
      max-width: 100%;
      height: 440px;
    }
    .team_img_wrapper img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .grid-cols-3 {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 3rem;
      row-gap: 2rem;
      padding: 1rem;
    }
    .grid-col-item {
      height: 100%;
    }
    .icon {
      width: 100%;
      line-height: 40px;
    }
    .icon svg {
      width: 30px;
      height: 30px;
      color: #6b85d8;
    }
    .featured_info {
      width: 100%;
    }
    .featured_info span {
      width: 100%;
      display: block;
      font-size: 21px;
      line-height: 33px;
      color: rgb(0, 0, 0);
    }
    .featured_info p {
      display: block;
      width: 100%;
      margin-top: 7px;
      font-weight: 400;
      color: #334157;
      line-height: 25px;
      font-size: 15.5px;
    }
    footer {
      width: 100%;
      background-color: var(--primary-color);
      height: 12px;
      margin-top: 8rem;
    }
    
    /* ==== MEDIA QURIES FOR RESPONSIVE DESIGN ==== */
    @media screen and (min-width: 768px) {
      .toggle_btn {
        display: none;
      }
      .nav_menu {
        display: block;
      }
    }
    
    @media screen and (max-width: 768px) {
      .logo h2 {
        font-size: 23px;
      }
      .nav_menu {
        position: fixed;
        width: 93%;
        height: 100%;
        display: block;
        top: 2.5%;
        right: -100%;
        background-color: #fff;
        padding: 3rem;
        border-radius: 10px;
        box-shadow: 0 0.5rem 1.5rem rgba(22, 28, 45, 0.1);
        z-index: 50;
        transition: 0.4s;
      }
      .nav_menu_list {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 4rem;
      }
      .nav_menu_list .nav_menu_item {
        margin: 1rem 0;
      }
      .nav_menu_item .nav_menu_link {
        font-size: 18px;
      }
      .close_btn {
        display: block;
        position: absolute;
        right: 10%;
        font-size: 25px;
        color: #50689e;
      }
      .close_btn:hover {
        color: #000;
      }
      .wrapper {
        padding: 0 0.7rem;
      }
      .grid-item-1 {
        padding-left: 0rem;
      }
      .main-heading {
        font-size: 35px;
      }
      .view_more_btn {
        width: 140px;
        height: 55px;
        font-size: 13.5px;
        margin-right: 1rem;
      }
      .grid-cols-3 {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
      }
      .featured_info p {
        line-height: 23px;
        font-size: 14px;
      }
    }
    
    @media screen and (max-width: 991px) {
      .wrapper {
        padding-top: 3rem;
      }
      .grid-cols-2 {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
      }
      .grid-item-1 {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 0;
      }
      .main-heading {
        font-size: 32px;
        text-align: center;
        line-height: 40px;
      }
      .info-text {
        font-size: 16px;
        text-align: center;
        padding: 0.7rem;
      }
      .btn_wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .grid-item-2 {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .team_img_wrapper {
        width: 350px;
        height: 350px;
      }
      .featured_info span {
        font-size: 19px;
      }
    }
    
      
    
    
    
      
      
    JavaScript (script.js):
      
        
             
    const navId = document.getElementById("nav_menu"),
    ToggleBtnId = document.getElementById("toggle_btn"),
    CloseBtnId = document.getElementById("close_btn");
    
    ToggleBtnId.addEventListener("click", () => {
    navId.classList.add("show");
    });
    
    
    CloseBtnId.addEventListener("click", () => {
    navId.classList.remove("show");
    });
    
    
    AOS.init();
    
    
    gsap.from(".logo", {
    opacity: 0,
    y: -10,
    delay: 1,
    duration: 0.5,
    });
    
    gsap.from(".nav_menu_list .nav_menu_item", {
    opacity: 0,
    y: -10,
    delay: 1.4,
    duration: 0.5,
    stagger: 0.3,
    });
    
    gsap.from(".toggle_btn", {
    opacity: 0,
    y: -10,
    delay: 1.4,
    duration: 0.5,
    });
    
    gsap.from(".main-heading", {
    opacity: 0,
    y: 20,
    delay: 2.4,
    duration: 1,
    });
    
    gsap.from(".info-text", {
    opacity: 0,
    y: 20,
    delay: 2.8,
    duration: 1,
    });
    
    gsap.from(".btn_wrapper", {
    opacity: 0,
    y: 20,
    delay: 2.8,
    duration: 1,
    });
    
    gsap.from(".team_img_wrapper img", {
    opacity: 0,
    y: 20,
    delay: 3,
    duration: 1,
    });
    
    
    
    
    // typing animation
    
    document.addEventListener("DOMContentLoaded", function () {
      const options = {
        strings: ['YOUTUBER', 'DEVELOPER', 'PROGRAMMER', 'UI DEVELOPER' ],
        typeSpeed: 150,
        backSpeed: 50,
        backDelay: 1000,
        loop: true
      };
    
      const multiTextElement = document.querySelector('.multi-text');
      let currentTextIndex = 0;
      let currentText = '';
      let isDeleting = false;
    
      function type() {
        const fullText = options.strings[currentTextIndex];
        if (isDeleting) {
          currentText = fullText.substring(0, currentText.length - 1);
        } else {
          currentText = fullText.substring(0, currentText.length + 1);
        }
    
        multiTextElement.textContent = currentText;
    
        let typeSpeed = options.typeSpeed;
        if (isDeleting) {
          typeSpeed /= 2; // Faster when deleting
        }
    
        if (!isDeleting && currentText === fullText) {
          typeSpeed = options.backDelay;
          isDeleting = true;
        } else if (isDeleting && currentText === '') {
          isDeleting = false;
          currentTextIndex = (currentTextIndex + 1) % options.strings.length;
        }
    
        setTimeout(type, typeSpeed);
      }
    
      type();
    });
    
    
        
        

    Download the source code files for this project for free by clicking the Download button.

    Total projects



    Related Projects


  •   Pepsi Landing Page Using Html Css Javascript
    9 mins read

    Pepsi Landing Page Using Html Css Javascript

    codingmanish

    1 Nov 2023

    Read more


  • ...

    your source for awesome coding projects! Let's dive into the world of code together! 🚀