feature: created navbar for webpage

5d5fff28 · Ahmet Adem · 0da7c728 · 5d5fff28 · 5d5fff28
Commit 5d5fff28 authored 10 months ago by Ahmet Adem
Hide whitespace changes
Inline Side-by-side

Showing

with 54 additions and 1 deletion
+54 -1
--- a/index.html
+++ b/index.html
@@ -6,5 +6,20 @@
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
  </head>
-  <body></body>
+  <body>
+    <div class="menu">
+      <div class="inner">
+        <a href="./index.html" class="logo">
+          <img src="./images/logo.jpg" alt="logo"
+        /></a>
+
+        <ul>
+          <li><a href="#">Home</a></li>
+          <li><a href="#">About us</a></li>
+          <li><a href="#">Articles</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+      </div>
+    </div>
+  </body>
 </html>
--- a/style.css
+++ b/style.css
@@ -22,3 +22,41 @@ ul {
 img {
  max-width: 100%;
 }
+
+.inner {
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.menu {
+  background-color: rgb(195, 141, 150);
+  padding: 5px 0;
+}
+
+.menu .inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.menu .inner .logo {
+  display: inline-block;
+  width: 70px;
+}
+
+.menu ul {
+  display: flex;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.menu ul li:not(:last-child) {
+  margin-right: 30px;
+}
+
+.menu ul li a {
+  text-decoration: none;
+  color: white;
+}