From d5935308a1066e1b99128efd17f87fc88f73e85a Mon Sep 17 00:00:00 2001 From: Ivan Ilnytskyy Date: Tue, 17 Dec 2024 18:37:09 +0200 Subject: [PATCH 1/6] add task solution --- readme.md | 4 +- src/index.html | 47 ++++++++++++++- src/styles/index.scss | 134 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 182 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index b1f43ed970..37c54c74b9 100644 --- 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 `` with your GitHub username and copy the links to the `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://IvanIlnytskyy.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://IvanIlnytskyy.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..01accc5ff3 100644 --- a/src/index.html +++ b/src/index.html @@ -7,12 +7,57 @@ 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
+
+ + BUY + +
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..b3a822421d 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,137 @@ body { margin: 0; + box-sizing: border-box; + font-family: Roboto, sans-serif; + background-color: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.product-cards { + align-items: center; +} + +.product-card { + width: 200px; + background-color: #fff; + border-radius: 5px; + border: 1px solid #f3f3f3; + height: 408px; +} + +.product-card__image { + background-image: url(../images/imac.jpeg); + margin-left: 19px; + margin-top: 33px; + width: 160px; + height: 134px; + background-size: cover; + background-position: center; +} + +.content { + margin: 16px; + background-position: center; +} + +.content-title { + display: flex; + font-size: 12px; + line-height: 18px; + font-weight: 500; + margin-top: 40px; +} + +.content-description { + font-size: 10px; + line-height: 14px; + color: #616070; + margin-top: 4px; +} + +.mark { + display: flex; + height: 16px; + margin-top: 16px; + margin-bottom: 24px; + justify-content: space-between; +} + +.mark-stars { + display: flex; + margin-bottom: 15px; +} + +.star { + width: 16px; + height: 16px; + border-radius: 0.5px; + gap: 4px; + background-repeat: no-repeat; + background-position: center; + background-image: url(../images/star.svg); + margin-right: 4px; +} + +.reviews { + font-size: 10px; + line-height: 14px; + text-align: right; + font-weight: 400; +} + +.mark-stars .star:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); +} + +.price { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + margin-top: 24px; +} + +.price-word { + font-size: 12px; + font-weight: 400; + line-height: 18px; + text-align: left; + color: #616070; +} + +.price-numeric { + font-size: 16px; + font-weight: 700; + line-height: 18px; + text-align: right; +} + +[data-qa='hover'] { + display: block; + text-align: center; + padding: 12px; + font-size: 14px; + line-height: 16px; + color: #fff; + text-decoration: none; + border-radius: 5px; + font-weight: 700; + background-color: #00acdc; +} + +[data-qa='hover']:hover { + display: block; + text-align: center; + padding: 12px; + font-size: 14px; + line-height: 16px; + text-decoration: none; + border-radius: 5px; + font-weight: 700; + position: relative; + background-color: #fff; + color: #00acdc; + outline: 1px solid #00acdc; } From 70e444d07e8ba70da1f8e0c870e76a9358a253ae Mon Sep 17 00:00:00 2001 From: Ivan Ilnytskyy Date: Wed, 18 Dec 2024 23:47:18 +0200 Subject: [PATCH 2/6] add task solution --- src/styles/index.scss | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index b3a822421d..cbd269c1b4 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,12 +1,6 @@ body { margin: 0; - box-sizing: border-box; font-family: Roboto, sans-serif; - background-color: #f4f4f4; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; } .product-cards { @@ -15,16 +9,17 @@ body { .product-card { width: 200px; + box-sizing: border-box; background-color: #fff; border-radius: 5px; border: 1px solid #f3f3f3; - height: 408px; + padding: 32px 16px 16px; } .product-card__image { background-image: url(../images/imac.jpeg); - margin-left: 19px; - margin-top: 33px; + display: block; + margin: 0 auto 40px; width: 160px; height: 134px; background-size: cover; @@ -32,7 +27,6 @@ body { } .content { - margin: 16px; background-position: center; } @@ -41,27 +35,30 @@ body { font-size: 12px; line-height: 18px; font-weight: 500; - margin-top: 40px; + margin-bottom: 4px; } .content-description { font-size: 10px; line-height: 14px; color: #616070; - margin-top: 4px; + margin-bottom: 16px; +} + +p { + margin: 0; } .mark { display: flex; height: 16px; - margin-top: 16px; margin-bottom: 24px; justify-content: space-between; } .mark-stars { display: flex; - margin-bottom: 15px; + padding-bottom: 16px; } .star { @@ -72,7 +69,6 @@ body { background-repeat: no-repeat; background-position: center; background-image: url(../images/star.svg); - margin-right: 4px; } .reviews { @@ -90,7 +86,6 @@ body { display: flex; justify-content: space-between; margin-bottom: 16px; - margin-top: 24px; } .price-word { From 934e70efde01725d8683ce26d6088ea9fd4804e5 Mon Sep 17 00:00:00 2001 From: Ivan Ilnytskyy Date: Thu, 19 Dec 2024 12:09:29 +0200 Subject: [PATCH 3/6] add task solution --- src/index.html | 6 +++++- src/styles/index.scss | 12 +++++++----- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/index.html b/src/index.html index 01accc5ff3..b20ad5fa18 100644 --- a/src/index.html +++ b/src/index.html @@ -30,7 +30,11 @@ class="product-card" data-qa="card" > -
+ imac

APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) diff --git a/src/styles/index.scss b/src/styles/index.scss index cbd269c1b4..76295d9244 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -17,7 +17,6 @@ body { } .product-card__image { - background-image: url(../images/imac.jpeg); display: block; margin: 0 auto 40px; width: 160px; @@ -36,6 +35,7 @@ body { line-height: 18px; font-weight: 500; margin-bottom: 4px; + color: #000; } .content-description { @@ -54,21 +54,23 @@ p { height: 16px; margin-bottom: 24px; justify-content: space-between; + align-items: center; } .mark-stars { display: flex; - padding-bottom: 16px; + } .star { + background-image: url(../images/star.svg); + background-position: 50%; + background-repeat: no-repeat; width: 16px; height: 16px; border-radius: 0.5px; gap: 4px; - background-repeat: no-repeat; - background-position: center; - background-image: url(../images/star.svg); + margin-right: 4px; } .reviews { From 5a36ac655c39c6fe62dbd0d14c96aa0433a1e947 Mon Sep 17 00:00:00 2001 From: Ivan Ilnytskyy Date: Thu, 19 Dec 2024 12:55:38 +0200 Subject: [PATCH 4/6] add task solution --- src/styles/index.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 76295d9244..6187a6327b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -35,7 +35,7 @@ body { line-height: 18px; font-weight: 500; margin-bottom: 4px; - color: #000; + color: #060b35; } .content-description { @@ -59,7 +59,6 @@ p { .mark-stars { display: flex; - } .star { @@ -78,6 +77,7 @@ p { line-height: 14px; text-align: right; font-weight: 400; + color: #060b35; } .mark-stars .star:nth-child(-n + 4) { @@ -103,6 +103,7 @@ p { font-weight: 700; line-height: 18px; text-align: right; + color: #060b35; } [data-qa='hover'] { @@ -130,5 +131,6 @@ p { position: relative; background-color: #fff; color: #00acdc; - outline: 1px solid #00acdc; + box-sizing: border-box; + border: 1px solid #00acdc; } From fff6406ff0e96104dd65a82b6d5d43e6ed6437f7 Mon Sep 17 00:00:00 2001 From: Ivan Ilnytskyy Date: Thu, 19 Dec 2024 13:28:40 +0200 Subject: [PATCH 5/6] add task solution --- src/index.html | 13 ++-- src/styles/index.scss | 140 ++++++++++++++++++++---------------------- 2 files changed, 73 insertions(+), 80 deletions(-) diff --git a/src/index.html b/src/index.html index b20ad5fa18..b7a15e88f5 100644 --- a/src/index.html +++ b/src/index.html @@ -36,27 +36,28 @@ class="product-card__image" />
-

+

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

-

Product code: 195434

+

Product code: 195434

-
+
-
Reviews: 5
+
Reviews: 5
-
Price:
-
$2,199
+
Price:
+
$2,199
BUY diff --git a/src/styles/index.scss b/src/styles/index.scss index 6187a6327b..c3ff376253 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -3,10 +3,6 @@ body { font-family: Roboto, sans-serif; } -.product-cards { - align-items: center; -} - .product-card { width: 200px; box-sizing: border-box; @@ -14,39 +10,35 @@ body { border-radius: 5px; border: 1px solid #f3f3f3; padding: 32px 16px 16px; -} -.product-card__image { - display: block; - margin: 0 auto 40px; - width: 160px; - height: 134px; - background-size: cover; - background-position: center; + &__image { + display: block; + margin: 0 auto 40px; + width: 160px; + height: 134px; + background-size: cover; + background-position: center; + } } .content { background-position: center; -} -.content-title { - display: flex; - font-size: 12px; - line-height: 18px; - font-weight: 500; - margin-bottom: 4px; - color: #060b35; -} + &__title { + display: flex; + font-size: 12px; + line-height: 18px; + font-weight: 500; + margin-bottom: 4px; + color: #060b35; + } -.content-description { - font-size: 10px; - line-height: 14px; - color: #616070; - margin-bottom: 16px; -} - -p { - margin: 0; + &__description { + font-size: 10px; + line-height: 14px; + color: #616070; + margin: 0 0 16px; + } } .mark { @@ -55,10 +47,18 @@ p { margin-bottom: 24px; justify-content: space-between; align-items: center; -} -.mark-stars { - display: flex; + &__stars { + display: flex; + } + + &__reviews { + font-size: 10px; + line-height: 14px; + text-align: right; + font-weight: 400; + color: #060b35; + } } .star { @@ -70,43 +70,35 @@ p { border-radius: 0.5px; gap: 4px; margin-right: 4px; -} -.reviews { - font-size: 10px; - line-height: 14px; - text-align: right; - font-weight: 400; - color: #060b35; -} - -.mark-stars .star:nth-child(-n + 4) { - background-image: url(../images/star-active.svg); + &:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); + } } .price { display: flex; justify-content: space-between; margin-bottom: 16px; -} -.price-word { - font-size: 12px; - font-weight: 400; - line-height: 18px; - text-align: left; - color: #616070; -} + &__word { + font-size: 12px; + font-weight: 400; + line-height: 18px; + text-align: left; + color: #616070; + } -.price-numeric { - font-size: 16px; - font-weight: 700; - line-height: 18px; - text-align: right; - color: #060b35; + &__numeric { + font-size: 16px; + font-weight: 700; + line-height: 18px; + text-align: right; + color: #060b35; + } } -[data-qa='hover'] { +.bottom { display: block; text-align: center; padding: 12px; @@ -117,20 +109,20 @@ p { border-radius: 5px; font-weight: 700; background-color: #00acdc; -} -[data-qa='hover']:hover { - display: block; - text-align: center; - padding: 12px; - font-size: 14px; - line-height: 16px; - text-decoration: none; - border-radius: 5px; - font-weight: 700; - position: relative; - background-color: #fff; - color: #00acdc; - box-sizing: border-box; - border: 1px solid #00acdc; + &:hover { + display: block; + text-align: center; + padding: 12px; + font-size: 14px; + line-height: 16px; + text-decoration: none; + border-radius: 5px; + font-weight: 700; + position: relative; + background-color: #fff; + color: #00acdc; + box-sizing: border-box; + border: 1px solid #00acdc; + } } From 0880ff105ada73d1513a78ecbb6cec32b4ab4626 Mon Sep 17 00:00:00 2001 From: Ivan Ilnytskyy Date: Fri, 20 Dec 2024 00:20:08 +0200 Subject: [PATCH 6/6] add task solution --- src/styles/index.scss | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index c3ff376253..eb7117b8aa 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -3,6 +3,14 @@ body { font-family: Roboto, sans-serif; } +@mixin bottom-color { + background-color: #00acdc; +} + +@mixin text-color { + color: #060b35; +} + .product-card { width: 200px; box-sizing: border-box; @@ -30,7 +38,8 @@ body { line-height: 18px; font-weight: 500; margin-bottom: 4px; - color: #060b35; + + @include text-color; } &__description { @@ -57,7 +66,8 @@ body { line-height: 14px; text-align: right; font-weight: 400; - color: #060b35; + + @include text-color; } } @@ -94,7 +104,8 @@ body { font-weight: 700; line-height: 18px; text-align: right; - color: #060b35; + + @include text-color; } } @@ -108,7 +119,8 @@ body { text-decoration: none; border-radius: 5px; font-weight: 700; - background-color: #00acdc; + + @include bottom-color; &:hover { display: block;