add header menu

mafSida · Oct 8, 2024 · 92c137c · 92c137c
1 parent 5e92af7
commit 92c137c
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 9 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,83 @@
+body {
+  font-family: "Nunito", sans-serif;
+  background-color: #f3f3f3;
+}
+
+ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.container {
+  background-color: #ffffff;
+  max-width: 1188px;
+  margin: 0 auto;
+}
+
+.header {
+}
+
+.header .container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32px;
+}
+
+.nav-menu {
+  display: flex;
+  align-items: center;
+}
+.logo-link {
+  display: flex;
+  margin-right: 20px;
+}
+.header-logo {
+}
+.second {
+  transform: rotate(90deg);
+}
+.nav-list {
+  display: inline-flex;
+  align-items: center;
+  gap: 20px;
+  font-weight: 700;
+  font-size: 20px;
+}
+
+.accent {
+  color: rgb(255, 118, 77);
+}
+
+.nav-item {
+}
+
+.nav-link .accent {
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+}
+.plus-icon {
+  fill: rgb(255, 118, 77);
+  margin-left: 4px;
+}
+.side-menu-list {
+  display: flex;
+  gap: 14px;
+}
+.side-menu-item {
+}
+.side-menu-link {
+  font-weight: 700;
+}
+
+.accent-2 {
+  color: rgb(0, 0, 255);
+}
diff --git a/img/icons.svg b/img/icons.svg
diff --git a/index.html b/index.html
@@ -1,12 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Ableton</title>
-    <link rel="stylesheet" href="./css/styles.css">
-</head>
-<body>
-
-</body>
-</html>
+    <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=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/3.0.1/modern-normalize.min.css"
+    />
+    <link rel="stylesheet" href="./css/styles.css" />
+  </head>
+  <body>
+    <header class="header">
+      <div class="container">
+        <nav class="nav-menu">
+          <a class="logo-link" href="#">
+            <svg class="header-logo" width="28" height="28">
+              <use href="./img/icons.svg#lines-icon"></use>
+            </svg>
+            <svg class="header-logo second" width="28" height="28">
+              <use href="./img/icons.svg#lines-icon"></use>
+            </svg>
+          </a>
+          <ul class="nav-list">
+            <li class="nav-item"><a href="#" class="nav-link">Live</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">Push</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">Shop</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">Packs</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">Help</a></li>
+            <li class="nav-item">
+              <a href="#" class="nav-link accent"
+                >More
+                <svg class="plus-icon" width="20" height="20">
+                  <use href="./img/icons.svg#plus-icon"></use>
+                </svg>
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <ul class="side-menu-list">
+          <li class="side-menu-item">
+            <a href="#" class="side-menu-link accent-2">Try Live for free</a>
+          </li>
+          <li class="side-menu-item">
+            <a href="#" class="side-menu-link">Account</a>
+          </li>
+          <li class="side-menu-item">
+            <a href="#" class="side-menu-link">Log out</a>
+          </li>
+        </ul>
+      </div>
+    </header>
+    <main></main>
+    <footer></footer>
+  </body>
+</html>