add fixes style.css and index.html

mate-academy · Nov 30, 2023 · 9283648 · 9283648
1 parent dd39d4c
commit 9283648
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 65 deletions.
diff --git a/src/index.html b/src/index.html
@@ -4,96 +4,54 @@
     <meta charset="UTF-8">
     <meta
       name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    >
-    <meta
-      http-equiv="X-UA-Compatible"
-      content="ie=edge"
-    >
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Moyo header</title>
-    <link
-      rel="preconnect"
-      href="https://fonts.googleapis.com"
-    >
+    <link rel="preconnect" href="https://fonts.googleapis.com">
     <link
       rel="preconnect"
       href="https://fonts.gstatic.com"
-      crossorigin="anonymous"
-    >
+      crossorigin="anonymous">
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
-      rel="stylesheet"
-    >
-    <link
-      rel="stylesheet"
-      href="./style.css"
-    >
+      rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">
   </head>
   <body>
     <header class="header">
-      <a
-        href="index.html"
-        class="logo"
-      >
-        <img
-          src="images/logo.png"
-          alt="logo"
-        >
+      <a href="index.html" class="logo">
+        <img src="images/logo.png" alt="logo">
       </a>
       <nav class="nav">
         <ul class="nav-list">
           <li class="nav-item">
-            <a
-              href="#apple.html"
-              class="nav-link is-active"
-            >apple</a>
+            <a href="#apple.html" class="nav-link is-active">apple</a>
           </li>
           <li class="nav-item">
-            <a
-              href="#sumsung.html"
-              class="nav-link"
-            >samsung</a>
+            <a href="#samsung.html" class="nav-link">samsung</a>
           </li>
           <li class="nav-item">
-            <a
-              href="#smartphones.html"
-              class="nav-link"
-            >smartphones</a>
+            <a href="#smartphones.html" class="nav-link">smartphones</a>
           </li>
           <li class="nav-item">
-            <a
-              href="#laptops-and-computers.html"
-              class="nav-link"
-              data-qa="hover"
-            >laptops & computers</a>
+            <a href="#laptops-and-computers.html" class="nav-link"
+               data-qa="hover">laptops & computers</a>
           </li>
           <li class="nav-item">
-            <a
-              href="#gadgets.html"
-              class="nav-link"
-            >gadgets</a>
+            <a href="#gadgets.html" class="nav-link">gadgets</a>
           </li>
           <li class="nav-item">
-            <a
-              href="#tablets.html"
-              class="nav-link"
-            >tablets</a>
+            <a href="#tablets.html" class="nav-link">tablets</a>
           </li>
           <li class="nav-item">
-            <a
-              href="#photo.html"
-              class="nav-link"
-            >photo</a>
+            <a href="#photo.html" class="nav-link">photo</a>
           </li>
           <li class="nav-item">
-            <a
-              href="#video.html"
-              class="nav-link"
-            >video</a>
+            <a href="#video.html" class="nav-link">video</a>
           </li>
         </ul>
       </nav>
     </header>
-    <!-- <h1>Moyo header</h1> -->
+    <h1>Moyo header</h1>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1,7 +1,9 @@
+html {
+  --text-color: #00acdc;
+}
+
 body {
   margin: 0;
-
-  --text-color: #00acdc;
 }
 
 .header {
@@ -43,7 +45,6 @@ body {
   height: 60px;
   font-family: Roboto, sans-serif;
   font-size: 12px;
-  font-style: normal;
   font-weight: 500;
   text-transform: uppercase;
 }
@@ -52,12 +53,12 @@ body {
   color: var(--text-color);
 }
 
-.nav-link.is-active {
+.is-active {
   color: var(--text-color);
   position: relative;
 }
 
-.nav-link.is-active::after {
+.is-active::after {
   content: "";
   width: 100%;
   height: 4px;