add task solution

mate-academy · Nov 1, 2024 · a2cada7 · a2cada7
1 parent efaaeef
commit a2cada7
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 31 deletions.
diff --git a/src/index.html b/src/index.html
@@ -65,7 +65,7 @@
           </li>
           <li class="nav__item">
             <a
-              class="nav__link nav__link--hover"
+              class="nav__link"
               href="#"
               data-qa="nav-hover"
             >
@@ -124,7 +124,7 @@ <h2 class="card__title">
         <span class="card__code">Product code: 195434</span>
 
         <div class="card__rating">
-          <div class="stars stars--active">
+          <div class="stars stars--4">
             <div class="stars__item"></div>
             <div class="stars__item"></div>
             <div class="stars__item"></div>
@@ -141,7 +141,7 @@ <h2 class="card__title">
 
         <a
           href="#"
-          class="buy"
+          class="card__buy-button"
           data-qa="card-hover"
         >
           Buy
@@ -160,7 +160,7 @@ <h2 class="card__title">
         <span class="card__code">Product code: 195434</span>
 
         <div class="card__rating">
-          <div class="stars stars--active">
+          <div class="stars stars--4">
             <div class="stars__item"></div>
             <div class="stars__item"></div>
             <div class="stars__item"></div>
@@ -177,7 +177,7 @@ <h2 class="card__title">
 
         <a
           href="#"
-          class="buy"
+          class="card__buy-button"
         >
           Buy
         </a>
@@ -195,7 +195,7 @@ <h2 class="card__title">
         <span class="card__code">Product code: 195434</span>
 
         <div class="card__rating">
-          <div class="stars stars--active">
+          <div class="stars stars--4">
             <div class="stars__item"></div>
             <div class="stars__item"></div>
             <div class="stars__item"></div>
@@ -212,7 +212,7 @@ <h2 class="card__title">
 
         <a
           href="#"
-          class="buy"
+          class="card__buy-button"
         >
           Buy
         </a>
@@ -230,7 +230,7 @@ <h2 class="card__title">
         <span class="card__code">Product code: 195434</span>
 
         <div class="card__rating">
-          <div class="stars stars--active">
+          <div class="stars stars--4">
             <div class="stars__item"></div>
             <div class="stars__item"></div>
             <div class="stars__item"></div>
@@ -247,7 +247,7 @@ <h2 class="card__title">
 
         <a
           href="#"
-          class="buy"
+          class="card__buy-button"
         >
           Buy
         </a>
@@ -265,7 +265,7 @@ <h2 class="card__title">
         <span class="card__code">Product code: 195434</span>
 
         <div class="card__rating">
-          <div class="stars stars--active">
+          <div class="stars stars--4">
             <div class="stars__item"></div>
             <div class="stars__item"></div>
             <div class="stars__item"></div>
@@ -282,7 +282,7 @@ <h2 class="card__title">
 
         <a
           href="#"
-          class="buy"
+          class="card__buy-button"
         >
           Buy
         </a>
@@ -300,7 +300,7 @@ <h2 class="card__title">
         <span class="card__code">Product code: 195434</span>
 
         <div class="card__rating">
-          <div class="stars stars--active">
+          <div class="stars stars--4">
             <div class="stars__item"></div>
             <div class="stars__item"></div>
             <div class="stars__item"></div>
@@ -317,7 +317,7 @@ <h2 class="card__title">
 
         <a
           href="#"
-          class="buy"
+          class="card__buy-button"
         >
           Buy
         </a>
@@ -329,13 +329,11 @@ <h2 class="card__title">
           src="./images/imac.jpeg"
           alt="imac"
         />
-        <h2 class="card__title">
-          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
-        </h2>
+        <h2 class="card__title">Julynha linda</h2>
         <span class="card__code">Product code: 195434</span>
 
         <div class="card__rating">
-          <div class="stars stars--active">
+          <div class="stars stars--4">
             <div class="stars__item"></div>
             <div class="stars__item"></div>
             <div class="stars__item"></div>
@@ -352,7 +350,7 @@ <h2 class="card__title">
 
         <a
           href="#"
-          class="buy"
+          class="card__buy-button"
         >
           Buy
         </a>
@@ -370,7 +368,7 @@ <h2 class="card__title">
         <span class="card__code">Product code: 195434</span>
 
         <div class="card__rating">
-          <div class="stars stars--active">
+          <div class="stars stars--4">
             <div class="stars__item"></div>
             <div class="stars__item"></div>
             <div class="stars__item"></div>
@@ -387,7 +385,7 @@ <h2 class="card__title">
 
         <a
           href="#"
-          class="buy"
+          class="card__buy-button"
         >
           Buy
         </a>

diff --git a/src/styles/blocks/buy.scss b/src/styles/blocks/buy.scss
@@ -1,4 +1,4 @@
-.buy {
+.card__buy-button {
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
@@ -10,10 +10,11 @@
   line-height: 16px;
   border-radius: $rounding;
   transition: $transition-duration;
+  border: 2px solid transparent;
 
   &:hover {
     background-color: $white;
     color: $blue-accent;
-    border: $blue-border;
+    border-color: $blue-border;
   }
 }
diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss
@@ -19,7 +19,7 @@
     padding-block: 23px;
     transition: $transition-duration;
 
-    &--hover:hover {
+    &:hover {
       color: $blue-accent;
     }
 

diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss
@@ -1,19 +1,19 @@
 .stars {
   display: flex;
 
-  & :not(:last-child) {
-    margin-right: 4px;
-  }
-
-  &--active :not(:last-child) {
-    background-image: url(/src/images/star-active.svg);
-  }
-
   &__item {
     width: 16px;
     height: 16px;
     background-image: url(/src/images/star.svg);
     background-repeat: no-repeat;
     background-position: center;
   }
+
+  & :not(:last-child) {
+    margin-right: 4px;
+  }
+
+  &--4 .stars__item:nth-child(-n + 4) {
+    background-image: url(/src/images/star-active.svg);
+  }
 }