section-7: Navigation

Author: owen-webb

starter/07-Omnifood-Desktop/css/style.css

@@ -7,9 +7,14 @@ FONT SIZE SYSTEM (px)
 
 FONT WEIGHTS
 Default: 400
+Medium: 500
+Semi-bold: 600
+Bold: 700
 
 LINE HEIGHTS
 Default: 1
+Small: 1.05
+Paragraph default: 1.6
 
 --- COLORS
 
@@ -24,7 +29,7 @@ Greys: #555, #333
 
 
 -- BORDER RADIUS
-
+Default: 0.9rem
 
 --- WHITE SPACE
 
@@ -110,6 +115,41 @@ body {
   height: 2.2rem;
 }
 
+
+/*** NAVIGATION ***/
+
+.main-nav-link:link, .main-nav-link:visited {
+  color: #333;
+  display: inline-block;
+  font-size: 1.8rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 300ms;
+}
+
+.main-nav-link:hover, .main-nav-link:active {
+  color: #cf711f;
+}
+
+.main-nav-list {
+  align-items: center;
+  display: flex;
+  gap: 3.2rem;
+  list-style: none;
+}
+
+.main-nav-link.nav-cta:link, .main-nav-link.nav-cta:visited {
+  background-color: #e67e22;
+  border-radius: 0.9rem;
+  color: #fff;
+  padding: 1.2rem 2.4rem;
+}
+
+.main-nav-link.nav-cta:hover, .main-nav-link.nav-cta:active {
+  background-color: #cf711f;
+}
+
+
 /*** HERO ***/
 
 .delivered-imgs {

starter/07-Omnifood-Desktop/index.html

@@ -18,7 +18,15 @@
     <!-- HEADER -->
     <header class="header">
       <img src="img/omnifood-logo.png" alt="Omnifood logo." class="logo">
-      <nav class="min-nav">Navigation</nav>
+      <nav class="min-nav">
+        <ul class="main-nav-list">
+          <li><a href="#" class="main-nav-link">Section 1</a></li>
+          <li><a href="#" class="main-nav-link">Section 2</a></li>
+          <li><a href="#" class="main-nav-link">Section 3</a></li>
+          <li><a href="#" class="main-nav-link">Section 4</a></li>
+          <li><a href="#" class="main-nav-link nav-cta">Section 5</a></li>
+        </ul>
+      </nav>
     </header>
 
     <main>