add size for reviews + <p>

mate-academy · Dec 9, 2024 · 85d7a58 · 85d7a58
1 parent ccfcc04
commit 85d7a58
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 65 deletions.
diff --git a/src/index.html b/src/index.html
@@ -143,15 +143,16 @@ <h2 class="card__title">
         </h2>
         <p class="card__code">Product code: 195434</p>
 
-        <div class="stars stars--4">
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__reviews">Reviews: 5</div>
+        <div class="card__reviews">
+          <div class="stars stars--4">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+          <p class="card__reviews-text">Reviews: 5</p>
         </div>
-
         <div class="card__price">
           Price:
           <div class="card__price-value">$2,199</div>
@@ -180,13 +181,15 @@ <h2 class="card__title">
         </h2>
         <p class="card__code">Product code: 195434</p>
 
-        <div class="stars stars--4">
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__reviews">Reviews: 5</div>
+        <div class="card__reviews">
+          <div class="stars stars--4">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+          <p class="card__reviews-text">Reviews: 5</p>
         </div>
 
         <div class="card__price">
@@ -217,13 +220,15 @@ <h2 class="card__title">
         </h2>
         <p class="card__code">Product code: 195434</p>
 
-        <div class="stars stars--4">
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__reviews">Reviews: 5</div>
+        <div class="card__reviews">
+          <div class="stars stars--4">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+          <p class="card__reviews-text">Reviews: 5</p>
         </div>
 
         <div class="card__price">
@@ -254,13 +259,15 @@ <h2 class="card__title">
         </h2>
         <p class="card__code">Product code: 195434</p>
 
-        <div class="stars stars--4">
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__reviews">Reviews: 5</div>
+        <div class="card__reviews">
+          <div class="stars stars--4">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+          <p class="card__reviews-text">Reviews: 5</p>
         </div>
 
         <div class="card__price">
@@ -291,13 +298,15 @@ <h2 class="card__title">
         </h2>
         <p class="card__code">Product code: 195434</p>
 
-        <div class="stars stars--4">
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__reviews">Reviews: 5</div>
+        <div class="card__reviews">
+          <div class="stars stars--4">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+          <p class="card__reviews-text">Reviews: 5</p>
         </div>
 
         <div class="card__price">
@@ -328,13 +337,15 @@ <h2 class="card__title">
         </h2>
         <p class="card__code">Product code: 195434</p>
 
-        <div class="stars stars--4">
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__reviews">Reviews: 5</div>
+        <div class="card__reviews">
+          <div class="stars stars--4">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+          <p class="card__reviews-text">Reviews: 5</p>
         </div>
 
         <div class="card__price">
@@ -365,13 +376,15 @@ <h2 class="card__title">
         </h2>
         <p class="card__code">Product code: 195434</p>
 
-        <div class="stars stars--4">
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__reviews">Reviews: 5</div>
+        <div class="card__reviews">
+          <div class="stars stars--4">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+          <p class="card__reviews-text">Reviews: 5</p>
         </div>
 
         <div class="card__price">
@@ -402,13 +415,15 @@ <h2 class="card__title">
         </h2>
         <p class="card__code">Product code: 195434</p>
 
-        <div class="stars stars--4">
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__star"></div>
-          <div class="stars__reviews">Reviews: 5</div>
+        <div class="card__reviews">
+          <div class="stars stars--4">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+          <p class="card__reviews-text">Reviews: 5</p>
         </div>
 
         <div class="card__price">

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -37,7 +37,7 @@ main {
 }
 
 .card:hover .card__title {
-  color: #34568b;
+  color: var(--font-family);
 }
 
 .card__code {
@@ -50,6 +50,25 @@ main {
   margin-left: 16px;
 }
 
+.card__reviews {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 16px;
+}
+
+.card__reviews-text {
+  font-family: var(--font-family);
+  color: var(--main-accent);
+  text-align: right;
+  margin-top: 0;
+  margin-right: 16px;
+  font-size: 10px;
+
+  font-weight: 400;
+  line-height: 140%;
+  margin-bottom: 26px;
+}
+
 .card__price {
   font-family: var(--font-family);
   display: flex;

diff --git a/src/styles/stars.scss b/src/styles/stars.scss
@@ -1,9 +1,7 @@
 .stars {
   gap: 4px;
-  margin-top: 16px;
   display: flex;
   margin-left: 16px;
-  margin-bottom: 24px;
 
   &__star {
     background-image: url(/src/images/star.svg);
@@ -13,15 +11,16 @@
     height: 16px;
   }
 
-  &__reviews {
+  &__reviews-text {
     font-family: var(--font-family);
-    margin-left: 18px;
+    color: var(--main-accent);
+    text-align: right;
+    margin-top: 0;
     margin-right: 16px;
-    font-weight: 400;
     font-size: 10px;
+    margin-bottom: 0;
+    font-weight: 400;
     line-height: 140%;
-    color: var(--main-accent);
-    text-align: right;
   }
 }