From c784035b3ad4c091bd19e1a4b51ae8fff4197e83 Mon Sep 17 00:00:00 2001 From: Arsenii Kolos Date: Thu, 6 Feb 2025 20:24:45 +0200 Subject: [PATCH 1/3] add task solution --- readme.md | 4 +- src/index.html | 55 +++++++++++++- src/styles/index.css | 5 ++ src/styles/index.css.map | 1 + src/styles/index.scss | 150 ++++++++++++++++++++++++++++++++++++++- 5 files changed, 211 insertions(+), 4 deletions(-) create mode 100644 src/styles/index.css create mode 100644 src/styles/index.css.map diff --git a/readme.md b/readme.md index b1f43ed970..8437426d00 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://Cr1staliss.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://Cr1staliss.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..4ba5234e25 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,4 @@ + @@ -11,8 +12,60 @@ rel="stylesheet" href="./styles/index.scss" /> + + + + -

Product cards

+
+
+ +
+
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+ + Product code: 195434 + +
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+ Price: +
$2,199
+
+ + + + +
+
diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000000..86a7aab54c --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,5 @@ +body { + margin: 0; +} + +/* # sourceMappingURL=index.css.map */ diff --git a/src/styles/index.css.map b/src/styles/index.css.map new file mode 100644 index 0000000000..de17118552 --- /dev/null +++ b/src/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE","file":"index.css"} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..611fb63be8 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,151 @@ +$size: 0; +$main-accent: #060b35; +$secondary: #616070; +$blue-accent: #00acdc; + +html { + color: $secondary; + + font-family: Roboto, serif; + font-size: 10px; + font-weight: 400; + line-height: 14px; + text-align: left; + font-optical-sizing: auto; + font-style: normal; +} + body { - margin: 0; + margin: $size; +} + +.card { + box-sizing: border-box; + width: 200px; + background-color: #fff; + border: 1px #f3f3f3 solid; + border-radius: 5px; + + &__top { + width: 160px; + height: 134px; + + background-image: url('../images/imac.jpeg'); + background-size: contain; + background-repeat: no-repeat; + + margin: 32px 19px 40px; + } + + &__bottom { + margin: 0 16px 16px; + } +} + +.product-name { + margin-bottom: 4px; + color: $main-accent; + font-size: 12px; + font-weight: 500; + line-height: 18px; + text-align: left; +} + +.stars-reviews { + margin-top: 16px; + height: 16px; + justify-content: space-between; + display: flex; + flex-direction: row; + + color: $main-accent; + text-align: right; +} + +.stars { + display: flex; + flex-direction: row; + + &_star { + background-image: url(/src/images/star-active.svg); + background-position: center; + background-repeat: no-repeat; + display: block; + margin-right: 4px; + + width: 16px; + height: 16px; + } + + & > :nth-child(5) { + background-position: center; + background-repeat: no-repeat; + + background-image: url(/src/images/star.svg); + } +} + +.reviews { + width: 53px; + margin-top: 2px; +} + +.price { + margin-top: 24px; + + display: flex; + flex-direction: row; + justify-content: space-between; + + font-size: 12px; + font-weight: 400; + line-height: 18px; + + &-cost { + color: $main-accent; + + font-size: 16px; + font-weight: 700; + line-height: 18px; + text-align: right; + } +} + +.button { + position: static; + box-sizing: border-box; + margin-top: 16px; + padding-bottom: 1px; + + background-color: $blue-accent; + color: #fff; + + border-radius: 5px; + border: 1px solid $blue-accent; + + height: 40px; + width: 100%; + + &__text { + padding-left: 62px; + padding-bottom: 2px; + + color: #fff; + font-size: 14px; + font-weight: 700; + line-height: 16px; + font-optical-sizing: auto; + + width: 27px; + height: 16px; + } + + &:hover { + background-color: #fff; + color: $blue-accent; + + .button__text { + color: $blue-accent; + } + } } From 17b44330e60756ee6348a0a59c07c10849599dd6 Mon Sep 17 00:00:00 2001 From: Arsenii Kolos Date: Fri, 7 Feb 2025 20:02:57 +0200 Subject: [PATCH 2/3] add task solution --- src/index.html | 16 ++++++++----- src/styles/index.scss | 56 +++++++++++++++---------------------------- 2 files changed, 29 insertions(+), 43 deletions(-) diff --git a/src/index.html b/src/index.html index 4ba5234e25..36a49298b6 100644 --- a/src/index.html +++ b/src/index.html @@ -19,10 +19,9 @@ @@ -32,7 +31,13 @@ class="card" data-qa="card" > -
+
+ imac-photo +
@@ -60,10 +65,9 @@ - + BUY
diff --git a/src/styles/index.scss b/src/styles/index.scss index 611fb63be8..00f7338b25 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,22 +1,17 @@ -$size: 0; $main-accent: #060b35; $secondary: #616070; $blue-accent: #00acdc; html { color: $secondary; - - font-family: Roboto, serif; + font-family: Roboto, sans-serif; font-size: 10px; font-weight: 400; line-height: 14px; - text-align: left; - font-optical-sizing: auto; - font-style: normal; } body { - margin: $size; + margin: 0; } .card { @@ -30,13 +25,14 @@ body { width: 160px; height: 134px; - background-image: url('../images/imac.jpeg'); - background-size: contain; - background-repeat: no-repeat; - margin: 32px 19px 40px; } + &__image { + width: 100%; + height: 100%; + } + &__bottom { margin: 0 16px 16px; } @@ -92,6 +88,7 @@ body { .price { margin-top: 24px; + margin-bottom: 16px; display: flex; flex-direction: row; @@ -112,40 +109,25 @@ body { } .button { - position: static; - box-sizing: border-box; - margin-top: 16px; - padding-bottom: 1px; - - background-color: $blue-accent; - color: #fff; - - border-radius: 5px; - border: 1px solid $blue-accent; + display: block; + width: 166px; height: 40px; - width: 100%; - &__text { - padding-left: 62px; - padding-bottom: 2px; + border: $blue-accent 1px solid; + border-radius: 5px; - color: #fff; - font-size: 14px; - font-weight: 700; - line-height: 16px; - font-optical-sizing: auto; + background-color: #00acdc; + color: #fff; - width: 27px; - height: 16px; - } + font-weight: 700; + text-align: center; + line-height: 40px; + text-decoration: none; + font-size: 14px; &:hover { background-color: #fff; color: $blue-accent; - - .button__text { - color: $blue-accent; - } } } From ba66584c41a18c62ce40e1e4124fe23c0629d0a5 Mon Sep 17 00:00:00 2001 From: Arsenii Kolos Date: Fri, 7 Feb 2025 20:14:04 +0200 Subject: [PATCH 3/3] add task solution --- src/styles/index.css | 5 ----- src/styles/index.css.map | 1 - src/styles/index.scss | 4 ++-- 3 files changed, 2 insertions(+), 8 deletions(-) delete mode 100644 src/styles/index.css delete mode 100644 src/styles/index.css.map diff --git a/src/styles/index.css b/src/styles/index.css deleted file mode 100644 index 86a7aab54c..0000000000 --- a/src/styles/index.css +++ /dev/null @@ -1,5 +0,0 @@ -body { - margin: 0; -} - -/* # sourceMappingURL=index.css.map */ diff --git a/src/styles/index.css.map b/src/styles/index.css.map deleted file mode 100644 index de17118552..0000000000 --- a/src/styles/index.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE","file":"index.css"} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 00f7338b25..cf9c10e878 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -63,7 +63,7 @@ body { flex-direction: row; &_star { - background-image: url(/src/images/star-active.svg); + background-image: url(../images/star-active.svg); background-position: center; background-repeat: no-repeat; display: block; @@ -77,7 +77,7 @@ body { background-position: center; background-repeat: no-repeat; - background-image: url(/src/images/star.svg); + background-image: url(../images/star.svg); } }