From 7269667e19c945fde8ad28952d2bedc7fa32e913 Mon Sep 17 00:00:00 2001
From: Solomiia Palka <solyaqw@gmail.com>
Date: Fri, 11 Oct 2024 17:54:02 +0300
Subject: [PATCH] add new task solution

---
 src/index.html        |   8 +++
 src/styles/card.scss  |  98 +++++++++++++++++++++++++++++++++
 src/styles/index.scss | 125 ------------------------------------------
 src/styles/stars.scss |  17 ++++++
 4 files changed, 123 insertions(+), 125 deletions(-)
 create mode 100644 src/styles/card.scss
 create mode 100644 src/styles/stars.scss

diff --git a/src/index.html b/src/index.html
index b0bec89d5a..daafacd06b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -21,6 +21,14 @@
     />
 
     <title>Product cards</title>
+    <link
+      rel="stylesheet"
+      href="./styles/card.scss"
+    />
+    <link
+      rel="stylesheet"
+      href="./styles/stars.scss"
+    />
     <link
       rel="stylesheet"
       href="./styles/index.scss"
diff --git a/src/styles/card.scss b/src/styles/card.scss
new file mode 100644
index 0000000000..e29a2dc662
--- /dev/null
+++ b/src/styles/card.scss
@@ -0,0 +1,98 @@
+.card {
+  font-family: Roboto, sans-serif;
+  box-sizing: border-box;
+  width: 200px;
+  padding: 16px;
+
+  &__product-image {
+    padding: 16px 3px 0;
+    display: flex;
+    top: 33px;
+    left: 20px;
+    width: 160px;
+    height: 134px;
+  }
+
+  &__product-name {
+    margin: 0;
+    padding-top: 40px;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 18px;
+    color: #060b35;
+  }
+
+  &__product-code {
+    margin: 0;
+    padding-top: 4px;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 14px;
+    color: #616070;
+  }
+
+  &__product-rating {
+    padding-top: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 166px;
+    height: 16px;
+
+    &-review {
+      margin: 0;
+      display: flex;
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 14px;
+      color: #060b35;
+      align-self: flex-end;
+    }
+  }
+
+  &__product-price {
+    padding-top: 24px;
+    padding-bottom: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    line-height: 18px;
+
+    &-text {
+      margin: 0;
+      font-weight: 400;
+      font-size: 12px;
+      color: #616070;
+    }
+
+    &-numbers {
+      margin: 0;
+      font-weight: 700;
+      font-size: 16px;
+    }
+  }
+
+  &__product-buy-link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+    width: 166px;
+    height: 40px;
+    background-color: #00acdc;
+
+    text-decoration: none;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 16px;
+    color: #fff;
+
+    &:hover {
+      background-color: #fff;
+      color: #00acdc;
+      border-style: solid;
+      border-width: 1px;
+      border-color: #00acdc;
+    }
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 3f054b0500..293d3b1f13 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,128 +1,3 @@
 body {
   margin: 0;
 }
-
-// #region card
-
-.card {
-  font-family: Roboto, sans-serif;
-  box-sizing: border-box;
-  width: 200px;
-  padding: 16px;
-
-  &__product-image {
-    padding: 16px 3px 0;
-    display: flex;
-    top: 33px;
-    left: 20px;
-    width: 160px;
-    height: 134px;
-  }
-
-  &__product-name {
-    margin: 0;
-    padding-top: 40px;
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 18px;
-    color: #060b35;
-  }
-
-  &__product-code {
-    margin: 0;
-    padding-top: 4px;
-    font-weight: 400;
-    font-size: 10px;
-    line-height: 14px;
-    color: #616070;
-  }
-
-  &__product-rating {
-    padding-top: 16px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 166px;
-    height: 16px;
-
-    &-review {
-      margin: 0;
-      display: flex;
-      font-weight: 400;
-      font-size: 10px;
-      line-height: 14px;
-      color: #060b35;
-      align-self: flex-end;
-    }
-  }
-
-  &__product-price {
-    padding-top: 24px;
-    padding-bottom: 16px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    line-height: 18px;
-
-    &-text {
-      margin: 0;
-      font-weight: 400;
-      font-size: 12px;
-      color: #616070;
-    }
-
-    &-numbers {
-      margin: 0;
-      font-weight: 700;
-      font-size: 16px;
-    }
-  }
-
-  &__product-buy-link {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 5px;
-    width: 166px;
-    height: 40px;
-    background-color: #00acdc;
-
-    text-decoration: none;
-    font-weight: 700;
-    font-size: 14px;
-    line-height: 16px;
-    color: #fff;
-
-    &:hover {
-      background-color: #fff;
-      color: #00acdc;
-      border-style: solid;
-      border-width: 1px;
-      border-color: #00acdc;
-    }
-  }
-}
-
-// #endregion
-
-// #region stars
-
-.stars {
-  display: flex;
-
-  &__star {
-    width: 16px;
-    height: 16px;
-    border-radius: 0.5px;
-    background-position: center;
-    margin-right: 4px;
-    background-repeat: no-repeat;
-    background-image: url(../images/star.svg);
-
-    &:nth-child(-n + 4) {
-      background-image: url(../images/star-active.svg);
-    }
-  }
-}
-
-// #endregion
diff --git a/src/styles/stars.scss b/src/styles/stars.scss
new file mode 100644
index 0000000000..fdc65636eb
--- /dev/null
+++ b/src/styles/stars.scss
@@ -0,0 +1,17 @@
+.stars {
+  display: flex;
+
+  &__star {
+    width: 16px;
+    height: 16px;
+    border-radius: 0.5px;
+    background-position: center;
+    margin-right: 4px;
+    background-repeat: no-repeat;
+    background-image: url(../images/star.svg);
+
+    &:nth-child(-n + 4) {
+      background-image: url(../images/star-active.svg);
+    }
+  }
+}