Create a Responsive Landing Page Using HTML CSS & JS 🔥
Tags: html, css, javascript, webdev
Published: 2021-09-08 18:34:17

![Responsive-Landing-Page-Using-HTML-CSS-&-JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00nfkb26rsd339atgy38.png)

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.

![responsive-landing-page-using-html-css-js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9f1xtnzu8n3uhmck1s8.gif)

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

{% youtube gf71_c_UjHQ %}
> *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](https://github.com/ananikets18/responsive-landing-page-using-html-css-js)**

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?

![tom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jr4d4k8bej8vvh4noo9d.gif)

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

![giphy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx0jr2qs3bugqestcblo.gif)
 
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 👇

![basic-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gmmc16ttg2aq756sgk3.png)


Now Representing with used External Libraries which mainly include


![project-structure-new](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61kppfwqmje36g2174tk.png)
 

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.

```css
/*===== 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 :

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

### CSS Style :

```css
.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 :

![overlay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wq2m0rdgwmclwgy5vxd.png)
 

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 :

```html
<!-- ===== 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 :

```css
/*===== 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 :

![strips](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnlg8depowi1sgktgegc.png)

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 :
 
```html
<!-- ===== 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 :

```css
/*===== 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 :

![navbar-created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzkjs379n22sg4kezxoj.png)
 

Now *Social links and our product info* 

### HTML Syntax :

```html
<!-- ===== 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 :

```css
/*===== 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 :

![social](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nc4s3yj0j2hi9u28raon.png)

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

### HTML Syntax :

```html
<!-- ===== 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 :

```css
/*===== 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 :

![bottom-nav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jiylqi1geuvn5p116tei.png)


### All CSS Media Query :

```css
/*===== 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 :

```js
// 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 :
![media](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zc3k9mrumllwsivnc5n.png)
 

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

```js
// 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 🙌

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

### Now Just Look at our End Result :

![responsive-landing-page-using-html-css-js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9f1xtnzu8n3uhmck1s8.gif)
 

>Final Words :
Thank you so much watching my post ! Please consider subscribing it motivates making more content just like these...

Happy Coding 🔥 !!!!!!