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>
      
+