resolved

mate-academy · Jan 11, 2025 · 79c91e0 · 79c91e0
1 parent 7418a74
commit 79c91e0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/src/index.html b/src/index.html
@@ -62,7 +62,7 @@ <h1 class="card__title">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
         </h1>
         <h3 class="card__code">Product code: 195434</h3>
-        <div class="card__stars">
+        <div class="card__stars card__stars--4">
           <div class="card__stars-container">
             <div class="card__stars-star"></div>
             <div class="card__stars-star"></div>
@@ -99,7 +99,7 @@ <h1 class="card__title">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
         </h1>
         <h3 class="card__code">Product code: 195434</h3>
-        <div class="card__stars">
+        <div class="card__stars card__stars--4">
           <div class="card__stars-container">
             <div class="card__stars-star"></div>
             <div class="card__stars-star"></div>
@@ -135,7 +135,7 @@ <h1 class="card__title">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
         </h1>
         <h3 class="card__code">Product code: 195434</h3>
-        <div class="card__stars">
+        <div class="card__stars card__stars--4">
           <div class="card__stars-container">
             <div class="card__stars-star"></div>
             <div class="card__stars-star"></div>
@@ -171,7 +171,7 @@ <h1 class="card__title">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
         </h1>
         <h3 class="card__code">Product code: 195434</h3>
-        <div class="card__stars">
+        <div class="card__stars card__stars--4">
           <div class="card__stars-container">
             <div class="card__stars-star"></div>
             <div class="card__stars-star"></div>
@@ -207,7 +207,7 @@ <h1 class="card__title">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
         </h1>
         <h3 class="card__code">Product code: 195434</h3>
-        <div class="card__stars">
+        <div class="card__stars card__stars--4">
           <div class="card__stars-container">
             <div class="card__stars-star"></div>
             <div class="card__stars-star"></div>
@@ -243,7 +243,7 @@ <h1 class="card__title">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
         </h1>
         <h3 class="card__code">Product code: 195434</h3>
-        <div class="card__stars">
+        <div class="card__stars card__stars--4">
           <div class="card__stars-container">
             <div class="card__stars-star"></div>
             <div class="card__stars-star"></div>
@@ -279,7 +279,7 @@ <h1 class="card__title">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
         </h1>
         <h3 class="card__code">Product code: 195434</h3>
-        <div class="card__stars">
+        <div class="card__stars card__stars--4">
           <div class="card__stars-container">
             <div class="card__stars-star"></div>
             <div class="card__stars-star"></div>
@@ -315,7 +315,7 @@ <h1 class="card__title">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
         </h1>
         <h3 class="card__code">Product code: 195434</h3>
-        <div class="card__stars">
+        <div class="card__stars card__stars--4">
           <div class="card__stars-container">
             <div class="card__stars-star"></div>
             <div class="card__stars-star"></div>

diff --git a/src/styles/components/card/card.scss b/src/styles/components/card/card.scss
@@ -43,15 +43,19 @@
     display: flex;
     justify-content: space-between;
     padding-top: 16px;
+
+    @for $starCount from 1 through 5 {
+      &--#{$starCount} &-star:nth-child(-n + #{$starCount}) {
+        background-image: url(../images/star-active.svg);
+      }
+    }
+
     &-star {
-      background-image: url(../images/star-active.svg);
+      background-image: url(../images/star.svg);
       background-repeat: no-repeat;
       background-position: center;
       width: 16px;
       height: 16px;
-      &:last-of-type {
-        background-image: url(../images/star.svg);
-      }
       &:not(:last-of-type) {
         margin-right: 4px;
       }
@@ -77,7 +81,7 @@
       color: $font-color-secondary;
     }
     &-number {
-      font-size: 16;
+      font-size: 16px;
       font-weight: 600;
       line-height: 18px;
       color: $font-color-main;
@@ -95,11 +99,11 @@
     align-items: center;
     width: 100%;
     border: 1px solid $button-bcg-color;
-    border-radius: 5;
+    border-radius: 5px;
     &--styles {
       text-transform: uppercase;
       text-decoration: none;
-      font-size: 14;
+      font-size: 14px;
       font-weight: 600;
       line-height: 16px;
       background-color: $button-bcg-color;