Work on navigation menu

nikonst · nikonst · commit 610d0bdae49f · 2024-03-29T09:47:07.000+02:00
diff --git a/tailwind/Example2/dist/img/logo.JPG b/tailwind/Example2/dist/img/logo.JPG
diff --git a/tailwind/Example2/dist/index.html b/tailwind/Example2/dist/index.html
@@ -9,8 +9,21 @@
 </head>
 
 <body>
-    <nav class="relative container mx-auto p-8">
-        <div class="flex items-center justify-between">Logo</div>
+    <nav class="relative container mx-auto p-3">
+        <div class="flex items-center justify-between">
+            <!-- Logo -->
+            <img src="./img/logo.JPG" alt="Logo">
+            <!-- menu items-->
+            <div class="hidden md:flex space-x-6">
+                <a href="#" class="hover:text-darkGrayishBlue">Pricing</a>
+                <a href="#" class="hover:text-darkGrayishBlue">Services</a>
+                <a href="#" class="hover:text-darkGrayishBlue">About Us</a>
+                <a href="#" class="hover:text-darkGrayishBlue">Careers</a>
+                <a href="#" class="hover:text-darkGrayishBlue">Contact</a>
+            </div>
+            <a href="#" class="p-3 px-6 pt-2 text-white bg-brightRed rounded-full hover:bg-brightRedLight">Sign Up</a>
+
+        </div>
     </nav>
 
 </html>
diff --git a/tailwind/Example2/dist/styles.css b/tailwind/Example2/dist/styles.css
@@ -595,6 +595,10 @@ video {
   display: flex;
 }
 
+.hidden {
+  display: none;
+}
+
 .items-center {
   align-items: center;
 }
@@ -603,6 +607,22 @@ video {
   justify-content: space-between;
 }
 
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .bg-blue-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
@@ -613,6 +633,57 @@ video {
   background-color: rgb(30 58 138 / var(--tw-bg-opacity));
 }
 
+.bg-brightRed {
+  --tw-bg-opacity: 1;
+  background-color: hsl(12 88% 59% / var(--tw-bg-opacity));
+}
+
 .p-8 {
   padding: 2rem;
 }
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.hover\:bg-brightRedLight:hover {
+  --tw-bg-opacity: 1;
+  background-color: hsl(12 88% 69% / var(--tw-bg-opacity));
+}
+
+.hover\:text-darkGrayishBlue:hover {
+  --tw-text-opacity: 1;
+  color: hsl(227 12% 61% / var(--tw-text-opacity));
+}
+
+@media (min-width: 768px) {
+  .md\:block {
+    display: block;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+}
