From 8a832be13749e7ff32c82b9ab808ae99ac9922da Mon Sep 17 00:00:00 2001 From: Anirban Islam <anirbanislamemon.online@gmail.com> Date: Thu, 22 Aug 2024 02:12:45 -0700 Subject: [PATCH] Header-Responsive --- index.html | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 2f513db..c20d4f4 100644 --- a/index.html +++ b/index.html @@ -53,7 +53,7 @@ <=======================================> --> <header> <!-- Navigation section --> - <nav class="flex items-center justify-between mx-auto sm:px-20 bg-gray-100 sm:py-4 px-4 max-sm:py-3"> + <nav class="flex items-center justify-between px-20 mx-auto bg-gray-100 max-sm:py-3 max-sm:px-2"> <div class="brand-logo flex items-center gap-1"> <ion-icon name="arrow-forward-outline" class="text-2xl bg-lime-400 rounded-full rotate-[-45deg] max-sm:text-lg"></ion-icon> <h2 class=" text-2xl font-extrabold max-md:text-xl" >Rinterio</h2> @@ -68,38 +68,39 @@ <h2 class=" text-2xl font-extrabold max-md:text-xl" >Rinterio</h2> <li><a href="#">Contact Us</a></li> </ul> </div> - <div class="menu-righ flex gap-2 "> - <div class="right-icon flex gap-2 items-center"> - <ion-icon name="search-outline" class="text-xl rounded-full bg-white p-2 flex items-center max-sm:text-sm p-1"></ion-icon> - <ion-icon name="cart-outline" class="text-xl rounded-full bg-white p-2 flex items-center max-sm:text-sm p-1"></ion-icon> - <div class="btn flex items-center gap-1 bg-lime-400 rounded-full px-2 py-2"> - <button class=" text-lg font-semibold max-sm:text-sm px-1 py-0">Book Consult</button> + <div class="menu-righ flex gap-2 max-sm:gap-1 "> + <div class="right-icon flex gap-2 items-center max-sm:gap-1"> + <ion-icon name="search-outline" class="text-xl rounded-full bg-white p-2 flex items-center max-sm:text-sm max-sm:p-1"></ion-icon> + <ion-icon name="cart-outline" class="text-xl rounded-full bg-white p-2 flex items-center max-sm:text-sm max-sm:p-1"></ion-icon> + <div class="btn flex items-center gap-1 bg-lime-400 rounded-full px-2 py-2 max-sm:px-1 max-sm:py-1"> + <button class=" text-lg font-semibold max-sm:text-sm max-sm:px-1 max-sm:py-0">Book Consult</button> <ion-icon name="arrow-forward-outline" class="text-2xl bg-black text-white rounded-full rotate-[-45deg] max-sm:text-sm"></ion-icon> </div> </div> <div class="mobile-menu sm:hidden flex items-start mt-1"> - <ion-icon name="menu-outline" class="text-2xl rounded-full bg-white p-2 flex items-center max-sm:text-sm p-0"></ion-icon> + <ion-icon name="menu-outline" class="text-2xl rounded-full bg-white p-2 flex items-center max-sm:text-sm max-sm:p-0"></ion-icon> </div> </div> </nav> <!-- Hero Section --> - <div class="hero-section bg-gray-100 px-20 max-sm:px-5 py-2"> + <div class="hero-section bg-gray-100 px-15 max-sm:px-2 max-sm:py-2"> <div class="hero-img items-center flex justify-center w-full h-full max-sm:px-10"> - <img src="./Images/banner.png" alt=""> + <img class="w-3/4 max-sm:w-full " src="./Images/banner.png" alt=""> </div> - <div class="hero-taitle flex flex-col gap-4 items-center max-sm:gap-2"> - <h1 class="text-5xl font-extrabold w-full p-2 justify-center text-center max-sm:text-2xl">A barn house of this design has a</br>striking appearance</h1> - <p class="w-6/12 text-xs text-center leading-5 max-sm:w-full px-10">The barn house captivates with its blend of rustic charm and modern sophistication, featuring weathered wood, sleek metal accents, and large windows that flood the space with natural light.</p> + <div class="hero-taitle flex flex-col gap-4 items-center max-sm:gap-1"> + <h1 class="text-5xl font-extrabold w-full p-2 justify-center text-center max-sm:text-xl max-sm:px-5">A barn house of this design has a</br>striking appearance</h1> + <p class="w-6/12 text-xs text-center leading-5 max-sm:w-full max-sm:px-8">The barn house captivates with its blend of rustic charm and modern sophistication, featuring weathered wood, sleek metal accents, and large windows that flood the space with natural light.</p> - <div class="btn flex items-center gap-1 bg-lime-200 px-5 py-2 rounded-full max-sm:px-5 max-sm:py-1"> - <button class="text-xl font-semibold max-sm:text-lg">View Details</button> - <ion-icon name="arrow-forward-outline" class="text-xl bg-lime-400 rounded-full rotate-[-45deg] max-sm:text-lg"></ion-icon> + <div class="btn flex items-center gap-1 bg-lime-200 px-5 py-2 rounded-full max-sm:px-2 max-sm:py-1 max-sm:mt-2"> + <button class="text-xl font-semibold max-sm:text-sm">View Details</button> + <ion-icon name="arrow-forward-outline" class="text-xl bg-lime-400 rounded-full rotate-[-45deg] max-sm:text-sm"></ion-icon> </div> </div> </div> </header> +