add fix_2 mentor`s review

mate-academy · Oct 30, 2024 · 99ca63b · 99ca63b
1 parent ee817ba
commit 99ca63b
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 110 deletions.
diff --git a/src/index.html b/src/index.html
@@ -1,4 +1,3 @@
-<!-- #region head -->
 <!doctype html>
 <html lang="en">
   <head>
@@ -21,10 +20,8 @@
       href="styles/index.scss"
     />
   </head>
-  <!-- #endregion -->
 
   <body>
-    <!-- #region header -->
     <header class="header">
       <a
         href="#"
@@ -98,8 +95,7 @@
         </ul>
       </nav>
     </header>
-    <!-- #endregion -->
-    <!-- #region main -->
+
     <main class="cards-catalog">
       <div
         class="card"
@@ -111,11 +107,11 @@
           alt="iMac 27"
         />
 
-        <h1 class="card__title">
+        <h2 class="card__title">
           APPLE A1419 iMac 27" Retina
           <br />
           5K Monoblock (MNED2UA/A)
-        </h1>
+        </h2>
 
         <h3 class="card__product-id">Product code: 195434</h3>
 
@@ -142,18 +138,19 @@ <h3 class="card__product-id">Product code: 195434</h3>
           BUY
         </a>
       </div>
+
       <div class="card">
         <img
           src="images/imac.jpeg"
           class="card__image"
           alt="iMac 27"
         />
 
-        <h1 class="card__title">
+        <h2 class="card__title">
           APPLE A1419 iMac 27" Retina
           <br />
           5K Monoblock (MNED2UA/A)
-        </h1>
+        </h2>
 
         <h3 class="card__product-id">Product code: 195434</h3>
 
@@ -179,18 +176,19 @@ <h3 class="card__product-id">Product code: 195434</h3>
           BUY
         </a>
       </div>
+
       <div class="card">
         <img
           src="images/imac.jpeg"
           class="card__image"
           alt="iMac 27"
         />
 
-        <h1 class="card__title">
+        <h2 class="card__title">
           APPLE A1419 iMac 27" Retina
           <br />
           5K Monoblock (MNED2UA/A)
-        </h1>
+        </h2>
 
         <h3 class="card__product-id">Product code: 195434</h3>
 
@@ -216,18 +214,19 @@ <h3 class="card__product-id">Product code: 195434</h3>
           BUY
         </a>
       </div>
+
       <div class="card">
         <img
           src="images/imac.jpeg"
           class="card__image"
           alt="iMac 27"
         />
 
-        <h1 class="card__title">
+        <h2 class="card__title">
           APPLE A1419 iMac 27" Retina
           <br />
           5K Monoblock (MNED2UA/A)
-        </h1>
+        </h2>
 
         <h3 class="card__product-id">Product code: 195434</h3>
 
@@ -253,18 +252,19 @@ <h3 class="card__product-id">Product code: 195434</h3>
           BUY
         </a>
       </div>
+
       <div class="card">
         <img
           src="images/imac.jpeg"
           class="card__image"
           alt="iMac 27"
         />
 
-        <h1 class="card__title">
+        <h2 class="card__title">
           APPLE A1419 iMac 27" Retina
           <br />
           5K Monoblock (MNED2UA/A)
-        </h1>
+        </h2>
 
         <h3 class="card__product-id">Product code: 195434</h3>
 
@@ -290,18 +290,19 @@ <h3 class="card__product-id">Product code: 195434</h3>
           BUY
         </a>
       </div>
+
       <div class="card">
         <img
           src="images/imac.jpeg"
           class="card__image"
           alt="iMac 27"
         />
 
-        <h1 class="card__title">
+        <h2 class="card__title">
           APPLE A1419 iMac 27" Retina
           <br />
           5K Monoblock (MNED2UA/A)
-        </h1>
+        </h2>
 
         <h3 class="card__product-id">Product code: 195434</h3>
 
@@ -327,18 +328,19 @@ <h3 class="card__product-id">Product code: 195434</h3>
           BUY
         </a>
       </div>
+
       <div class="card">
         <img
           src="images/imac.jpeg"
           class="card__image"
           alt="iMac 27"
         />
 
-        <h1 class="card__title">
+        <h2 class="card__title">
           APPLE A1419 iMac 27" Retina
           <br />
           5K Monoblock (MNED2UA/A)
-        </h1>
+        </h2>
 
         <h3 class="card__product-id">Product code: 195434</h3>
 
@@ -364,18 +366,19 @@ <h3 class="card__product-id">Product code: 195434</h3>
           BUY
         </a>
       </div>
+
       <div class="card">
         <img
           src="images/imac.jpeg"
           class="card__image"
           alt="iMac 27"
         />
 
-        <h1 class="card__title">
+        <h2 class="card__title">
           APPLE A1419 iMac 27" Retina
           <br />
           5K Monoblock (MNED2UA/A)
-        </h1>
+        </h2>
 
         <h3 class="card__product-id">Product code: 195434</h3>
 
@@ -402,6 +405,5 @@ <h3 class="card__product-id">Product code: 195434</h3>
         </a>
       </div>
     </main>
-    <!-- #endregion -->
   </body>
 </html>
diff --git a/src/styles/blocks/cards.scss → src/styles/blocks/card.scss b/src/styles/blocks/cards.scss → src/styles/blocks/card.scss
@@ -1,32 +1,3 @@
-.cards-catalog {
-  --column-count: 1;
-
-  display: grid;
-  grid-template-columns: repeat(var(--column-count), 200px);
-  padding: 50px 40px;
-  gap: 46px 48px;
-  justify-content: center;
-  align-items: center;
-}
-
-@media (min-width: 488px) {
-  .cards-catalog {
-    --column-count: 2;
-  }
-}
-
-@media (min-width: 768px) {
-  .cards-catalog {
-    --column-count: 3;
-  }
-}
-
-@media (min-width: 1024px) {
-  .cards-catalog {
-    --column-count: 4;
-  }
-}
-
 .card {
   font-family: $font-family;
   border: 1px solid $grey-accent-color;
@@ -58,7 +29,6 @@
     font-weight: 500;
     font-size: 12px;
     line-height: 18px;
-    text-align: left;
     transition: color 300ms ease;
   }
 
@@ -74,34 +44,32 @@
     font-weight: 400;
     font-size: 10px;
     line-height: 14px;
-    text-align: left;
   }
 
   &__price {
     display: flex;
     margin-top: 24px;
     align-items: center;
     justify-content: space-between;
-  }
 
-  &__price-value {
-    margin: 0;
-    font-family: $font-family;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 18px;
-    text-align: left;
-    color: $secondary-accent-color;
-  }
+    &-value {
+      margin: 0;
+      font-family: $font-family;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+      color: $secondary-accent-color;
+    }
 
-  &__price-total {
-    margin: 0;
-    font-family: $font-family;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 18px;
-    text-align: right;
-    color: $main-accent-color;
+    &-total {
+      margin: 0;
+      font-family: $font-family;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 18px;
+      text-align: right;
+      color: $main-accent-color;
+    }
   }
 
   &__button {
@@ -124,10 +92,10 @@
     transition:
       background-color 300ms ease,
       color 300ms ease;
-  }
 
-  &__button:hover {
-    background-color: $white-accent-color;
-    color: $blue-accent-color;
+    &:hover {
+      background-color: $white-accent-color;
+      color: $blue-accent-color;
+    }
   }
 }
diff --git a/src/styles/blocks/cards-catalog.scss b/src/styles/blocks/cards-catalog.scss
@@ -0,0 +1,28 @@
+.cards-catalog {
+  --column-count: 1;
+
+  display: grid;
+  grid-template-columns: repeat(var(--column-count), 200px);
+  padding: 50px 40px;
+  gap: 46px 48px;
+  justify-content: center;
+  align-items: center;
+}
+
+@media (min-width: 488px) {
+  .cards-catalog {
+    --column-count: 2;
+  }
+}
+
+@media (min-width: 768px) {
+  .cards-catalog {
+    --column-count: 3;
+  }
+}
+
+@media (min-width: 1024px) {
+  .cards-catalog {
+    --column-count: 4;
+  }
+}
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -42,26 +42,26 @@
     text-transform: uppercase;
     margin-left: 20px;
     transition: color 300ms ease;
-  }
 
-  &__link:hover {
-    color: $blue-accent-color;
-  }
+    &:hover {
+      color: $blue-accent-color;
+    }
 
-  &__link.is-active {
-    color: $blue-accent-color;
-    margin-left: 0;
-  }
+    &.is-active {
+      color: $blue-accent-color;
+      margin-left: 0;
+    }
 
-  &__link.is-active::after {
-    content: '';
-    display: flex;
-    position: absolute;
-    width: 100%;
-    left: 0;
-    bottom: 0;
-    height: 4px;
-    background-color: $blue-accent-color;
-    border-radius: 8px;
+    &.is-active::after {
+      content: '';
+      display: flex;
+      position: absolute;
+      width: 100%;
+      left: 0;
+      bottom: 0;
+      height: 4px;
+      background-color: $blue-accent-color;
+      border-radius: 8px;
+    }
   }
 }