From 54d38ab2d191182d0aa1555b2633ba1f2049ae29 Mon Sep 17 00:00:00 2001 From: Tetiana Vozniuk Date: Sat, 5 Oct 2024 13:42:43 +0300 Subject: [PATCH 1/2] add task solution --- readme.md | 4 +-- src/index.html | 53 ++++++++++++++++++++++++++++++- src/styles/card.scss | 71 ++++++++++++++++++++++++++++++++++++++++++ src/styles/images.scss | 9 ++++++ src/styles/index.scss | 8 ++++- src/styles/starts.scss | 30 ++++++++++++++++++ 6 files changed, 171 insertions(+), 4 deletions(-) create mode 100644 src/styles/card.scss create mode 100644 src/styles/images.scss create mode 100644 src/styles/starts.scss diff --git a/readme.md b/readme.md index 3354ca6020..1e65321a65 100644 --- a/readme.md +++ b/readme.md @@ -20,8 +20,8 @@ Create a pages with product card using `flexbox`, `BEM` and `SCSS` based on [thi ❗️ Replace `` with your Github username and copy the links to `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_product-cards/) -- [TEST REPORT LINK](https://.github.io/layout_product-cards/report/html_report/) +- [DEMO LINK](https://taniavozniuk.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://taniavozniuk.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/index.html b/src/index.html index 43745cc17f..2e98decbce 100644 --- a/src/index.html +++ b/src/index.html @@ -7,12 +7,63 @@ content="width=device-width, initial-scale=1.0" /> Product cards + + + -

Product cards

+
+
+ +

+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +

+

Product code: 195434

+ +
+
+
+
+
+
+
+
+

Reviews: 5

+
+ +
+

Price:

+

$2,199

+
+ +
+
diff --git a/src/styles/card.scss b/src/styles/card.scss new file mode 100644 index 0000000000..fff6176b8f --- /dev/null +++ b/src/styles/card.scss @@ -0,0 +1,71 @@ +.card { + width: 200px; + border: 1px solid white; + box-sizing: border-box; + background-color: #fff; + border-radius: 5px; + padding: 32px 16px 16px; + + &__title { + margin: 40px 0 0; + font-weight: 500; + font-size: 12px; + line-height: 18px; + } + + &__sudtitle { + margin: 4px 0 0; + padding-top: 0; + font-weight: 400; + line-height: 14px; + color: #616070; + font-size: 10px; + } + + &__price-container { + margin-top: 24px; + display: flex; + align-items: center; + justify-content: space-between; + } + + &__price-label { + margin: 0; + color: #616070; + font-size: 12px; + line-height: 18px; + } + + &__money { + margin: 0; + font-weight: 700; + font-size: 16px; + line-height: 18px; + } + + &__buy-button { + margin: 16px 0 0; + background-color: #00acdc; + position: relative; + width: 166px; + height: 40px; + border-radius: 5px; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-weight: 700; + font-size: 14px; + line-height: 16px; + text-decoration: none; + + + &:hover { + background: #fff; + color: #00acdc; + border: 1px solid #00ACDC; + + } + } +} diff --git a/src/styles/images.scss b/src/styles/images.scss new file mode 100644 index 0000000000..8289d7c95c --- /dev/null +++ b/src/styles/images.scss @@ -0,0 +1,9 @@ +.images { + background-image: url(../images/imac.jpeg); + background-repeat: no-repeat; + background-size: cover; + display: block; + width: 160px; + height: 134px; + margin: 0 3px; +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..e7037751d0 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,9 @@ -body { +@import '../styles/card'; +@import '../styles/images'; +@import '../styles/starts'; + +html { margin: 0; + padding: 0; + font-family: Roboto, Arial, sans-serif; } diff --git a/src/styles/starts.scss b/src/styles/starts.scss new file mode 100644 index 0000000000..666f5573cb --- /dev/null +++ b/src/styles/starts.scss @@ -0,0 +1,30 @@ +.stars { + display: flex; + + &__star { + width: 16px; + height: 16px; + background-image: url(../images/star.svg); + background-position: center; + margin-right: 4px; + background-repeat: no-repeat; + } + + &-container { + display: flex; + justify-content: space-between; + margin-top: 16px; + align-items: center; + } + + &-container__reviews { + font-weight: 400; + font-size: 10px; + } + + &--0 { + .stars__star:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); /* Active star image */ + } + } +} From e3c1ea3a90aa2d9a0f5c2613637c3357aa97fea1 Mon Sep 17 00:00:00 2001 From: Tetiana Vozniuk Date: Sat, 5 Oct 2024 14:30:30 +0300 Subject: [PATCH 2/2] add task solution --- src/index.html | 2 +- src/styles/card.scss | 8 ++++---- src/styles/{images.scss => image.scss} | 0 src/styles/index.scss | 2 +- src/styles/starts.scss | 2 ++ 5 files changed, 8 insertions(+), 6 deletions(-) rename src/styles/{images.scss => image.scss} (100%) diff --git a/src/index.html b/src/index.html index 2e98decbce..a6ce123eb9 100644 --- a/src/index.html +++ b/src/index.html @@ -16,7 +16,7 @@ href="https://fonts.gstatic.com" />