DEV Community

Cover image for Create a responsive & animated Landing page with HTML & TailwindCSS
Aniket
Aniket

Posted on • Updated on

Create a responsive & animated Landing page with HTML & TailwindCSS

Hello dear developers,

In this post we are going to be discussing, how to create Responsive & animated Landing page with HTML & TailwindCSS with McLaren 720s web design Let's see:

First thing first let start with Markup that is the HTML Part
if you would like to watch a tutorial on this web design instead which this fully-fledged written Code follow along with the link Watch me !

For the Icons, I have used two libraries name as =>

  1. Ionicons
  2. Feathericons

For the CSS Animations, I have used the Animate CSS library to look more interactive.

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 - Maclaren 720s</title>

    <!-- ==== TailwindCSS ==== -->
    <link rel="stylesheet" href="./css/dist.css">

    <!-- ==== Custom CSS ==== -->
    <link rel="stylesheet" href="style.css">

    <!-- ==== Ionicons ==== -->
    <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>

    <!-- ==== Feather Icons ==== -->
    <script src="https://unpkg.com/feather-icons"></script>

    <!-- ==== Animate CSS ==== -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<body class="bg-gray-900">
<section class="mclaren_img animate__animated animate__fadeIn">
    <header>
        <nav class="p-3 flex items-center justify-between">
            <button class="focus:outline-none animate__animated animate__fadeInLeft" onclick="openNav()">
                <svg class="w-6 h-6 text-gray-300 hover:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path  fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>

                    <path class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>

                </svg>
            </button>
            <div class="animate__animated animate__pulse">
                   <a href="#" class="text-gray-100 text-xl font-black cursor-pointer" style="font-family: 'tesla';">Maclaren</a>
            </div>

            <button class="focus:outline-none animate__animated animate__fadeIn">
                <svg class="w-6 h-6 text-gray-300 hover:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
            </button>
        </nav>
    </header>

    <div class="h-3/4 w-max flex items-center float-right">
        <ul class="flex flex-col space-y-2 animate__animated animate__fadeIn animate__delay-2s">
                <a href="#">
                  <li class="w-7 h-7 rounded bg-gray-800 flex items-center justify-center">
                    <ion-icon name="logo-facebook" class="w-5 h-5 text-gray-400 hover:text-gray-300"></ion-icon>
                  </li>  
                </a>

                <a href="#">
                    <li class="w-7 h-7 rounded bg-gray-800 flex items-center justify-center">
                        <ion-icon name="logo-twitter" class="w-5 h-5 text-gray-400 hover:text-gray-300"></ion-icon>
                    </li>  
                </a>

                <a href="#">
                    <li class="w-7 h-7 rounded bg-gray-800 flex items-center justify-center">
                        <ion-icon name="logo-instagram" class="w-5 h-5 text-gray-400 hover:text-gray-300"></ion-icon>
                    </li>  
                </a>
        </ul>
    </div>

    <div class="overlay h-screen w-0 fixed z-10 top-0 left-0 overflow-x-hidden" id="myNav"> 
        <button class="focus:outline-none closebtn" onclick="closeNav()">&times;</button>
        <div class="overlay-content relative top-10 w-full text-justify mt-10 p-7 space-y-4"> 

            <ul class="space-y-4 text-lg">
                <a href="#" class="text-gray-100 active">
                    <li class="">Home</li>
                </a>
                <a href="#" class="flex items-center space-x-2 text-gray-400 hover:text-gray-300">
                    <li class="uppercase">Model</li>
                    <i data-feather="chevron-down"></i>
                </a>
                <a href="#" class="flex items-center space-x-2 text-gray-400 hover:text-gray-300">
                    <li class="uppercase">ownership</li>
                    <i data-feather="chevron-down"></i>
                </a>
                <a href="#" class="flex items-center space-x-2 text-gray-400 hover:text-gray-300">
                    <li class="uppercase">latest news</li>
                    <i data-feather="chevron-down"></i>
                </a>
                <a href="#" class="flex items-center space-x-2 text-gray-400 hover:text-gray-300">
                    <li class="uppercase">WORLD OF McLAREN</li>
                    <i data-feather="chevron-down"></i>
                </a>
            </ul>

            <div class="border w-14 border-gray-600"></div>

            <ul class="space-y-1 text-lg text-gray-400">
                <a href="#" class="flex items-center space-x-2 hover:text-gray-300">
                    <li class="uppercase">find a retailer </li> 
                    <i data-feather="arrow-up-right"></i>
                </a>
                <a href="#" class="flex items-center space-x-2 hover:text-gray-300">
                    <li  class="uppercase">pre-owned</li>
                    <i data-feather="arrow-up-right"></i>
                </a>
            </ul>
        </div>
    </div>

<section class="absolute top-20 w-full">
<main class="flex items-center justify-center mt-10 w-full">
<div class="text-4xl font-semibold tracking-widest animate__animated animate__fadeIn animate__delay-2s">
    <h2 class="bg-clip-text text-transparent bg-gradient-to-r from-gray-300 via-gray-400 to-gray-600 uppercase">
        720<span class="text">S spider</span>
    </h2>
  </div>
</main>
</section>

    <main class="absolute lg:bottom-5 bottom-0 w-full lg:px-7">
        <section class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-10">
            <div class="w-full lg:w-80 text-center lg:text-justify">
                <p class="text-sm text-gray-400 animate__animated animate__fadeInLeft">
                  The McLaren 720S is a British sports car designed
                  and manufactured by McLaren Automotive.
                </p>    
            </div>

            <div>
                 <ul class="flex items-center justify-center sm:justify-evenly space-x-7 md:space-x-0">
                     <li class="flex flex-col space-y-1 items-center justify-center animate__animated animate__fadeInLeft">
                         <div class="text-gray-300 flex items-center space-x-2">
                            <ion-icon name="speedometer-outline" class="w-4 h-4 lg:w-7 lg:w-7"></ion-icon>
                               <span class="text-sm lg:text-2xl">2.9<span class="text-sm">s</span></span>
                         </div>
                         <span class="text-xs lg:text-sm text-gray-500 w-max">0-60 km/h</span>
                     </li>

                     <li class="flex flex-col space-y-1 items-center justify-center animate__animated animate__fadeInLeft">
                        <div class="text-gray-300 flex items-center">
                            <span class="text-sm lg:text-lg font-black">+</span>
                              <span class="text-sm lg:text-2xl">341<span class="text-sm">kph</span></span>
                        </div>
                        <span class="text-xs lg:text-sm text-gray-500 w-max">Top Speed</span>
                    </li>

                    <li class="flex flex-col space-y-1 items-center justify-center animate__animated animate__fadeInLeft">
                        <div class="text-gray-300 flex items-center">
                            <span class="text-sm lg:text-2xl">770<span class="text-sm">Nm</span></span>
                        </div>
                        <span class="text-xs lg:text-sm text-gray-500 w-max">Torque</span>
                    </li>
                 </ul>
           </div>

         <div class="flex items-center justify-center">
                <button
                    class="text-sm text-gray-500 font-semibold uppercase focus:outline-none hover:text-gray-400 tracking-widest w-max flex items-center">explore now
                    <svg class="w-5 h-5 ml-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path   fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                </button>
        </div>
        </section>
      </main>
</section>



<script>
/* Initiate Feathericons */
feather.replace()
</script>
<script>
function openNav() {
    document.getElementById("myNav").style.width = "100%";
}

function closeNav() {
    document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

CSS :

/* ==== Font Family = "inter" imported from Google fonts ==== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
overflow-y: hidden;
}
/* ==== Main Image ==== */
.mclaren_img{
background-image: url(02.jpg);
width: 100%;
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/* ==== Overlay ==== */
.overlay {
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
transition: .7s;
}

/* ==== Closebtn ==== */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #ccc;
}


/* ==== Responsive size close btn ==== */
@media screen and (max-width:768px) {
.overlay .closebtn {
font-size: 30px;
}
}

/* ==== Selects all the text on webpage ==== */
::selection {
background-color: #181b24;
color: #ccc;
}
Enter fullscreen mode Exit fullscreen mode

Script :

function mobMenu() {
    if($("#nav_menu").hasClass("hidden")){
        $("#nav_menu").removeClass("hidden");
        $("#hamburger_btn").css({display : "none"});
        $("#close_menu").css({display : "block"});
    }
    else{
        $("#nav_menu").addClass("hidden");
        $("#hamburger_btn").css({display : "block"});
        $("#close_menu").css({display : "none"});
    }
}
Enter fullscreen mode Exit fullscreen mode

That's all for now, follow me on Dev community for more Posts just like this!

Thanks for watching & Happy Coding!

Discussion (0)