DEV Community

Cover image for Create a Responsive Landing Page Using HTML CSS & JS 🔥
Aniket
Aniket

Posted on

Create a Responsive Landing Page Using HTML CSS & JS 🔥

Responsive-Landing-Page-Using-HTML-CSS-&-JS

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

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?

tom

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

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

Now Representing with used External Libraries which mainly include

project-structure-new

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

Generated Output :

overlay

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Output :

strips

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>

Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Output :

navbar-created

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Output :

social

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Result :

bottom-nav

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

Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

Output :

media

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",
});
Enter fullscreen mode Exit fullscreen mode

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"
});
Enter fullscreen mode Exit fullscreen mode

Now Just Look at our End Result :

responsive-landing-page-using-html-css-js

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

Happy Coding 🔥 !!!!!!

Discussion (7)

Collapse
kishoreandra profile image
kishoreandra

coool one :)

Collapse
ananiket profile image
Aniket Author

Thanks mate !
Happy Coding to you

Collapse
kishoreandra profile image
kishoreandra

:) ....

Collapse
thenerdydev profile image
The Nerdy Dev

Nice .

Collapse
ananiket profile image
Aniket Author

Thanks mate ✌🏻

Collapse
niteeshjoyal profile image
Niteesh

Cool project,but your second giphy in the article is not working (WOW GIPHY)

Collapse
ananiket profile image
Aniket Author

Thanks Mate ! Yes i will make sure that it will work properly