add task solution

mate-academy · Oct 11, 2024 · 3abc588 · 3abc588
1 parent 3593d76
commit 3abc588
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 74 deletions.
diff --git a/src/index.html b/src/index.html
@@ -9,65 +9,96 @@
     <title>Document</title>
   </head>
   <body>
-    <header class="header">
-      <a
-        class="aimg"
-        href="logo"
-      >
-        <img
-          src="moyo_1.png"
-          alt="logo"
-        />
-      </a>
+    <h1>Moyo header!!!</h1>
+    <header>
+      <ul class="logo-list">
+        <li class="logo-item">
+          <a
+            class="logo-link"
+            href="#"
+          >
+            <img
+              alt="Company logo"
+              src="https://s3-alpha-sig.figma.com/img/833f/9aab/47d660efd384318772b6b8040db831aa?Expires=1729468800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=CpNPdHLAd0TqrbVi2fnmHIbiEMpLU~AlGpVPmwKvXYnW7wbwafsxiNM914Hmb6ZjkkIgG2AEoQjWEpFsqHdqMNbT1ZvJyALGARF5kopPOVq6chD94e4utrdyVZyDxokK~Jsju8hQHpKETOw42WSd4juAWcLmk4Ms82s9zt717fw~1Kp6ZXJcPqPcf5xA7FYIsaFHC7fVKDRWC5CZu8hE8A-y2noHVVu7DxDKR9Ryz-mUIu0IBIDQwgGOoUSWyzjk~W9gBg3VdZrM1hJ0qYFLZxUyINRWjcT8k-T69WtxO3UbdZKqT6dy71ES97C9Q3UAU5zRiyvu-q1ZttskIC2oow__"
+            />
+          </a>
+        </li>
+      </ul>
+
       <nav class="nav">
-        <a
-          class="nav_link is_active"
-          href="1"
-        >
-          Apple
-        </a>
-        <a
-          class="nav_link"
-          href="2"
-        >
-          Samsung
-        </a>
-        <a
-          class="nav_link"
-          href="3"
-        >
-          Smartphones
-        </a>
-        <a
-          class="nav_link La"
-          href="4"
-        >
-          Laptops & Computers
-        </a>
-        <a
-          class="nav_link"
-          href="5"
-        >
-          Gadgets
-        </a>
-        <a
-          class="nav_link"
-          href="6"
-        >
-          Tablets
-        </a>
-        <a
-          class="nav_link"
-          href="7"
-        >
-          Photo
-        </a>
-        <a
-          class="nav_link"
-          href="8"
-        >
-          Video
-        </a>
+        <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="#"
+            >
+              Laptop&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>
   </body>

diff --git a/src/style.css b/src/style.css
@@ -1,32 +1,66 @@
 body {
-  background-color: #858585;
-  font-family: Roboto, sans-serif;
   margin: 0;
+  font-family: Roboto, sans-serif, Arial;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 12px;
 }
 
-.nav {
-  justify-content: flex-end;
-  font-size: 15px;
-  background-color: #fff;
+header {
+  margin: 10px 0 0;
   display: flex;
+  justify-content: center;
   align-items: center;
 }
 
-.nav__link {
-  padding: 25px;
-  text-decoration: none;
+.logo-link {
+  text-align: center;
 }
 
-.aimg {
-  position: absolute;
-  margin-top: 10px;
-  margin-left: 50px;
+a.is-active {
+  color: #00acdc;
+  text-decoration: underline;
+  position: relative;
 }
 
-.is_active::after {
+.is-active::after {
   content: '';
+  position: absolute;
+  top: 30px;
+  left: 0;
+  width: 37px;
   height: 4px;
-  background-color: black;
-  display: block;
+  border-radius: 8px;
+  background-color: #00acdc;
+}
+
+nav {
+  height: 60px;
+  background-color: #fff;
+}
+
+.logo-list {
+  list-style: none;
+}
+
+.nav__list {
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.nav__item {
+  text-transform: uppercase;
+  margin-left: 20px;
+}
+
+.nav__link {
+  text-decoration: none;
+  color: #000;
+  font-weight: bold;
+}
+
+.nav__link:hover {
   color: #00acdc;
 }