do by checklist

mate-academy · Sep 16, 2024 · 9d915d1 · 9d915d1
1 parent e5e967b
commit 9d915d1
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 95 deletions.
diff --git a/src/index.html b/src/index.html
@@ -4,7 +4,7 @@
  <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"
+ 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"
@@ -16,104 +16,107 @@
  href="./style.css"
  />
  <link
- rel="preconnect"
- href="https://fonts.googleapis.com"
+  rel="preconnect"
+  href="https://fonts.googleapis.com"
  >
  <link
- rel="preconnect"
- href="https://fonts.gstatic.com"
- crossorigin
+  rel="preconnect"
+  href="https://fonts.gstatic.com"
+  crossorigin
  >
  <link
- href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"
- rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"
+  rel="stylesheet"
  >
  <title>Moyo header</title>
  </head>
  <body>
- <div class="wrapper">
- <main class="main">
- <header class="header">
- <a
- href="index.html"
- class="logo"
- >
- <img
+ <header class="header">
+ <a
+ href="#header"
+ class="logo"
+ >
+ <img
  src="images/logo.png"
- alt="moyo-logo"
- />
- </a>
- <nav class="nav">
- <ul class="nav__list">
- <li class="nav_item">
- <a
- class="nav_link is-active"
- href="index.html"
- >
- Apple
- </a>
- </li>
- <li class="nav_item">
- <a
- class="nav_link is-active"
- href="index.html"
- >
- Samsung
+ alt="Moyo-Logo"
+ />
+ </a>
+ <nav class="nav">
+ <ul class="nav__list">
+ <li class="nav__item">
+ <a
+ class="nav__link is-active"
+ href="#header"
+ >
+ Apple
+ </a>
+ </li>
+
+ <li class="nav__item">
+ <a
+ class="nav__link is-active"
+ href="#header"
+ >
+ Samsung
  </a>
  </li>
- <li class="nav_item">
+
+ <li class="nav__item">
  <a
- class="nav_link is-active"
- href="index.html"
+  class="nav__link is-active"
+  href="#header"
  >
  Smartphones
- </a>
- </li>
- <li class="nav_item">
- <a
- class="nav_link is-active"
- href="index.html"
- data-qa="hover"
- >
- Laptops & Computers
- </a>
- </li>
- <li class="nav_item">
- <a
- class="nav_link is-active"
- href="index.html"
- >
- Gadgets
- </a>
- </li>
- <li class="nav_item">
- <a
- class="nav_link is-active"
- href="index.html"
- >
- Tablets
  </a>
  </li>
- <li class="nav_item">
+
+ <li class="nav__item">
  <a
- class="nav_link is-active"
- href="index.html"
+ class="nav__link is-active"
+ href="#header"
+ data-qa="hover"
+ >
+ Laptops & Computers
+ </a>
+ </li>
+
+ <li class="nav__item">
+ <a
+ class="nav__link is-active"
+ href="#header"
+ >
+ Gadgets
+ </a>
+ </li>
+
+ <li class="nav__item">
+ <a
+ class="nav__link is-active"
+ href="#header"
+ >
+ Tablets
+ </a>
+ </li>
+
+ <li class="nav__item">
+ <a
+ class="nav__link is-active"
+ href="#header"
  >
  Photo
- </a>
- </li>
- <li class="nav_item">
- <a
- class="nav_link is-active"
- href="index.html"
- >
- Video
- </a>
- </li>
- </ul>
- </nav>
-</header>
-</main>
-</div>
-</body>
+ </a>
+ </li>
+
+ <li class="nav__item">
+ <a
+ class="nav__link is-active"
+ href="#header"
+ >
+ Video
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </header>
+ </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1,15 +1,9 @@
-/* #region ZERO */
 body{
  padding: 0;
  margin: 0;
  padding-bottom: 2000px;
 }
 
-.wrapper{
- max-width: 1200px;
- margin-left: auto;
- margin-right: auto;
-}
 
 :root{
  --header-height: 60px;
@@ -21,9 +15,6 @@ body{
  font-style: normal;
 }
 
-/* #endregion ZERO */
-
-
 .header {
  display: flex;
  margin: 0 50px;
@@ -49,15 +40,15 @@ body{
  list-style: none;
 }
 
-.nav_item{
+.nav__item{
  transition: all ease-in-out 0.15s;
 }
 
-.nav_item:not(:first-child){
+.nav__item:not(:first-child){
  margin-left: 20px;
 }
 
-.nav_link{
+.nav__link{
  font-weight: 500;
  font-size: 12px;
  height: var(--header-height);
@@ -68,7 +59,7 @@ body{
  color: inherit;
 }
 
-.nav_item:hover {
+.nav__item:hover {
  color: #00ACDC;
 }