Add navigation of header.

quechau · quechau · commit f58e15e65a35 · 2023-11-01T21:00:20.000+07:00
diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css
@@ -7,11 +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
 
 --- 02 COLORS
 
@@ -27,6 +30,8 @@ Default: 1
 
 --- 06 BORDER-RADIUS
 
+Default: 9px
+
 --- 07 WHITESPACE
 SPACING SYSTEM (px)
       2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
@@ -127,6 +132,44 @@ body {
   height: 2.2rem;
 }
 
+/***************************/
+/* NAVIGATION */
+/***************************/
+.main-nav-list {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 3.2rem;
+}
+
+.main-nav-link:link,
+.main-nav-link:visited {
+  display: inline-block;
+  text-decoration: none;
+  color: #333;
+  font-weight: 500;
+  font-size: 1.8rem;
+  transition: all 0.3s;
+}
+
+.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;
+}
+
 /***************************/
 /* HERO SECTION */
 /***************************/
diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html
@@ -17,7 +17,15 @@
   <body>
     <header class="header">
       <img src="img/omnifood-logo.png" alt="Omnifood logo" class="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>
