add task solution

mate-academy · Nov 12, 2024 · 9904131 · 9904131
1 parent ce3f415
commit 9904131
Show file tree

Hide file tree

Showing 8 changed files with 290 additions and 52 deletions.
diff --git a/src/index.html b/src/index.html
@@ -1,8 +1,5 @@
 <!doctype html>
-<html
-  lang="en"
-  class="page"
->
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta
@@ -24,7 +21,7 @@
     />
   </head>
 
-  <body class="page__body">
+  <body>
     <header class="header">
       <a
         href="#"
@@ -124,7 +121,7 @@
           <img
             class="card__image"
             src="images/imac.jpeg"
-            alt="iMac"
+            alt="iMac A1419"
           />
 
           <h2 class="card__title">
@@ -159,7 +156,7 @@ <h2 class="card__title">
           <img
             class="card__image"
             src="images/imac.jpeg"
-            alt="iMac"
+            alt="iMac A1419"
           />
 
           <h2 class="card__title">
@@ -193,7 +190,7 @@ <h2 class="card__title">
           <img
             class="card__image"
             src="images/imac.jpeg"
-            alt="iMac"
+            alt="iMac A1419"
           />
 
           <h2 class="card__title">
@@ -227,7 +224,7 @@ <h2 class="card__title">
           <img
             class="card__image"
             src="images/imac.jpeg"
-            alt="iMac"
+            alt="iMac A1419"
           />
 
           <h2 class="card__title">
@@ -261,7 +258,7 @@ <h2 class="card__title">
           <img
             class="card__image"
             src="images/imac.jpeg"
-            alt="iMac"
+            alt="iMac A1419"
           />
 
           <h2 class="card__title">
@@ -295,7 +292,7 @@ <h2 class="card__title">
           <img
             class="card__image"
             src="images/imac.jpeg"
-            alt="iMac"
+            alt="iMac A1419"
           />
 
           <h2 class="card__title">
@@ -329,7 +326,7 @@ <h2 class="card__title">
           <img
             class="card__image"
             src="images/imac.jpeg"
-            alt="iMac"
+            alt="iMac A1419"
           />
 
           <h2 class="card__title">
@@ -363,7 +360,7 @@ <h2 class="card__title">
           <img
             class="card__image"
             src="images/imac.jpeg"
-            alt="iMac"
+            alt="iMac A1419"
           />
 
           <h2 class="card__title">

diff --git a/src/styles/card.scss b/src/styles/card.scss
@@ -2,14 +2,6 @@ $main-color: #00acdc;
 $text-accent-color: #060b35;
 
 .card {
-  box-sizing: border-box;
-  width: 200px;
-  border: 1px solid #f3f3f3;
-  border-radius: 5px;
-  padding: 32px 16px 16px;
-  background: #fff;
-  transition: transform 0.3s ease;
-
   &__image {
     display: block;
     margin: 0 auto 40px;
@@ -77,11 +69,13 @@ $text-accent-color: #060b35;
     text-transform: uppercase;
 
     background-color: $main-color;
+    transition:
+      background-color 0.3s,
+      color 0.3s;
 
     &:hover {
       transform: scale(1.2);
-      color: $main-color;
-      background-color: #fff;
+      color: #fff; /* Ensure this contrasts well with the border color */
     }
   }
 }
diff --git a/src/styles/cards.scss b/src/styles/cards.scss
@@ -1,22 +1,20 @@
 .cards {
-  display: flex;
-  flex-wrap: wrap;
-
-  box-sizing: border-box;
-  width: 1024px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 46px 48px;
+  width: 100%;
+  max-width: 1024px;
   margin: 0 auto;
   padding: 50px 40px;
+  box-sizing: border-box;
 
   &__card {
-    margin-right: 48px;
-    margin-bottom: 46px;
-
-    &:nth-child(4n) {
-      margin-right: 0;
-    }
-
-    &:nth-last-child(-n + 4) {
-      margin-bottom: 0;
-    }
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 200px;
+    border: 1px solid #f3f3f3;
+    border-radius: 5px;
+    padding: 32px 16px 16px;
+    background: #fff;
   }
 }