mate-academy · Karabesk · Feb 1, 2025
diff --git a/readme.md b/readme.md
@@ -23,8 +23,8 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs
 
 ❗️ Replace `<your_account>` with your GitHub username and copy the links to the `Pull Request` description:
 
-- [DEMO LINK](https://<your_account>.github.io/layout_product-cards/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_product-cards/report/html_report/)
+- [DEMO LINK](https://Karabesk.github.io/layout_product-cards/)
+- [TEST REPORT LINK](https://Karabesk.github.io/layout_product-cards/report/html_report/)
 
 ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.
 

diff --git a/src/images/button-img-hover.png b/src/images/button-img-hover.png
diff --git a/src/images/button-img.png b/src/images/button-img.png
diff --git a/src/index.html b/src/index.html
@@ -1,5 +1,9 @@
 <!doctype html>
-<html lang="en">
+<!-- #region head -->
+<html
+  lang="en"
+  class="page"
+>
   <head>
     <meta charset="UTF-8" />
     <meta
@@ -11,8 +15,56 @@
       rel="stylesheet"
       href="./styles/index.scss"
     />
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
   </head>
-  <body>
-    <h1>Product cards</h1>
+  <!-- #endregion -->
+  <body class="body">
+    <section
+      class="card card--page"
+      data-qa="card"
+    >
+      <div class="card__image"></div>
+      <h1 class="card__description card__description--image">
+        APPLE A1419 iMac 27" Retina
+        <br />
+        5K Monoblock (MNED2UA/A)
+      </h1>
+      <h2 class="card__product-code">Product code: 195434</h2>
+      <div class="bottom">
+        <div class="bottom__line bottom__line--1--distance">
+          <div class="stars">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star stars__star--5"></div>
+          </div>
+
+          <div class="bottom__review">Reviews: 5</div>
+        </div>
+
+        <div class="bottom__line bottom__line--2--distance">
+          <div class="bottom__price">Price:</div>
+          <div class="bottom__price-amount">$2,199</div>
+        </div>
+      </div>
+      <button
+        class="card__button"
+        data-qa="hover"
+      >
+        <!-- <img src="/src/images/button-img.png" alt="card__button-img" class="button__img"> -->
+      </button>
+    </section>
   </body>
 </html>
diff --git a/src/styles/blocks/body.scss b/src/styles/blocks/body.scss
@@ -0,0 +1,5 @@
+.body {
+  margin: 0;
+  width: 198px;
+  height: 406px;
+}
diff --git a/src/styles/blocks/bottom.scss b/src/styles/blocks/bottom.scss
@@ -0,0 +1,35 @@
+.bottom {
+  width: $widthAllFlexBlocks;
+
+  &__review {
+    display: flex;
+    font-weight: $fontWeightCustomText;
+  }
+
+  &__price {
+    font-weight: $fontWeightCustomText;
+    color: $secondaryFontcolor;
+    line-height: 18px;
+    font-size: 12px;
+
+    &-amount {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 18px;
+    }
+  }
+
+  &__line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &--1--distance {
+      margin: 16px 0 24px;
+    }
+
+    &--2--distance {
+      margin-bottom: 16px;
+    }
+  }
+}
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss
@@ -0,0 +1,55 @@
+.card {
+  width: 200px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &--page {
+    padding: 32px 16px 16px;
+  }
+
+  &__image {
+    background-image: url(/src/images/imac.jpeg);
+    width: 160px;
+    height: 134px;
+    background-size: cover;
+  }
+
+  &__description {
+    width: $widthAllFlexBlocks;
+    font-size: 12px;
+    line-height: 18px;
+    font-weight: 500;
+
+    &--image {
+      margin: 40px 0 4px;
+    }
+  }
+
+  &__product-code {
+    margin: 0;
+    width: $widthAllFlexBlocks;
+    line-height: $lineHeightcustom;
+    display: flex;
+    justify-content: left;
+    font-size: 10px;
+    font-weight: $fontWeightCustomText;
+    color: $secondaryFontcolor;
+  }
+
+  &__button {
+    padding: 0;
+    border-radius: 5px;
+    border: none;
+    background-image: url(/src/images/button-img.png);
+    background-size: cover;
+    height: 40px;
+    width: $widthAllFlexBlocks;
+
+    &:hover {
+      background-image: url(/src/images/button-img-hover.png);
+    }
+  }
+}
diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
@@ -0,0 +1,5 @@
+.page {
+  font-family: Roboto, serif;
+  margin: 0;
+  font-size: $defaultFontSize;
+}
diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss
@@ -0,0 +1,15 @@
+.stars {
+  display: flex;
+  gap: 4px;
+
+  &__star {
+    width: 16px;
+    height: 16px;
+    background-size: cover;
+    background-image: url(/src/images/star-active.svg);
+  }
+
+  &__star--5 {
+    background-image: url(/src/images/star.svg);
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,3 +1,6 @@
-body {
-  margin: 0;
-}
+@import '/src/utils/variables';
+@import '/src/styles/blocks/page';
+@import '/src/styles/blocks/body';
+@import '/src/styles/blocks/card';
+@import '/src/styles/blocks/stars';
+@import '/src/styles/blocks/bottom';
diff --git a/src/utils/variables.scss b/src/utils/variables.scss
@@ -0,0 +1,6 @@
+$defaultFontSize: 10px;
+$secondaryFontcolor: #616070;
+$mainFontColor: #060b35;
+$lineHeightcustom: 14px;
+$fontWeightCustomText: 400;
+$widthAllFlexBlocks: 166px;