navigation links

rameskum · rameskum · commit 96a058ca01e7 · 2022-03-01T00:45:08.000+05:30
Call-to-Action Button on navigation
Listing all padding line height for reference
diff --git a/practice/07 - Omnifood-Desktop/css/style.css b/practice/07 - Omnifood-Desktop/css/style.css
@@ -5,10 +5,15 @@
         10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
 
         - Font Weight:
-        Default: 400
+            Default: 400
+            Medium 500
+            Semi Bold 600
+            Bold 700
 
         - Line Heights:
         Defaults: 1
+        Small: 1.05
+        Paragraph Default: 1.6
 
 
     -- 02 COLORS
@@ -25,6 +30,8 @@
 
     -- 06 BORDER RADIUS
 
+        Default: 9px
+
     -- 07 WHITESPACE
 
         - SPACING SYSTEM (px)
@@ -126,6 +133,45 @@ 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/practice/07 - Omnifood-Desktop/index.html b/practice/07 - Omnifood-Desktop/index.html
@@ -15,7 +15,15 @@
 <body>
 <header class="header">
 	<img alt="Omnifood logo" class="logo" src="img/omnifood-logo.png">
-	<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">
