💡 Build Navbar using CSS Flex

MuhammadShakir-dev · web-flow · commit c520a6c3fc42 · 2023-07-09T23:03:03.000+05:00
diff --git a/Responsive-Navbar.html b/Responsive-Navbar.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Responsive Navbar</title>
+    <!--CSS tag-->
+    <style>
+      body {
+    padding: 0;
+    margin: 0;
+    font-family: 'Oswald', sans-serif;
+  }
+  
+  nav {
+    width: 100%;
+    height: 50px;
+    background-color: #0A2647;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+  }
+  
+  h1 {
+    font-size: 25px;
+    font-weight: 400;
+    align-self: center;
+    color: white;
+  }
+  
+  ul {
+    list-style: none;
+    display: flex;
+    align-items: center;
+  }
+  
+  ul li {
+    font-weight: 300;
+    color: white;
+    margin: 0 30px;
+  }
+
+
+
+    </style>
+
+    <!--Google Fonts Link-->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+
+    <nav>
+        <h1>Shakir.dev</h1>
+        <ul>
+            <li>Home</li>
+            <li>About</li>
+            <li>Services</li>
+            <li>Contact</li>
+        </ul>
+    </nav>
+
+</body>
+
+</html>
