finish

mate-academy · Dec 9, 2024 · 1274b41 · 1274b41
1 parent e46c983
commit 1274b41
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 28 deletions.
diff --git a/src/index.html b/src/index.html
@@ -108,7 +108,6 @@
       </header>
       <main class="main">
         <section class="cards">
-          <!-- CARD 1 -->
           <article
             class="cards__laptop"
             data-qa="card"
@@ -144,8 +143,6 @@ <h2 class="cards__price-sum">$2,199</h2>
               buy
             </button>
           </article>
-          <!-- END -->
-          <!-- CARD 2 -->
           <article class="cards__laptop">
             <img
               class="cards__laptop-image"
@@ -177,8 +174,6 @@ <h2 class="cards__price-sum">$2,199</h2>
               buy
             </button>
           </article>
-          <!-- END -->
-          <!-- CARD 3 -->
           <article class="cards__laptop">
             <img
               class="cards__laptop-image"
@@ -210,8 +205,6 @@ <h2 class="cards__price-sum">$2,199</h2>
               buy
             </button>
           </article>
-          <!-- END -->
-          <!-- CARD 4 -->
           <article class="cards__laptop">
             <img
               class="cards__laptop-image"
@@ -243,8 +236,6 @@ <h2 class="cards__price-sum">$2,199</h2>
               buy
             </button>
           </article>
-          <!-- END -->
-          <!-- CARD 5 -->
           <article class="cards__laptop">
             <img
               class="cards__laptop-image"
@@ -276,8 +267,6 @@ <h2 class="cards__price-sum">$2,199</h2>
               buy
             </button>
           </article>
-          <!-- END -->
-          <!-- CARD 6 -->
           <article class="cards__laptop">
             <img
               class="cards__laptop-image"
@@ -309,8 +298,6 @@ <h2 class="cards__price-sum">$2,199</h2>
               buy
             </button>
           </article>
-          <!-- END -->
-          <!-- CARD 7 -->
           <article class="cards__laptop">
             <img
               class="cards__laptop-image"
@@ -342,8 +329,6 @@ <h2 class="cards__price-sum">$2,199</h2>
               buy
             </button>
           </article>
-          <!-- END -->
-          <!-- CARD 8 -->
           <article class="cards__laptop">
             <img
               class="cards__laptop-image"
@@ -375,7 +360,6 @@ <h2 class="cards__price-sum">$2,199</h2>
               buy
             </button>
           </article>
-          <!-- END -->
         </section>
       </main>
       <footer></footer>

diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss
@@ -1,13 +1,8 @@
 $fonts: Roboto, sans-serif;
-
-// header
-
 $color__black: #060b35;
 $color__blue: #00acdc;
 $color__white: #fff;
 $color__gray: #616070;
 $header__box-shadow: rgba(0, 0, 0, 0.05);
-
-// main
 $border-color: #f3f3f3;
 $global-radius: 5px;
diff --git a/src/styles/components/_main.scss b/src/styles/components/_main.scss
@@ -12,6 +12,12 @@
   justify-content: center;
   align-items: center;
   padding: 50px 40px;
+
+  &:hover .cards__laptop-titel {
+    transform: scale(1.2);
+    color: #34568b;
+  }
+
   &__laptop {
     width: 200px;
     background-color: var.$color__white;
@@ -21,13 +27,6 @@
     cursor: pointer;
     transition: 0.3s;
 
-    &:hover {
-      transform: scale(1.2);
-      .cards__laptop-titel {
-        color: #34568b;
-      }
-    }
-
     &-image {
       width: 160px;
       height: 134px;
@@ -121,9 +120,11 @@
   @media (min-width: 488px) {
     grid-template-columns: repeat(2, 200px);
   }
+
   @media (min-width: 768px) {
     grid-template-columns: repeat(3, 200px);
   }
+
   @media (min-width: 1024px) {
     grid-template-columns: repeat(4, 200px);
   }