added header section with tailwind style classes

webgurusam · Sep 14, 2023 · c9f66a9 · c9f66a9
1 parent 9682a16
commit c9f66a9
Showing 1 changed file with 30 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -15,6 +15,35 @@
         </style> 
     </head> 
 <body>
-
+    <header class="bg-[#FFFBF0] pt-[30px] pb-[65px]"> 
+        <nav class="mx-auto max-w-[1140px] mb-14 lg:mb-0"> 
+            <div class="nav flex flex-col md:flex-row gap-y-8 md:gap-y-0 justify-between items-center"> 
+                <div class="logo w-72"> 
+                    <img src="./icons/logo.png" alt=""> 
+                </div> 
+                <div class="menu"> 
+                <ul class="flex gap-14 font-roboto font-medium text-[#3C3C3C]">  
+                    <li><a href="">Home</a></li> 
+                    <li><a href="">Product</a></li> 
+                    <li><a href="">About Us</a></li> 
+                    <li><a href="">Contact Us</a></li> 
+                </ul> 
+                </div> 
+            </div> 
+        </nav> 
+        <div class="flex md:flex-row flex-col items-center justify-between gap-6 md:gap-36 mx-auto max-w-[1140px] px-1"> 
+            <div class="s:w-1/2 w-full"> 
+                <h1 class="text-7xl font-bebas font-semibold uppercase text-[#363958]"><span class="text-[#FABE4C]">Be the Penguins</span> <br> of Winter</h1> 
+                <p class="py-2 w-80 text-[#3E3E3E]">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
+                <button class="bg-gradient-to-b from-[#A4BC46] to-[#85A019] rounded flex items-center justify-center gap-1 font-medium text-white py-4 px-8">
+                     <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" /> 
+                    </svg> BUY NOW 
+                </button> 
+            </div> 
+            <div class="s:w-1/2 w-full"> 
+                <img class="w-full" src="./images/model.png" alt=""> 
+            </div> 
+        </div> 
+    </header>
 </body>
 </html>