add task solution

BTakhaiev · BTakhaiev · commit 631b25dc144c · 2024-11-27T23:37:02.000+02:00
diff --git a/src/index.html b/src/index.html
@@ -15,19 +15,49 @@
       rel="stylesheet"
       href="./style.css"
     />
-    <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=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" rel="stylesheet">
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin="anonymous"
+    />
+    <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"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <header class="header">
-      <a href="http://127.0.0.1:5500/src/index.html"><img class="img" src="images/logo.png" alt="logo"></a>
+      <a href="http://127.0.0.1:5500/src/index.html">
+        <img
+          class="img"
+          src="images/logo.png"
+          alt="logo"
+        />
+      </a>
       <nav class="nav">
         <ul>
-          <li><a class="is-active" href="#">apple</a></li>
+          <li>
+            <a
+              class="is-active"
+              href="#"
+            >
+              apple
+            </a>
+          </li>
           <li><a href="#">samsung</a></li>
           <li><a href="#">smartphones</a></li>
-          <li><a data-qa="hover" href="#">laptops & computers</a></li>
+          <li>
+            <a
+              data-qa="hover"
+              href="#"
+            >
+              laptops & computers
+            </a>
+          </li>
           <li><a href="#">gadgets</a></li>
           <li><a href="#">tables</a></li>
           <li><a href="#">photo</a></li>
diff --git a/src/style.css b/src/style.css
@@ -1,7 +1,7 @@
 body {
   margin: 0;
-  font-family: "Roboto", sans-serif;
-  font-weight: 400;
+  font-family: Roboto, sans-serif;
+  font-weight: 700;
   font-style: normal;
 }
 
@@ -11,47 +11,50 @@ body {
   background-color: fff;
   justify-content: space-between;
 
-.img {
-  display: block;
-  margin-left: 50px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-.nav {
-  margin-right: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-a {
-  text-decoration: none;
-  color: black;
-}
-
-ul {
-  display: flex;
-  font-size: 12px;
-  list-style: none;
-  text-transform: uppercase;
+  .img {
+    display: block;
+    margin-left: 50px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+  .nav {
+    margin-right: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  a {
+    text-decoration: none;
+    color: black;
+  }
 
+  ul {
+    display: flex;
+    font-size: 12px;
+    list-style: none;
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+  li:not(:last-child) {
+    margin-right: 20px;
+  }
 }
-li:not(:last-child) {
-  margin-right: 20px;
-}
-}
+
 .blue {
-  color: #00ACDC;
+  color: #00acdc;
 }
 
 a:hover {
-  color: #00ACDC;
+  color: #00acdc;
 }
+
 .is-active {
-  color: #00ACDC;
+  color: #00acdc;
   position: relative;
 }
+
 .is-active::after {
-  content: "";
+  content: '';
   position: absolute;
   left: 0;
   bottom: -22.5px;
