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-HTML-CSS-JS

๐Ÿ‘‹ Hello, Dear developers ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป, Today we'll see, how we can easily create another Responsive Landing page using HTML, CSS, and JS with GreenSock Animation library for creating those 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


So in this coding blog post, we cover the two most fundamental & modern layout building systems which are CSS Flexbox & CSS Grid.

Did you know that what is the main difference between?
If yes you're an absolute genius but if no, let me explain to you in simple words that is CSS Flexbox is a one Dimensional Layout system, while CSS grid is a Two Dimensional Layout system.

Okay ๐Ÿ˜†, that's it for now! Let's get into the coding part for which we are hereย !!!

Starting with our project folder structure first ๐Ÿ‘‡
project-structure
ย 
Typically we have used 4 external libraries which includes ๐Ÿ‘‡

  • Remixiconโ€Š-โ€ŠAn Open Source icons library.
  • Google Fontsโ€Š-โ€Ša font embedding service library.
  • Animate on scrollโ€Š-โ€ŠSmall library to animate elements on your page as you scroll.
  • GSAP by GreenSockโ€Š-โ€ŠCreate Professional-grade JavaScript animation for the modern web.

So from the above project folder structure, we required index.html, style.css, script.js & IMG folder where a single image file is stored.

So after creating those files let's jump into your favorite code editor.

First of all, we will look at making some basic changes in our CSS file which includes resets of the root, HTML & variables.

Style.css



/* ==== "Inter" FONT-FAMILY FROM FONTS.GOOGLE.COM ==== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
/* ==== ROOT RESET ==== */
* {
ย margin: 0;
ย padding: 0;
ย box-sizing: border-box;
ย font-family: "Inter", sans-serif;
}
*,
*::before,
*::after {
ย box-sizing: border-box;
}
/* ==== CSS VARIABLES ==== */
:root {
โ€Š-โ€Šprimary-color: #335eea;
โ€Š-โ€Šlink-color: #506690;
โ€Š-โ€Šbtn-hover-color: #2b50c7;
โ€Š-โ€Šlg-heading: #161c2d;
โ€Š-โ€Štext-content: #869ab8;
โ€Š-โ€Šfixed-header-height: 4.5rem;
}
/* ==== RESET HTML ==== */
body {
ย width: 100%;
ย height: 100vh;
ย overflow-x: hidden;
ย background-color: #fafbfb;
}
ul li {
ย list-style-type: none;
}
a {
ย text-decoration: none;
}
button {
ย background-color: transparent;
ย border: none;
ย outline: none;
ย cursor: pointer;
}


Enter fullscreen mode Exit fullscreen mode

Okay Niceย ! we are moving further to add skeleton that is to add HTML.
so come inside in our index.html file to make add basic markup.

index.html



<!DOCTYPE html>
<html lang="en">
ย <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>
<!โ€Š-โ€Š==== STYLE.CSS ==== โ†’
ย <link rel="stylesheet" href="./css/style.css" />
<!โ€Š-โ€Š==== REMIXICON CDN ==== โ†’
ย <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet" />
<!โ€Š-โ€Š==== ANIMATE ON SCROLL CSS CDN ==== โ†’
ย <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
ย </head>
ย <body>
ย <!โ€Š-โ€Š==== ANIMATE ON SCROLL JS CDN โ†’
ย <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
ย <!โ€Š-โ€Š==== GSAP CDN ==== โ†’
ย <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
ย <!โ€Š-โ€Š==== SCRIPT.JS ==== โ†’
ย <script src="./script.js" defer></script>
ย </body>
</html>


Enter fullscreen mode Exit fullscreen mode

Okay Great! Now moving a bit further to make our navbar,ย 
Did you know that? Navigation bar is a section of a graphical user interface intended to aid visitors in accessing information.
wow-reaction
ย 
Okay ๐Ÿ˜†, Now Let's add markup for navbar inside index.html file

index.html



<!DOCTYPE html>
<html lang="en">
ย <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>
<!โ€Š-โ€Š==== STYLE.CSS ==== โ†’
ย <link rel="stylesheet" href="./css/style.css" />
<!โ€Š-โ€Š==== REMIXICON CDN ==== โ†’
ย <link
ย href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet" />
<!โ€Š-โ€Š==== ANIMATE ON SCROLL CSS CDN ==== โ†’
ย <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>Devkit.</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>
<!โ€Š-โ€Š==== ANIMATE ON SCROLL JS CDN โ†’
ย <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
ย <!โ€Š-โ€Š==== GSAP CDN ==== โ†’
ย <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
ย <!โ€Š-โ€Š==== SCRIPT.JS ==== โ†’
ย <script src="./script.js" defer></script>
ย </body>
</html>


Enter fullscreen mode Exit fullscreen mode

navbar-html
Let's Add styles on it took look more better.

Style.css



/* ==== CONTAINER ==== */
.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: 28px;
ย color: var(โ€Š-โ€Šprimary-color);
}
/* ==== 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: 16.5px;
ย line-height: 27px;
ย color: var(โ€Š-โ€Šlink-color);
ย text-transform: capitalize;
ย letter-spacing: 0.5px;
}
.nav_menu_link:hover {
ย color: var(โ€Š-โ€Šprimary-color);
}
.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;
}


Enter fullscreen mode Exit fullscreen mode

Result

navbar
Now final move to make it responsive to diffrent on devices,
So to achieve this we need to add some media queries to our navbar, come inside in our style.css file and make so changes.

Style.css



/* ==== 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;
ย }
}


Enter fullscreen mode Exit fullscreen mode

ย 
responsive-navbar
ย 
here we go we observe that nav-links we hidden on mobile screen while they were visible on desktop screen. so here we add some little Javascript to make nav-links visible after clicking on toggle menu button
Now come inside our script.js file to add logic ๐Ÿง 

Script.js



const navId = document.getElementById("nav_menu"),
ย ToggleBtnId = document.getElementById("toggle_btn"),
ย CloseBtnId = document.getElementById("close_btn");
// ==== SHOW MENU ==== //
ToggleBtnId.addEventListener("click", () => {
ย navId.classList.add("show");
});
// ==== HIDE MENU ==== //
CloseBtnId.addEventListener("click", () => {
ย navId.classList.remove("show");
});


Enter fullscreen mode Exit fullscreen mode

Result in GIF Format

responsive-toggle-gif


Moving further to make hero section which defines a glimpse of your company and offers.

index.html



<!DOCTYPE html>
<html lang="en">
ย <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>
<!โ€Š-โ€Š==== STYLE.CSS ==== โ†’
ย <link rel="stylesheet" href="./css/style.css" />
<!โ€Š-โ€Š==== REMIXICON CDN ==== โ†’
ย <link
ย href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
ย rel="stylesheet"
ย />
<!โ€Š-โ€Š==== ANIMATE ON SCROLL CSS CDN ==== โ†’
ย <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>Devkit.</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>
<!โ€Š-โ€Š==== HERO ==== โ†’
ย <section class="wrapper">
ย <div class="container">
ย <div class="grid-cols-2">
ย <div class="grid-item-1">
ย <h1 class="main-heading">
ย Welcome to <span>Devkit.</span>
ย <br />
ย Develop anything.
ย </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="./img/team.svg" alt="team-img" />
ย </div>
ย </div>
ย </div>
ย </div>
ย </section>
<!โ€Š-โ€Š==== ANIMATE ON SCROLL JS CDN โ†’
ย <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
ย <!โ€Š-โ€Š==== GSAP CDN ==== โ†’
ย <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
ย <!โ€Š-โ€Š==== SCRIPT.JS ==== โ†’
ย <script src="./script.js" defer></script>


Enter fullscreen mode Exit fullscreen mode

style.css



/* ==== 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: 300;
ย font-size: 40px;
ย line-height: 55px;
}
.main-heading span {
ย color: var(โ€Š-โ€Šprimary-color);
}
.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: var(โ€Š-โ€Šprimary-color);
ย 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: var(โ€Š-โ€Šbtn-hover-color);
}
.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;
}
@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;
ย }
}
@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;
ย }
}


Enter fullscreen mode Exit fullscreen mode

Result

hero-section
hero-section-responsive
Nice We are making great progress Now let's move on to the final components which is featured info and footer

index.html



<!โ€Š-โ€Š==== NAVBAR ==== โ†’
ย <!โ€Š-โ€Š==== HERO ==== โ†’
<section class="wrapper">
ย <div class="container">
ย <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>


Enter fullscreen mode Exit fullscreen mode

style.css



/* ==== RESET CSS ==== */
/* ==== Navbar ==== */
/* ==== Hero Section ==== */
/*
.
.
.
.
.
*/
.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: var(โ€Š-โ€Šlg-heading);
}
.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 screen and (max-width: 768px) {
ย .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) {
ย .featured_info span {
ย font-size: 19px;
ย }
}


Enter fullscreen mode Exit fullscreen mode

Result

all-3
Now we come to a very end in this post, Now Let's add Animate on scroll properties, in order to add them first we have to add them with the data- attribute in our HTML file and late we have initialized them inside script js.
Let's make little change at our featured section that is ๐Ÿ‘‡



<section class="wrapper">
ย <!โ€Š-โ€Š==== ADDITION OF data- attribute ==== โ†’
ย <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>


Enter fullscreen mode Exit fullscreen mode

Script.js



// ==== Animate on Scroll Initialize ==== //
AOS.init();


Enter fullscreen mode Exit fullscreen mode

by adding data- attribute & initialize AOS in our js file it gives us a small fade up effect.


Perfectย ! Now gone end our project by adding GSAP animations using javascript.

Script.js



// ==== GSAP Animations ==== //
// ==== LOGO ==== //
gsap.from(".logo", {
ย opacity: 0,
ย y: -10,
ย delay: 1,
ย duration: 0.5,
});
// ==== NAV-MENU ==== //
gsap.from(".nav_menu_listย .nav_menu_item", {
ย opacity: 0,
ย y: -10,
ย delay: 1.4,
ย duration: 0.5,
ย stagger: 0.3,
});
// ==== TOGGLE BTN ==== //
gsap.from(".toggle_btn", {
ย opacity: 0,
ย y: -10,
ย delay: 1.4,
ย duration: 0.5,
});
// ==== MAIN HEADING ==== //
gsap.from(".main-heading", {
ย opacity: 0,
ย y: 20,
ย delay: 2.4,
ย duration: 1,
});
// ==== INFO TEXT ==== //
gsap.from(".info-text", {
ย opacity: 0,
ย y: 20,
ย delay: 2.8,
ย duration: 1,
});
// ==== CTA BUTTONS ==== //
gsap.from(".btn_wrapper",ย 
ย opacity: 0,
ย y: 20,
ย delay: 2.8,
ย duration: 1,
});
// ==== TEAM IMAGE ==== //
gsap.from(".team_img_wrapper img", {
ย opacity: 0,
ย y: 20,
ย delay: 3,
ย duration: 1,
});


Enter fullscreen mode Exit fullscreen mode

ย 


And that's it guys here we end our project! Thank you so much for reading the post till the endย !!! Please Make sure you check out my Youtube Channel where I post this kind of coding tutorial.

Thank You! Happy Coding

Top comments (15)

Collapse
 
geckotechcr profile image
geckotechcr

Started out my JS journey thinking the only way to really develop responsive pages was to use frameworks (Vue, React...). This mindset forced me to overlook the fundamentals on which said frameworks were built. This has forced me to rethink my approach and when I really need to bring a framework into the equation. Thanks

PS: HTML Comments and CSS variable declarations do not cut/paste properly from CHROME Browser (latest vesion)

Collapse
 
ananiket profile image
Aniket

Got it sir ! Thanks for your advice ๐Ÿ™

Collapse
 
andrewpierno profile image
Andrew Pierno

Awesome work, Dude!
Would you be willing to write some tutorials for our us? Happy to pay.
You can either DM me on twitter at twitter.com/AndrewPierno or fill out this little airtable form airtable.com/shrN6S3NMZ7oxRXTt.

Collapse
 
jenningsf profile image
JenningsF

Great detailed tutorial! Thanks for all the great code snippets too. Will definitely have to take time to dissect.

Collapse
 
ananiket profile image
Aniket

Thank you so much for watching ! โœจ

Collapse
 
andysaktia profile image
andysaktia

Cool๐Ÿ‘

Collapse
 
ananiket profile image
Aniket

Thank you sir ๐Ÿ™๐Ÿป

Collapse
 
allenarduino profile image
Allen Jones

Thank you so much

Collapse
 
napster profile image
Marouane Etaraz

thanks for useful articles ๐Ÿ’ช

Collapse
 
ananiket profile image
Aniket

Thank you so much mate ๐Ÿฅณโœจ

Collapse
 
soltad4all profile image
Soliu Adeola

Fantabulous

Collapse
 
ananiket profile image
Aniket

Thank you so much mate โœŒ๐Ÿป

Collapse
 
theb055 profile image
THEB055 • Edited

you've nail it

Collapse
 
ananiket profile image
Aniket

Thank you so much mate ๐Ÿฅณ๐Ÿ”ฅ

Collapse
 
nadyadf profile image
Nadya Devi Febita

I think you forgot to put "display: block" on class .close-btn in the media queries section above 768, which makes the close button not appear when the toggle button is clicked, cmiiw.