add changes

mate-academy · Oct 16, 2024 · 83107ee · 83107ee
1 parent 6da5857
commit 83107ee
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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);
 }