Aniket

Posted on Sep 8, 2021

Create a Responsive Landing Page Using HTML CSS & JS 🔥

#html #css #javascript #webdev

Hello, dear developers, Today we'll see, how we can easily create a responsive landing page using HTML, CSS, and JS with GreenSock Animation library for creating those classic animations.

Making a landing page with HTML & CSS is a pretty easy & simple task, but did you know what makes our post more interesting! Okay, will discuss it…

But Before that, For demo with code tutorial. You can watch the video below.

Code Tutorial

If you want to see more web design tutorials just like these ! Please consider subscribing to our Youtube Channel.

Source Code for this post is available on Github with all images and much more so please visit the below-given link to get source code

Source Code Link

Nowadays, animations on the website play a major role, because having a jaw-dropping animation on the website gives a better user experience (UX) to the users. it makes users to stop and look at that masterpiece !!!

Before starting code, Let's understand something about GSAP

What is GSAP?

have you ever heard about it before? if yes you are the greatest! if not give me a chance to explain you though !!!

So GSAP is a javascript library for building high-performance animations that work in **every major browser. you can even Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects…anything JavaScript can touch!**

At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery 🔥!

Okay Okay 😆 ! So, without wasting more time let's see how to code this.

Starting with our project folder structure first, we will require basically 3 files only including 👇

Now Representing with used External Libraries which mainly include

So after creating these files in your favorite code editor let, jump into making some HTML reset in our CSS file by considering Root elements as well.

/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
* {
    margin: 0;
    padding: 0;
}

/*===== ROOT ======*/ 
:root{
    --primary-color: #1B2338;
    --secondary-color:#B0253C;
    --color-text: #fff; 
    --header-height: 3rem;
}

/*===== RESET HTML =====*/
html, body {
    width: 100%;
    height: 100vh;
    font-family: 'Poppins',sans-serif;
    font-size: 14px;
    color: #fff;
    overflow: hidden !important;
}
ul li{
    list-style-type: none;
}
a{
    text-decoration: none;
}
button{
    cursor: pointer;
    border: none;
    outline: none;
}

So in the above code, we imported the google font named Poppins from fonts. google.com 👌 after that we set some CSS variables & reset the HTML elements that we are gone we used !!

So Now Let's make our overlay that we are gone animating with JS later on

HTML Syntax :

<div class="overlay first"></div> 
<div class="overlay second"></div>  
<div class="overlay third"></div>

CSS Style :

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    z-index: 100;
}
.first {
    background-color: var(--primary-color);
}
.second {
    background-color:  white;
    left: 33.3%;
}
.third {
    background-color: var(--secondary-color);
    left: 66.6%;
}

Generated Output :

Before we move on to our next element I want to conclude that, unfortunately, we have to comment out the overlay code because it will perform the transition of sliding up like a revel something!

After Commenting we are moving on to the containers and strips :

HTML Syntax :

<!-- ===== CONTAINER'S ===== -->  
<div class="left_container"></div>    
<div class="right_container"></div>
  <!-- ===== STRIPS ===== -->    
<div class="strips">        
  <div class="left_strip"></div>        
  <div class="right_strip"></div>    
</div>

CSS Style :

/*===== CONTAINER'S =====*/
.left_container, .right_container {
    position: absolute;
    height: 100%;
    width: 50%;
    z-index: -50;
}
.left_container {
    background: var(--primary-color);
}
.right_container {
    left: 50%;
    background: var(--secondary-color);
}

/*===== STRIPS =====*/
.left_strip, .right_strip{
    position: absolute;
    width: 1px;
    height: 100vh;
    background: #fff;
    opacity: .5;
    z-index: -10;
}
.left_strip {
    left: 120px;
}
.right_strip {
    right: 120px;
}

Output :

Guys on more important thing throughout this code-based post here in CSS the property z-index has played a very much vital role.

Now let's Complete our Navbar

HTML Syntax for Navbar :

<!-- ===== NAVBAR ===== -->
    <header>
      <nav class="nav body_layout">
        <div class="nav_insider">
          <div class="logo">
            <h3 class="nav__icon">levi's <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">man</a></li>
                  <li class="nav__item"><a href="#" class="nav__link">women</a></li>
                  <li class="nav__item"><a href="#" class="nav__link">kids</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>

CSS Style for Navbar :

/*===== BODY LAYOUT  =====*/
.body_layout{
    display: grid;
    grid-template-columns: 100%;
    align-items: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/*===== HEADER =====*/
header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
/*===== NAV =====*/
.nav{
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav_insider{
    width: 75%;
    display: flex;
    align-items: center;
}
.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 var(--color-text);
}
.nav__icon{
    font-size: 1.5rem;
    text-transform: capitalize;
}
.search_btn, .cart_btn{
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background-color: white;
}
.search_btn{
    margin-right:88px;
}
.search_btn i, .cart_btn i{
    font-size: 17px;
    font-weight: 600;
}
.cart_btn i{
    color: var(--secondary-color);
}

Output :

Now Social links and our product info

HTML Syntax :

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

    <!-- ===== PRODUCT-IMAGE ===== -->
    <img src="./img/levis.png" class="product_img" alt="product_img">

    <!-- ===== PRODUCT-INFO ===== -->
    <div class="product_text">
      <h1 class="product_title">levi's <sup>&reg;</sup></h1>
      <p class="product_type">full sleeve t-shirt</p>
    </div>

CSS Style :

/*===== SOCIAL  =====*/
.social {
    position: absolute;
    left: -2%;
    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:nth-child(1)::after{
    content: "/";
    position: absolute;
    left: 25%;
    color: rgba(238, 238, 238, 0.726);
}
.social ul li:nth-child(2)::after{
    content: "/";
    position: absolute;
    left: 70%;
    color: rgba(238, 238, 238, 0.726);
}
.social ul li:not(:last-child) {
    padding-right: 60px;
}
.social ul li i{
    font-size: 19px;
}

/*===== PRODUCT-IMAGE =====*/
.product_img {
    width: 444px;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    animation: move 4s ease-in-out infinite;
    z-index: -10;
}
@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;
}

.product_title {
    font-size: 100px;
    text-transform: capitalize;
}
.product_title > sup{
     font-size: 50px;
}
.product_type {
    font-size: 25px;
    font-weight: 500;
}

Output :

Now Ending up with the Last element from HTML Side that it bottom Nav :

HTML Syntax :

<!-- ===== BOTTOM-NAV ===== -->
    <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>

CSS Style :

/*===== BOTTOM-NAV =====*/
.bottom_nav{
    position: absolute;
    width: 100%;
    height: 5rem;
    bottom: 0;
    display: flex;
    align-items: center;
}
/*===== SLIDE-NAV-WRAPPER =====*/
.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 =====*/
.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);
}

Result :

All CSS Media Query :

/*===== MEDIA QUERIES (FOR MAX-WIDTH:768px) =====*/
@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 QUERIES (FOR MIN-WIDTH:768px) =====*/
@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 QUERIES (FOR MIN-WIDTH:1200px) =====*/
@media screen and (min-width:1200px) {
  .body_layout{
    padding-left: 1.5rem;
    padding-right: 2.2rem;
  }
}

Now, look at the end result which is responsive on small devices.*

Now Let's move on to our Logical Part 📖 which is implementing our scripts to make it toggle on small devices.

JS Syntax for menu Toggle :

// Toggle NAV-MENU
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');

Output :

Now our 90% work is done. Now let's start with our remaining 10% work for which we are eagerly waiting that is JS animations 😂

JS Animation's on each element of HTML elements are grabbed according to their class name in order to animate them with GSAP

// CONTAINER's
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"
});
// LOGO
gsap.from('.logo', {
    opacity:0,
    delay:3.3,
    duration:2.5,
    y:-20,
    ease:"expo.inOut"
});
// NAV-ITEM
gsap.from('.nav__item', {
    opacity:0,
    delay:3.8,
    duration:3,
    y:25,
    ease:"expo.Out",
    stagger:.2
});

// SEARCH-BTN
gsap.from('.search_btn', {
    opacity:0,
    delay:4,
    duration:3,
    x:20,
    ease:"expo.Out"
});

// CART-BTN
gsap.from('.cart_btn', {
    opacity:0,
    delay:4,
    duration:3,
    x:20,
    ease:"expo.Out"
});
// SOCIAL-ITEM
gsap.from('.social_item', {
    opacity:0,
    delay:4.5,
    duration:3,
    x:-25,
    ease:"expo.Out",
    stagger:.2
});
// DIRECTION-BTN
gsap.from('.direction_btn', {
    opacity:0,
    delay:4.4,
    x:-20,
    ease:"power3.Out",
    stagger:.2
});
// SLIDE
gsap.from('.dot', {
    opacity:0,
    delay:4.4,
    x:-20,
    ease:"power3.Out",
    stagger:.2
});
// PRODUCT-IMG
gsap.from('.product_img', {
    opacity:0,
    delay:5,
    duration:1.5,
    ease:"expo.inOut",
});
// PRODUCT-TTTLE
gsap.from('.product_title', {
    opacity:0,
    delay:5.4,
    duration:1.8,
    y:100,
    ease:"expo.inOut",
});
// PRODUCT-TYPE
gsap.from('.product_type', {
    opacity:0,
    delay:5.8,
    duration:1.8,
    y:100,
    ease:"expo.inOut",
});

Now Uncomment out overlay HTML Element add then come to your JS file add these Scripts for Overlay and see the magic 🙌

// OVERLAY
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"
});