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 =>
- Ionicons
- 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()">×</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>
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;
}
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"});
}
}
That's all for now, follow me on Dev community for more Posts just like this!
Thanks for watching & Happy Coding!
Top comments (0)