add task solution

mate-academy · Dec 30, 2024 · 2497a7e · 2497a7e
1 parent 0880ff1
commit 2497a7e
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 72 deletions.
diff --git a/src/index.html b/src/index.html
@@ -35,33 +35,31 @@
           alt="imac"
           class="product-card__image"
         />
-        <div class="content">
-          <h2 class="content__title">
-            APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
-          </h2>
-          <p class="content__description">Product code: 195434</p>
-          <div class="mark">
-            <div class="mark__stars">
-              <span class="star"></span>
-              <span class="star"></span>
-              <span class="star"></span>
-              <span class="star"></span>
-              <span class="star"></span>
-            </div>
-            <div class="mark__reviews">Reviews: 5</div>
+        <h2 class="product-card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+        <p class="product-card__description">Product code: 195434</p>
+        <div class="mark">
+          <div class="stars stars--4">
+            <span class="stars__star"></span>
+            <span class="stars__star"></span>
+            <span class="stars__star"></span>
+            <span class="stars__star"></span>
+            <span class="stars__star"></span>
           </div>
-          <div class="price">
-            <div class="price__word">Price:</div>
-            <div class="price__numeric">$2,199</div>
-          </div>
-          <a
-            href="#"
-            data-qa="hover"
-            class="bottom"
-          >
-            BUY
-          </a>
+          <p class="mark__reviews">Reviews: 5</p>
+        </div>
+        <div class="price">
+          <p class="price__word">Price:</p>
+          <p class="price__numeric">$2,199</p>
         </div>
+        <a
+          href="#"
+          data-qa="hover"
+          class="bottom"
+        >
+          BUY
+        </a>
       </div>
     </div>
   </body>

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,23 +1,23 @@
+$hover-text-color: #34568b;
+$main-color: #00acdc;
+$text-color: #060b35;
+$dark-gray: #616070;
+$white: #fff;
+$grey: #f3f3f3;
+
 body {
   margin: 0;
   font-family: Roboto, sans-serif;
 }
 
-@mixin bottom-color {
-  background-color: #00acdc;
-}
-
-@mixin text-color {
-  color: #060b35;
-}
-
 .product-card {
-  width: 200px;
   box-sizing: border-box;
-  background-color: #fff;
+  width: 200px;
+  background-color: $white;
   border-radius: 5px;
-  border: 1px solid #f3f3f3;
+  border: 1px solid $grey;
   padding: 32px 16px 16px;
+  background-position: center;
 
   &__image {
     display: block;
@@ -27,25 +27,24 @@ body {
     background-size: cover;
     background-position: center;
   }
-}
-
-.content {
-  background-position: center;
 
   &__title {
     display: flex;
     font-size: 12px;
     line-height: 18px;
     font-weight: 500;
     margin-bottom: 4px;
+    color: $text-color;
 
-    @include text-color;
+    &:hover {
+      color: $hover-text-color;
+    }
   }
 
   &__description {
     font-size: 10px;
     line-height: 14px;
-    color: #616070;
+    color: $dark-gray;
     margin: 0 0 16px;
   }
 }
@@ -57,32 +56,12 @@ body {
   justify-content: space-between;
   align-items: center;
 
-  &__stars {
-    display: flex;
-  }
-
   &__reviews {
     font-size: 10px;
     line-height: 14px;
     text-align: right;
     font-weight: 400;
-
-    @include text-color;
-  }
-}
-
-.star {
-  background-image: url(../images/star.svg);
-  background-position: 50%;
-  background-repeat: no-repeat;
-  width: 16px;
-  height: 16px;
-  border-radius: 0.5px;
-  gap: 4px;
-  margin-right: 4px;
-
-  &:nth-child(-n + 4) {
-    background-image: url(../images/star-active.svg);
+    color: $text-color;
   }
 }
 
@@ -96,16 +75,17 @@ body {
     font-weight: 400;
     line-height: 18px;
     text-align: left;
-    color: #616070;
+    color: $dark-gray;
+    margin: 0;
   }
 
   &__numeric {
     font-size: 16px;
     font-weight: 700;
     line-height: 18px;
     text-align: right;
-
-    @include text-color;
+    color: $text-color;
+    margin: 0;
   }
 }
 
@@ -115,12 +95,11 @@ body {
   padding: 12px;
   font-size: 14px;
   line-height: 16px;
-  color: #fff;
+  color: $white;
   text-decoration: none;
   border-radius: 5px;
   font-weight: 700;
-
-  @include bottom-color;
+  background-color: $main-color;
 
   &:hover {
     display: block;
@@ -132,9 +111,28 @@ body {
     border-radius: 5px;
     font-weight: 700;
     position: relative;
-    background-color: #fff;
-    color: #00acdc;
+    background-color: $white;
+    color: $main-color;
     box-sizing: border-box;
-    border: 1px solid #00acdc;
+    border: 1px solid $main-color;
+  }
+}
+
+.stars {
+  display: flex;
+
+  &__star {
+    background-image: url(../images/star.svg);
+    background-position: 50%;
+    background-repeat: no-repeat;
+    width: 16px;
+    height: 16px;
+    border-radius: 0.5px;
+    gap: 4px;
+    margin-right: 4px;
+
+    &:nth-child(-n + 4) {
+      background-image: url(../images/star-active.svg);
+    }
   }
 }