requested a review from volodymyr-soltys97

mate-academy · Dec 10, 2024 · 066893c · 066893c
1 parent e5249a8
commit 066893c
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 53 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,3 +1,4 @@
+@import 'colors';
 @import 'header';
 @import 'main';
 @import 'stars';
diff --git 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
@@ -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;