Skip to content

Commit

Permalink
Header-Responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@anirban-islam
anirban-islam committed Aug 22, 2024
1 parent 66b48be commit 8a832be
Showing 1 changed file with 17 additions and 16 deletions.
33 changes: 17 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>





Expand Down

0 comments on commit 8a832be

Please sign in to comment.