Join Now

Responsive Animation Website using Html, Css and Js

  • By CodingManish
  • Responsive Animation Website using Html, Css and Js

    Welcome to the exciting world of web development! As you journey through the realm of coding, one of the essential skills you'll need to acquire is the ability to build websites from scratch using only the foundational trio of HTML, CSS, and JavaScript.

    While frameworks like Bootstrap can be helpful, mastering the fundamentals empowers you to create both simple and complex websites with confidence and creativity.

  • Video Tutorial of Responsive Animation Website
  • In this blog post, we'll guide you through the process of creating a website using only HTML, CSS, and JavaScript. Together, we'll explore how to build both simple and complex web pages, from basic layouts to interactive features.

    By the end of this tutorial, you'll have the skills and confidence to embark on your own web development projects without relying on external frameworks.

    HTML Structure (index.html):
      
       
        
        <!DOCTYPE html>
        <html lang="en">
          <head>
           <!-- made by codewithmanish -->
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
          <link rel="stylesheet" href="style.css">
            <title>Responsive Landing Page HTML CSS JS</title>
          </head>
          <body>
        
            <div class="overlay first"></div>
            <div class="overlay second"></div>
            <div class="overlay third"></div>
        
        
            <div class="left_container"></div>
            <div class="right_container"></div>
        
        
            <div class="strips">
                <div class="left_strip"></div>
                <div class="right_strip"></div>
            </div>
        
            
            <header>
              <nav class="nav body_layout">
                <div class="nav_insider">
                  <div class="logo">
                    <h3 class="nav__icon">Manish<sup>&reg;</sup></h3>
                  </div>
        
        
                  <div class="nav__menu" id="nav__menu">
                      <ul class="nav__list">
                          <li class="nav__item"><a href="#" class="nav__link">Home</a></li>
                          <li class="nav__item"><a href="#" class="nav__link">About</a></li>
                          <li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
                          <li class="nav__item search_btn">
                            <button class="search_btn">
                              <i class="ri-search-line"></i>
                            </button>
                          </li>
                          <li class="nav__item cart_btn">
                            <button class="cart_btn">
                                <i class="ri-shopping-bag-fill"></i>
                            </button>
                          </li>
                      </ul>
                  </div>  
                </div>
        
                <div class="cart_btn_wrapper">
                  <button class="search_btn"><i class="ri-search-line"></i></button>
                  <button class="cart_btn"> <i class="ri-shopping-bag-fill"></i></button>
                </div>
        
                <button class="menu_toggle_btn" id="menu_toggle_btn">
                  <i class="ri-menu-3-fill nav__icon"></i>
                </button>
              </nav>
            </header>
        
        
            <div class="social">
                <ul class="social__list">
                    <li class="social_item"><i class="ri-facebook-fill"></i></li>
                    <li class="social_item"><i class="ri-instagram-fill"></i></li>
                    <li class="social_item"><i class="ri-twitter-fill"></i></li>
                </ul>
            </div>
        
            
            <img src="hero.png" class="product_img" alt="product_img">
        
            
            <div class="bottom_nav">
                <div class="slide_nav_wrapper">
                    <button class="prev direction_btn"><i class="ri-arrow-right-s-line"></i></button>
                    <button class="next direction_btn"><i class="ri-arrow-left-s-line"></i></button>
                </div>
                <div class="dots_wrapper">
                  <ul class="dots">
                    <li class="dot"></li>
                    <li class="dot"></li>
                    <li class="dot active"></li>
                    <li class="dot"></li>
                    <li class="dot"></li>
        
                  </ul>
                </div>
            </div>
        
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
            <script src="script.js"></script>
        
          </body>
        </html>
                        
        
      
      
      
    CSS Styling (style.css):
        
      
        
        /*===== GOOGLE FONTS =====*/
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
        /*===== ROOT ======*/
        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        :root{
          --primary-color:#d9e2f8;
          --secondary-color:#f7a2e959;
          --color-text:#293f3e;
          --header-height:3rem;
        }
        
        html, body{
          width: 100%;
          height: 100vh;
          font-family: 'Poppins', sans-serif;
          overflow: hidden;
        }
        ul li{
          list-style: none;
        }
        a{
          text-decoration: none;
        }
        button{
          cursor: pointer;
          border: none;
          outline: none;
        }
        
        .overlay{
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          height: 100%;
          z-index: 55;
        }
        .first{
          background-color: var(--primary-color);
        }
        .second{
          left: 33.3%;
          background-color: #c9ebeed8;
        }
        .third{
          left: 66.6%;
          background-color: var(--secondary-color);
        }
        
        .left_container, .right_container{
          position: absolute;
          height: 100%;
          width: 50%;
          z-index: -50;
        }
        .left_container{
          background-color: var(--primary-color);
        }
        .right_container{
          left: 50%;
          background-color: var(--secondary-color);
        }
        
        .left_strip, .right_strip{
          position: absolute;
          width: 1px;
          height: 100vh;
          background-color: #fff;
          opacity: .5;
          z-index: -10;
        }
        .left_strip{
          left: 120px;
        }
        .right_strip{
          right: 120px;
        }
        
        .body_layout{
          display: grid;
          grid-template-columns: 100%;
          align-items: center;
          padding-left: 0.5rem;
          padding-right: 0.5rem;
        }
        
        header{
          width: 100%;
          position: fixed;
          left: 0;
          top: 0;
        }
        
        
        .nav{
          height: 5rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .nav_insider{
          width: 75%;
          display: flex;
          align-items: center;
        }
        .nav__icon{
          font-size: 1.5rem;
          color: var(--color-text);
          text-transform: capitalize;
        }
        .nav__menu{
          margin-left: 3rem;
        }
        .nav__item{
          margin-bottom: 2rem;
        }
        .nav__link{
          color: var(--color-text);
          text-transform: capitalize;
          font-size: 16px;
        }
        .nav__link:hover{
          border-bottom: 1px solid red;
        }
        .search_btn,.cart_btn{
          width: 40px;
          height: 40px;
          border-radius: 50px;
          background-color: rgb(181, 196, 193);
        }
        .search_btn{
          margin-right: 88px;
        }
        .search_btn i, .cart_btn i{
          font-size: 17px;
          font-weight: 600;
        }
        .cart_btn i{
          color: var(--secondary-color);
        }
        .cart_btn_wrapper{
          display: flex;
        }
        
        .social{
          position: absolute;
          left: -3%;
          top: 50%;
          transform: rotate(-90deg);
        }
        .social ul {
          list-style: none;
        }
        .social ul li{
          display: inline-block;
          font-weight: 500;
          font-size: 14px;
          cursor: pointer;
        }
        .social ul li i{
          font-size: 19px;
          color: var(--color-text);
        }
        .social ul li:nth-child(1)::after{
          content: "/";
          position: absolute;
          left: 60%;
          color: rgba(238, 238, 238, 0.726);
        }
        .social ul li:nth-child(2)::after{
          content: "/";
          position: absolute;
          left: 55%;
          color: rgba(238, 238, 238, 0.726);
        }
        .social ul li:not(:last-child){
          padding-right: 70px;
        }
        
        .product_img{
          width: 444px;
          max-width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -40%);
          z-index: -10;
          animation: move 4s ease-in-out infinite;
        }
        @keyframes move {
          0% {
            transform: translate(-50%, -46%);
          }
          50% {
            transform: translate(-50%, -54%);
          }
          100% {
            transform: translate(-50%, -46%);
          }
        }
        .product_text{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
          z-index: -10;
        }
        .product_title{
          font-size: 100px;
          text-transform: capitalize;
          color: var(--color-text);
          z-index: -10;
        }
        .product_title > sup{
          font-size: 50px;
          color: var(--color-text);
          z-index: -10;
        }
        .product_type{
          font-size: 25px;
          font-weight: 500;
          color: var(--color-text);
          z-index: -10;
          text-transform: capitalize;
        }
        
        .bottom_nav{
          position: absolute;
          width: 100%;
          height: 5rem;
          bottom: 0;
          display: flex;
          align-items: center;
        }
        
        .slide_nav_wrapper{
          display: flex;
          flex-direction: column;
          position: absolute;
          left: 145px;
        }
        .slide_nav_wrapper button{
          width: 25px;
          height: 25px;
          border-radius: 5px;
          margin: 5px 0;
          background-color: transparent;
          transition: all 0.5s ease;
        }
        .slide_nav_wrapper button i {
          font-size: 20px;
          font-weight: 600;
        }
        .slide_nav_wrapper button:nth-child(1){
          color: black;
        }
        .slide_nav_wrapper button:nth-child(1):hover{
         background-color: var(--color-text);
        }
        .slide_nav_wrapper button:nth-child(2){
          color: var(--color-text);
        }
        .slide_nav_wrapper button:nth-child(2):hover{
          background-color: black;
        }
        
        .dots_wrapper{
          position: absolute;
          right: 180px;
          width: 100px;
          height: 25px;
          align-items: center;
          justify-content: center;
        }
        .dots_wrapper .dots{
          display: flex;
        }
        .dots .dot{
          margin: 0 6px;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background-color: rgba(238, 238, 238, 0.762);
        }
        .dot.active{
          width: 9px;
          height: 9px;
          background-color: var(--color-text);
        }
        
        @media screen and (max-width:768px) {
          .logo{
            margin-left: 0.5rem;
          }
          .social{
            display: none;
          }
          .nav{
            height: 2.5rem;
          }
          .nav__menu{
            position: fixed;
            top: var(--header-height);
            background-color: black;
            right: -100%;
            width: 44%;
            height: 100vh;
            padding: 1.5rem;
            z-index: 25;
            border-top: 1px solid #eee;
            border-left: 1px solid #eee;
            transition: all 0.5s;
          }
          .cart_btn_wrapper{
            position: fixed;
            top: var(--header-height);
            background-color: black;
            right: -100%;
            padding: 1.5rem;
            background-color: var(--secondary-color);
            z-index: 10;
            transition: 0.5s;
            border-top: 1px solid var(--color-text);
            border-left: 1px solid var(--color-text);
          }
          .menu_toggle_btn{
            background-color: transparent;
            color: white;
          }
          .cart_btn, .search_btn {
            width: 25px;
            height: 25px;
           
          }
          .cart_btn i, .search_btn i{
            font-size: 15px;
          }
          .left_strip{
            left: 110px;
          }
          .right_strip{
            right: 100px;
          }
          .product_img{
            width: 300px;
            height: 300px;
          }
          .product_title{
            font-size: 45px;
          }
          .product_title > sup{
            font-size: 25px;
          }
          .product_type{
            font-size: 18px;
          }
          .slide_nav_wrapper{
            flex-direction: row;
            left: 10px;
          }
          .dots_wrapper{
            z-index: -1;
            right: 10px;
          }
          .show{
            right: 0;
          }
        }
        
        @media screen and (min-width:768px) {
          .nav__list{
            display: flex;
          }
          .nav__item{
            margin-bottom: 0;
            margin-left: 2rem;
         
          }
          .menu_toggle_btn{
            display: none;
          }
          .nav__item.search_btn, .nav__item.cart_btn{
            display: none;
          }
        }
        
        
        @media screen and (min-width:1200px) {
          .body_layout{
            padding-left: 1.5rem;
            padding-right: 2.2rem;
          }
        }
        
    
    
    
      
      
      
    JavaScript (script.js):
      
        
    
        const toggleMenu = (toggleId, navId) => {
            const toggle_btn = document.getElementById(toggleId),
            nav = document.getElementById(navId)
        
            if(toggle_btn && nav) {
                toggle_btn.addEventListener('click', () => {
                    nav.classList.toggle('show')
                })
            }
        }
        toggleMenu('menu_toggle_btn', 'nav__menu');
        
        
        gsap.from('.left_container', {
            delay:2,
            duration:1.5,
            top:"100%",
            ease:"expo.inOut"
        });
        
        gsap.from('.right_container', {
            delay:2,
            duration:1.5,
            bottom:"100%",
            ease:"expo.inOut"
        });
        
        gsap.from('.logo', {
            opacity:0,
            delay:3.3,
            duration:2.5,
            y:-20,
            ease:"expo.inOut"
        });
        
        gsap.from('.nav__item', {
            opacity:0,
            delay:3.8,
            duration:3,
            y:25,
            ease:"expo.Out",
            stagger:.2
        });
        
        
        gsap.from('.search_btn', {
            opacity:0,
            delay:4,
            duration:3,
            x:20,
            ease:"expo.Out"
        });
        
        
        gsap.from('.cart_btn', {
            opacity:0,
            delay:4,
            duration:3,
            x:20,
            ease:"expo.Out"
        });
        
        gsap.from('.social_item', {
            opacity:0,
            delay:4.5,
            duration:3,
            x:-25,
            ease:"expo.Out",
            stagger:.2
        });
        
        gsap.from('.direction_btn', {
            opacity:0,
            delay:4.4,
            x:-20,
            ease:"power3.Out",
            stagger:.2
        });
        
        gsap.from('.dot', {
            opacity:0,
            delay:4.4,
            x:-20,
            ease:"power3.Out",
            stagger:.2
        });
        
        gsap.from('.product_img', {
            opacity:0,
            delay:5,
            duration:1.5,
            ease:"expo.inOut",
        });
        
        gsap.from('.product_title', {
            opacity:0,
            delay:5.4,
            duration:1.8,
            y:100,
            ease:"expo.inOut",
        });
        
        gsap.from('.product_type', {
            opacity:0,
            delay:5.8,
            duration:1.8,
            y:100,
            ease:"expo.inOut",
        });
        
        
        gsap.to('.first', {
            delay:.5,
            duration:1,
            top:"-100%",
            ease:"expo.inOut"
        });
        gsap.to('.second', {
            delay:.7,
            duration:1,
            top:"-100%",
            ease:"expo.inOut"
        });
        gsap.to('.third', {
            delay:.9,
            duration:1,
            top:"-100%",
            ease:"expo.inOut"
        });
                
    
    
        
        

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