From 83107ee668c7f786e2da90fb1dba806ccca2a388 Mon Sep 17 00:00:00 2001
From: Nataliia Fedorchuk <natali.fedorchuk2211@gmail.com>
Date: Wed, 16 Oct 2024 22:29:29 +0300
Subject: [PATCH] add changes

---
 src/index.html        |  6 +++---
 src/styles/body.scss  | 20 ++++++++++++++++----
 src/styles/stars.scss |  5 ++++-
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/index.html b/src/index.html
index 676dbf0b6d..76773fa157 100644
--- a/src/index.html
+++ b/src/index.html
@@ -48,7 +48,7 @@ <h2 class="product-card__items product-card__items--product-code">
         Product code: 195434
       </h2>
 
-      <div class="product-card__items product-card__items--position">
+      <div class="product-card__items product-card__items--reviews">
         <div class="product-card__items-stars">
           <div class="product-card__items-stars-star"></div>
 
@@ -62,10 +62,10 @@ <h2 class="product-card__items product-card__items--product-code">
             class="product-card__items-stars-star product-card__items-stars-star--not-active"
           ></div>
         </div>
-        <h2 class="product-card__items-reviews">Reviews: 5</h2>
+        <h2 class="product-card__items-review">Reviews: 5</h2>
       </div>
 
-      <div class="product-card__items product-card__items--position">
+      <div class="product-card__items product-card__items--price">
         <h2 class="product-card__price product-card__price--letters">Price:</h2>
         <h2 class="product-card__price product-card__price--numbers">$2,199</h2>
       </div>
diff --git a/src/styles/body.scss b/src/styles/body.scss
index 7917885b72..0e63d2d143 100644
--- a/src/styles/body.scss
+++ b/src/styles/body.scss
@@ -20,6 +20,7 @@
 }
 
 .product-card__items--title {
+  display: flex;
   font-size: 12px;
   font-weight: 500;
   line-height: 18px;
@@ -32,27 +33,38 @@
   justify-content: flex-start;
   font-size: 10px;
   font-weight: 400;
+  height: 14px;
   line-height: 14px;
   margin-top: 4px;
 }
 
-.product-card__items--position {
+.product-card__items--reviews {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-top: 16px;
+  height: 14px;
 }
 
-.product-card__items-reviews {
+.product-card__items-review {
   font-size: 10px;
   font-weight: 400;
   line-height: 14px;
 }
 
-.product-card__price {
+.product-card__items--price {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 18px;
+  line-height: 18px;
   margin-top: 24px;
 }
 
+.product-card__price {
+  display: flex;
+}
+
 .product-card__price--letters {
   font-size: 12px;
   font-weight: 400;
@@ -70,7 +82,6 @@
   justify-content: center;
   align-items: center;
   background-color: #00acdc;
-  width: 166px;
   height: 40px;
   border-radius: 5px;
   font-size: 14px;
@@ -80,6 +91,7 @@
   text-transform: uppercase;
   text-decoration: none;
   color: #f3f3f3;
+  margin-top: 16px;
 }
 
 .product-card__items--link:hover {
diff --git a/src/styles/stars.scss b/src/styles/stars.scss
index ef068c52cb..29523b6a37 100644
--- a/src/styles/stars.scss
+++ b/src/styles/stars.scss
@@ -1,6 +1,5 @@
 .product-card__items-stars {
   display: flex;
-  margin-top: 24px;
 }
 
 .product-card__items-stars-star {
@@ -12,6 +11,10 @@
   height: 16px;
 }
 
+.product-card__items-stars-star:not(:last-child) {
+  margin-right: 4px;
+}
+
 .product-card__items-stars-star--not-active {
   background-image: url(../images/star.svg);
 }