Nav bar for comp

chandraprakash-pandey · Jun 13, 2024 · c7dd9ce · c7dd9ce
1 parent 183999b
commit c7dd9ce
Show file tree

Hide file tree

Showing 2 changed files with 206 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -9,26 +9,49 @@
 </head>
 <body>
     <!-- Navigation Bar 858 -->
-     <div class="w-100% h-12 flex justify-between">
-        <div class="p-4 flex items-center gap-5">
+     <div class="w-100% h-12 flex justify-between min-[858px]:px-14 min-[858px]:justify-start">
+        <div class="p-4 flex items-center gap-5 min-[858px]:hidden">
             <div>
                 <div class="w-6 h-[0.15rem] bg-black rounded-md mb-1"></div>
                 <div class="w-6 h-[0.15rem] bg-black rounded-md mb-1"></div>
                 <div class="w-6 h-[0.15rem] bg-black rounded-md"></div>
             </div>
             <img src="images/search.png" alt="search bar" class="h-4">
         </div>
-        <a href="https://www.microsoft.com/en-in/" class="h-5"><img src="https://imgs.search.brave.com/bfgHsLj8U9GCG1qucI77E-7FRPZVXoyDkZNEA8BIhbA/rs:fit:500:0:0/g:ce/aHR0cHM6Ly93d3cu/Y25ldC5jb20vYS9p/bWcvcmVzaXplLzhj/OWM3NWJmNmEzZTMw/MzEwYmZmMGNjNGM1/ZTViMGUxYzJlNmE1/ODIvaHViLzIwMTIv/MDgvMjMvYjAzMWEz/ZTQtZjBlNy0xMWUy/LThjN2MtZDRhZTUy/ZTYyYmNjL01pY3Jv/c29mdF9uZXdfbG9n/by5qcGc_YXV0bz13/ZWJwJndpZHRoPTEy/MDA" alt="Microsoft Logo" class="h-14" ></a>
-        <div class="p-4 flex items-center gap-5">
-            <img src="images/shopping-cart.png" alt="shopping-cart" class="h-4 ml-4">
-            <img src="images/user.png" alt="user" class="h-6 ml-4">
+        <a href="https://www.microsoft.com/en-in/" class="h-5 min-[858px]:pr-3"><img src="https://imgs.search.brave.com/bfgHsLj8U9GCG1qucI77E-7FRPZVXoyDkZNEA8BIhbA/rs:fit:500:0:0/g:ce/aHR0cHM6Ly93d3cu/Y25ldC5jb20vYS9p/bWcvcmVzaXplLzhj/OWM3NWJmNmEzZTMw/MzEwYmZmMGNjNGM1/ZTViMGUxYzJlNmE1/ODIvaHViLzIwMTIv/MDgvMjMvYjAzMWEz/ZTQtZjBlNy0xMWUy/LThjN2MtZDRhZTUy/ZTYyYmNjL01pY3Jv/c29mdF9uZXdfbG9n/by5qcGc_YXV0bz13/ZWJwJndpZHRoPTEy/MDA" alt="Microsoft Logo" class="h-14" ></a>
+        <div class="flex items-center min-[858px]:justify-between min-[858px]:w-full">
+            <div class="border-l-2 border-black pl-6 hidden min-[858px]:block">
+                <div class="flex items-center gap-4">
+                    <img src="images/xbox.png" alt="xbox" class="h-6">
+                    <span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Game Pass &vee;</span>
+                    <span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Games &vee;</span>
+                    <span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Devices &vee;</span>
+                    <span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Play &vee;</span>
+                    <span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Store &vee;</span>
+                    <span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Community &vee;</span>
+                    <span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">Support &vee;</span>
+                    <span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">My Xbox &vee;</span>
+                    <span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">More &vee;</span>
+                </div>
+            </div>
+            <div class="p-4 flex items-center gap-3"> 
+                <div class=" hidden min-[858px]:flex gap-3">
+                    <span class="text-[0.8rem] text-slate-800 hover:border-b-[3px] hover:border-black cursor-pointer">All Microsoft &vee;</span>
+                    <span class="text-[0.8rem] hover:border-b-[3px] hover:border-black cursor-pointer">Search</span>
+                    <img src="images/search.png" alt="search bar" class="h-4">
+                </div>
+                <span class="text-[0.8rem] hidden min-[858px]:inline-block  hover:border-b-[3px] hover:border-black cursor-pointer">Cart</span>
+                <img src="images/shopping-cart.png" alt="shopping-cart" class="h-4">
+                <span class="text-[0.8rem] hidden min-[858px]:inline-block  hover:border-b-[3px] hover:border-black cursor-pointer">Sign in</span>
+                <img src="images/user.png" alt="user" class="h-6 ml-4">
+            </div>
         </div>
      </div>
      <hr>
-     <!-- End -->
+    <!-- End -->
 
     <!-- xbox -->
-     <div class="h-8 flex items-center p-4">
+     <div class="h-8 flex items-center p-4 min-[858px]:hidden">
         <img src="images/xbox.png" alt="xbox" class="h-6 p-1 m-0">
      </div>
      <hr>

diff --git a/output.css b/output.css
@@ -616,6 +616,10 @@ video {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -676,6 +680,24 @@ video {
   width: 100%;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
+.rotate-90 {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -708,10 +730,35 @@ video {
   gap: 1.25rem;
 }
 
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
 
+.border {
+  border-width: 1px;
+}
+
+.border-l-2 {
+  border-left-width: 2px;
+}
+
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .bg-\[\#9bf00b\] {
   --tw-bg-opacity: 1;
   background-color: rgb(155 240 11 / var(--tw-bg-opacity));
@@ -828,10 +875,23 @@ video {
   padding-bottom: 0.25rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .pl-5 {
   padding-left: 1.25rem;
 }
 
+.pl-7 {
+  padding-left: 1.75rem;
+}
+
+.pl-6 {
+  padding-left: 1.5rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -866,6 +926,15 @@ video {
   line-height: 1.25rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.text-\[0\.8rem\] {
+  font-size: 0.8rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -896,4 +965,110 @@ video {
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-\[0\.8re\] {
+  color: 0.8re;
+}
+
+.text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity));
+}
+
+.text-slate-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 41 59 / var(--tw-text-opacity));
+}
+
+.hover\:border-b:hover {
+  border-bottom-width: 1px;
+}
+
+.hover\:border-b-2:hover {
+  border-bottom-width: 2px;
+}
+
+.hover\:border-b-4:hover {
+  border-bottom-width: 4px;
+}
+
+.hover\:border-b-\[3px\]:hover {
+  border-bottom-width: 3px;
+}
+
+.hover\:border-black:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.hover\:border-b-\[\]:hover {
+  border-bottom-color: ;
+}
+
+@media (max-width: 858px) {
+  .max-\[858px\]\:hidden {
+    display: none;
+  }
+}
+
+@media (min-width: 858px) {
+  .min-\[858px\]\:block {
+    display: block;
+  }
+
+  .min-\[858px\]\:inline-block {
+    display: inline-block;
+  }
+
+  .min-\[858px\]\:flex {
+    display: flex;
+  }
+
+  .min-\[858px\]\:hidden {
+    display: none;
+  }
+
+  .min-\[858px\]\:w-full {
+    width: 100%;
+  }
+
+  .min-\[858px\]\:items-center {
+    align-items: center;
+  }
+
+  .min-\[858px\]\:justify-start {
+    justify-content: flex-start;
+  }
+
+  .min-\[858px\]\:justify-between {
+    justify-content: space-between;
+  }
+
+  .min-\[858px\]\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .min-\[858px\]\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .min-\[858px\]\:px-14 {
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
+  }
+
+  .min-\[858px\]\:pr-6 {
+    padding-right: 1.5rem;
+  }
+
+  .min-\[858px\]\:pr-4 {
+    padding-right: 1rem;
+  }
+
+  .min-\[858px\]\:pr-3 {
+    padding-right: 0.75rem;
+  }
 }