error correction

mate-academy · Jan 11, 2025 · 26c2cdb · 26c2cdb
1 parent 8a99985
commit 26c2cdb
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 104 deletions.
diff --git a/backstop_data/engine_scripts/cookies.json b/backstop_data/engine_scripts/cookies.json
diff --git a/backstop_data/engine_scripts/puppet/clickAndHoverHelper.js b/backstop_data/engine_scripts/puppet/clickAndHoverHelper.js
diff --git a/backstop_data/engine_scripts/puppet/loadCookies.js b/backstop_data/engine_scripts/puppet/loadCookies.js
diff --git a/backstop_data/engine_scripts/puppet/onBefore.js b/backstop_data/engine_scripts/puppet/onBefore.js
diff --git a/backstop_data/engine_scripts/puppet/onReady.js b/backstop_data/engine_scripts/puppet/onReady.js
diff --git a/src/index.html b/src/index.html
@@ -59,8 +59,11 @@
         </nav>
       </header>
     </div>
-    <main class="conteiner">
-      <div class="card">
+    <main class="container">
+      <div
+        class="card"
+        data-qa="card"
+      >
         <div class="card__img">
           <a
             href="#"
@@ -106,7 +109,12 @@ <h1 class="card__header">
           <p class="card__price-tag">$2,199</p>
         </div>
 
-        <button class="card__button">buy</button>
+        <button
+          class="card__button"
+          data-qa="card-hover"
+        >
+          buy
+        </button>
       </div>
 
       <div class="card">

diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss
@@ -5,9 +5,9 @@ body {
   font-style: normal;
 }
 
-.conteiner {
+.container {
   display: grid;
-  grid-template-columns: repeat(4, 200px);
+  grid-template-columns: repeat(1, 200px);
   gap: 46px 48px;
   padding: 40px 50px;
 }
@@ -21,7 +21,7 @@ body {
   flex-direction: column;
   padding: $card-padding;
 
-  transition-duration: 300ms;
+  transition: $transition;
 
   &__img {
     padding: 0 3px;
@@ -103,6 +103,7 @@ body {
     font-weight: 700;
     color: #fff;
     text-decoration: none;
+    transition: $transition;
   }
 
   &__button:active {
@@ -124,3 +125,21 @@ body {
   background-color: #fff;
   color: #00acdc;
 }
+
+@media (min-width: 488px) {
+  .container {
+    grid-template-columns: repeat(2, 200px);
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    grid-template-columns: repeat(3, 200px);
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    grid-template-columns: repeat(4, 200px);
+  }
+}
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -1,15 +1,9 @@
-body {
-  margin: 0;
-  font-family: Roboto, sans-serif;
-  font-weight: 700;
-  font-style: normal;
-}
-
 .header {
   display: flex;
   width: 100%;
   background-color: #fff;
   justify-content: space-between;
+  font-weight: 700;
 
   .img {
     display: block;
@@ -26,6 +20,7 @@ body {
   a {
     text-decoration: none;
     color: #060b35;
+    transition: $transition;
   }
 
   ul {

diff --git a/src/styles/blocks/variables.scss b/src/styles/blocks/variables.scss
@@ -3,3 +3,4 @@ $main-text-color: #060b35;
 $second-text-color: #616070;
 $main-button-color: #00acdc;
 $font-size-base: 12px;
+$transition: all 300ms;