add task solution

mate-academy · Dec 28, 2024 · c65a9a0 · c65a9a0
1 parent 1095bf3
commit c65a9a0
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 109 deletions.
diff --git a/src/index.html b/src/index.html
@@ -15,11 +15,7 @@
       href="https://fonts.googleapis.com"
     />
     <link
-      rel="preconnect"
-      href="https://fonts.gstatic.com"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Bellefair&family=Roboto:wght@400;500&family=Yuji+Boku&display=swap"
       rel="stylesheet"
     />
     <title>Moyo header</title>
@@ -29,86 +25,88 @@
     />
   </head>
   <body>
-    <header class="header">
-      <a
-        href="#"
-        class="logo"
-      >
-        <img
-          src="images/logo.png"
-          alt="moyo logo"
-          class="logo_img"
-        />
-      </a>
-      <nav class="nav">
-        <ul class="nav__list">
-          <li class="nav__item">
-            <a
-              class="nav__link is-active"
-              href="#"
-            >
-              Apple
-            </a>
-          </li>
-          <li class="nav__item">
-            <a
-              class="nav__link"
-              href="#"
-            >
-              Samsung
-            </a>
-          </li>
-          <li class="nav__item">
-            <a
-              class="nav__link"
-              href="#"
-            >
-              Smartphones
-            </a>
-          </li>
-          <li class="nav__item">
-            <a
-              class="nav__link"
-              href="#"
-              data-qa="hover"
-            >
-              Laptops & Computers
-            </a>
-          </li>
-          <li class="nav__item">
-            <a
-              class="nav__link"
-              href="#"
-            >
-              Gadgets
-            </a>
-          </li>
-          <li class="nav__item">
-            <a
-              class="nav__link"
-              href="#"
-            >
-              Tablets
-            </a>
-          </li>
-          <li class="nav__item">
-            <a
-              class="nav__link"
-              href="#"
-            >
-              Photo
-            </a>
-          </li>
-          <li class="nav__item">
-            <a
-              class="nav__link"
-              href="#"
-            >
-              Video
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </header>
+    <div class="container">
+      <header class="header">
+        <a
+          href="#"
+          class="logo"
+        >
+          <img
+            src="images/logo.png"
+            alt="MOYO logo"
+            class="logo__img"
+          />
+        </a>
+        <nav class="nav">
+          <ul class="nav__list">
+            <li class="nav__item">
+              <a
+                href="#"
+                class="nav__link is-active"
+              >
+                Apple
+              </a>
+            </li>
+            <li class="nav__item">
+              <a
+                href="#"
+                class="nav__link"
+              >
+                Samsung
+              </a>
+            </li>
+            <li class="nav__item">
+              <a
+                href="#"
+                class="nav__link"
+              >
+                Smartphones
+              </a>
+            </li>
+            <li class="nav__item">
+              <a
+                href="#"
+                class="nav__link"
+                data-qa="hover"
+              >
+                Laptops & Computers
+              </a>
+            </li>
+            <li class="nav__item">
+              <a
+                href="#"
+                class="nav__link"
+              >
+                Gadgets
+              </a>
+            </li>
+            <li class="nav__item">
+              <a
+                href="#"
+                class="nav__link"
+              >
+                Tablets
+              </a>
+            </li>
+            <li class="nav__item">
+              <a
+                href="#"
+                class="nav__link"
+              >
+                Photo
+              </a>
+            </li>
+            <li class="nav__item">
+              <a
+                href="#"
+                class="nav__link"
+              >
+                Video
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </header>
+    </div>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1,55 +1,73 @@
-body {
-  --main-color: #00acdc;
+a {
+  text-decoration: none;
+  color: inherit;
+}
 
-  font-family: Roboto, sans-serif;
+ul,
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  --blue: #00acdc;
+}
+
+body {
   margin: 0;
+  font-family: Roboto, sans-serif;
+  font-size: 12px;
+  background-color: #eee;
+  font-weight: 500;
 }
 
 .header {
-  padding: 0 50px;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  padding: 0 50px;
+  background-color: #fff;
 }
 
 .logo {
-  display: block;
+  display: flex;
+  align-items: center;
+}
+
+.nav {
+  text-transform: uppercase;
 }
 
 .nav__list {
   display: flex;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  gap: 20px;
+}
+
+.nav__item:not(:first-child) {
+  margin-left: 20px;
 }
 
 .nav__link {
-  display: block;
-  text-transform: uppercase;
-  font-weight: 500;
-  font-size: 12px;
-  text-decoration: none;
-  padding: 23px 0;
-  color: #000;
-  position: relative;
+  display: flex;
+  align-items: center;
+  height: 60px;
 }
 
 .nav__link:hover {
-  color: var(--main-color);
+  color: var(--blue);
 }
 
 .is-active {
-  color: var(--main-color);
+  color: var(--blue);
+  position: relative;
 }
 
 .is-active::after {
   content: '';
-  position: absolute;
   bottom: 0;
   left: 0;
-  width: 100%;
+  position: absolute;
   height: 4px;
-  background-color: var(--main-color);
+  width: 100%;
+  background-color: var(--blue);
   border-radius: 8px;
 }