From 066893cf0eabb4202b46b3a40e6cab79587ab9d6 Mon Sep 17 00:00:00 2001
From: Valentyn <valentyn93beltsyk@gmail.com>
Date: Tue, 10 Dec 2024 17:45:48 +0200
Subject: [PATCH] requested a review from volodymyr-soltys97

---
 src/index.html         | 16 ++++++-------
 src/styles/colors.scss |  7 ++++++
 src/styles/header.scss | 23 +++++--------------
 src/styles/index.scss  |  1 +
 src/styles/main.scss   | 52 +++++++++++++++++++++---------------------
 src/styles/stars.scss  |  4 ++--
 6 files changed, 50 insertions(+), 53 deletions(-)
 create mode 100644 src/styles/colors.scss

diff --git a/src/index.html b/src/index.html
index 4287194bb8..a0342b9fdf 100644
--- a/src/index.html
+++ b/src/index.html
@@ -155,7 +155,7 @@ <h2 class="card__title">
         </div>
         <div class="card__price">
           Price:
-          <div class="card__price-value">$2,199</div>
+          <p class="card__price-value">$2,199</p>
         </div>
 
         <button
@@ -194,7 +194,7 @@ <h2 class="card__title">
 
         <div class="card__price">
           Price:
-          <div class="card__price-value">$2,199</div>
+          <p class="card__price-value">$2,199</p>
         </div>
 
         <button
@@ -233,7 +233,7 @@ <h2 class="card__title">
 
         <div class="card__price">
           Price:
-          <div class="card__price-value">$2,199</div>
+          <p class="card__price-value">$2,199</p>
         </div>
 
         <button
@@ -272,7 +272,7 @@ <h2 class="card__title">
 
         <div class="card__price">
           Price:
-          <div class="card__price-value">$2,199</div>
+          <p class="card__price-value">$2,199</p>
         </div>
 
         <button
@@ -311,7 +311,7 @@ <h2 class="card__title">
 
         <div class="card__price">
           Price:
-          <div class="card__price-value">$2,199</div>
+          <p class="card__price-value">$2,199</p>
         </div>
 
         <button
@@ -350,7 +350,7 @@ <h2 class="card__title">
 
         <div class="card__price">
           Price:
-          <div class="card__price-value">$2,199</div>
+          <p class="card__price-value">$2,199</p>
         </div>
 
         <button
@@ -389,7 +389,7 @@ <h2 class="card__title">
 
         <div class="card__price">
           Price:
-          <div class="card__price-value">$2,199</div>
+          <p class="card__price-value">$2,199</p>
         </div>
 
         <button
@@ -428,7 +428,7 @@ <h2 class="card__title">
 
         <div class="card__price">
           Price:
-          <div class="card__price-value">$2,199</div>
+          <p class="card__price-value">$2,199</p>
         </div>
 
         <button
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
new file mode 100644
index 0000000000..604536cbfd
--- /dev/null
+++ b/src/styles/colors.scss
@@ -0,0 +1,7 @@
+$font-family: Roboto, sans-serif;
+$main-accent: #060b35;
+$secondary: #616070;
+$white: #fff;
+$blue-accent: #00acdc;
+$gray-elements: #f3f3f3;
+$yellow-stars: #ffde6a;
diff --git a/src/styles/header.scss b/src/styles/header.scss
index f330b40b39..9fb3f27b28 100644
--- a/src/styles/header.scss
+++ b/src/styles/header.scss
@@ -2,22 +2,11 @@ html {
   font-family: Roboto, sans-serif;
 }
 
-:root {
-  --font-family: Roboto, sans-serif;
-  --color: #00acdc;
-  --main-accent: #060b35;
-  --secondary: #616070;
-  --white: #fff;
-  --blue-accent: #00acdc;
-  --gray-elements: #f3f3f3;
-  --yellow-stars: #ffde6a;
-}
-
 body {
   margin: 0;
 }
 
-header {
+.header {
   justify-content: space-between;
   align-items: center;
   display: flex;
@@ -27,7 +16,7 @@ header {
 
 .nav {
   &__link {
-    color: #060b35;
+    color: $main-accent;
     font-size: 12px;
     text-decoration: none;
     display: block;
@@ -55,11 +44,11 @@ header {
   }
 
   &-hover {
-    color: #00acdc;
+    color: $blue-accent;
   }
 
   &__link:hover {
-    color: #00acdc;
+    color: $blue-accent;
   }
 }
 
@@ -69,13 +58,13 @@ header {
 }
 
 .is-active {
-  color: #00acdc;
+  color: $blue-accent;
   position: relative;
 }
 
 .is-active::after {
   content: '';
-  background-color: #00acdc;
+  background-color: $blue-accent;
   border-radius: 8px;
   width: 100%;
   height: 4px;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b284f68507..14a061ded6 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,4 @@
+@import 'colors';
 @import 'header';
 @import 'main';
 @import 'stars';
diff --git a/src/styles/main.scss b/src/styles/main.scss
index b797aa7390..54bd88e11b 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -3,19 +3,20 @@ main {
   gap: 46px 48px;
   width: 944px;
   padding: 50px 40px;
-
   display: grid;
   margin: 0 auto;
 }
 
 .card {
-  border: 1px solid var(--gray-elements);
+  border: 1px solid $gray-elements;
   border-radius: 5px;
   width: 198px;
   height: 406px;
-  background-color: var(--white);
+  background-color: $white;
   justify-content: center;
   transition-duration: 300ms;
+  transition-duration: end 300ms;
+  overflow: hidden;
 
   &:hover {
     transform: scale(1.2);
@@ -31,20 +32,20 @@ main {
     font-weight: 500;
     font-size: 12px;
     line-height: 150%;
-    color: #060b35;
+    color: $main-accent;
     margin: 0 16px 4px;
   }
 
   &:hover .card__title {
-    color: var(--blue-accent);
+    color: $blue-accent;
   }
 
   &__code {
-    font-family: var(--font-family);
+    font-family: $font-family;
     font-weight: 400px;
     font-size: 10px;
     line-height: 140%;
-    color: #616070;
+    color: $secondary;
     margin-top: 4px;
     margin-left: 16px;
   }
@@ -56,77 +57,76 @@ main {
   }
 
   &__reviews-text {
-    font-family: var(--font-family);
-    color: var(--main-accent);
+    font-family: $font-family;
+    color: $main-accent;
     text-align: right;
     margin-top: 0;
     margin-right: 16px;
     font-size: 10px;
-
     font-weight: 400;
     line-height: 140%;
     margin-bottom: 26px;
   }
 
   &__price {
-    font-family: var(--font-family);
+    font-family: $font-family;
     display: flex;
     font-weight: 400;
     font-size: 12px;
     line-height: 150%;
-    color: var(--secondary);
+    color: $secondary;
     margin-left: 16px;
-    margin-bottom: 16px;
   }
 
   &__price-value {
-    font-family: var(--font-family);
-    display: block;
+    margin-top: 0;
+    font-family: $font-family;
+    display: flex;
     font-weight: 700;
     font-size: 16px;
     line-height: 112%;
     text-align: right;
     margin-left: 85px;
-    color: var(--main-accent);
+    color: $main-accent;
   }
 
   &__button-buy:hover {
-    font-family: var(--font-family);
+    font-family: $font-family;
     font-size: 14px;
     line-height: 16px;
     font-weight: 700;
     text-transform: uppercase;
     text-align: center;
     border-radius: 5px;
-    border: 1px solid var(--blue-accent);
-    color: var(--blue-accent);
-    background-color: var(--white);
+    border: 1px solid $blue-accent;
+    color: $blue-accent;
+    background-color: $white;
   }
 }
 
 button {
   display: block;
-  font-family: var(--font-family);
+  font-family: $font-family;
   width: 166px;
   height: 40px;
   margin: 0 16px 16px;
   border-radius: 5px;
-  border: 1px solid var(--blue-accent);
+  border: 1px solid $blue-accent;
   color: #fff;
-  background-color: var(--blue-accent);
+  background-color: $blue-accent;
   font-size: 14px;
   line-height: 16px;
   font-weight: 700;
 
   &__button-buy {
-    font-family: var(--font-family);
+    font-family: $font-family;
     font-size: 14px;
     line-height: 16px;
     font-weight: 700;
     text-transform: uppercase;
     text-align: center;
-    border: 1px solid var(--blue-accent);
+    border: 1px solid $blue-accent;
     color: var(--white);
-    background-color: var(--blue-accent);
+    background-color: $blue-accent;
   }
 }
diff --git a/src/styles/stars.scss b/src/styles/stars.scss
index 99d19d1db4..8759c8d831 100644
--- a/src/styles/stars.scss
+++ b/src/styles/stars.scss
@@ -12,8 +12,8 @@
   }
 
   &__reviews-text {
-    font-family: var(--font-family);
-    color: var(--main-accent);
+    font-family: $font-family;
+    color: $main-accent;
     text-align: right;
     margin-top: 0;
     margin-right: 16px;