Navigation Completed

shoaibansari5398 · shoaibansari5398 · commit eb00ca0ee619 · 2023-01-23T22:33:17.000+05:30
diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html
@@ -16,7 +16,15 @@
   <body>
     <header class="header">
       <img class="logo" src="./content/img/omnifood-logo.png" alt="omnifood-logo ">
-      <nav class="main-nav">Navigation</nav>
+      <nav class="main-nav">
+        <ul class="main-nav-list">
+          <li><a class="main-nav-link" href="#">Section 1</a></li>
+          <li><a class="main-nav-link" href="#">Section 2</a></li>
+          <li><a class="main-nav-link" href="#">Section 3</a></li>
+          <li><a class="main-nav-link" href="#">Section 4</a></li>
+          <li><a class="main-nav-link nav-cta" href="#">Section 5</a></li>
+        </ul>
+      </nav>
     </header>
     <main>
     <section class="section-hero">
diff --git a/starter/07-Omnifood-Desktop/style.css b/starter/07-Omnifood-Desktop/style.css
@@ -135,4 +135,42 @@ body {
 }
 .logo{
     height: 2.2rem;
+}
+
+/* Navgation */
+
+.main-nav-list{
+    list-style: none;
+    display: flex;
+    gap: 3.2rem;
+    align-items: center;
+}
+
+.main-nav-link:link,
+.main-nav-link:visited
+{
+    color: #333;
+    font-size: 1.8rem;
+    font-weight: 500;
+    transform: all 0.3s;
+    text-decoration: none;
+    display: inline-block;
+}
+
+.main-nav-link:hover,
+.main-nav-link:active {
+  color: #cf711f;
+}
+
+.main-nav-link.nav-cta:link,
+.main-nav-link.nav-cta:visited {
+  padding: 1.2rem 2.4rem;
+  border-radius: 9px;
+  color: #fff;
+  background-color: #e67e22;
+}
+
+.main-nav-link.nav-cta:hover,
+.main-nav-link.nav-cta:active {
+  background-color: #cf711f;
 }
