From f4ed0958d94154734effc73f879c361e6c7c4f67 Mon Sep 17 00:00:00 2001 From: Wilton Martins Date: Tue, 17 Dec 2024 17:47:31 -0300 Subject: [PATCH 1/3] add task solution --- readme.md | 4 +- src/index.html | 75 +++++++++++++++++++++++++- src/styles/index.scss | 121 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 197 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index b1f43ed970..303f4ba03a 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://wiltonmartinsdev.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://wiltonmartinsdev.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..443ab7cbda 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,19 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> + + + Product cards -

Product cards

+
+
+ imac +
+

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

+

Product code: 195434

+ +
+ + + + + + + +

Reviews: 5

+
+ +
+

Price:

+

$2,199

+
+ +
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..febd81d5cd 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,124 @@ +$main-accent-color: #060b35; +$secondary-color: #616070; +$blue-accent-color: #00acdc; + body { margin: 0; + + color: $main-accent-color; + + font-family: Roboto, sans-serif; + font-size: 16px; +} + +.product-card { + width: 165px; + + padding: 32px 16px 16px; + + background-color: #fff; + color: $main-accent-color; + + border: 1px solid #f3f3f3; + border-radius: 5px; + + &__image-container { + display: flex; + justify-content: center; + width: 100%; + } + + &__image { + width: 160px; + height: 134px; + + margin-bottom: 30px; + } + + &__title { + font-size: 12px; + font-weight: 500; + line-height: 18px; + text-align: left; + + width: 166px; + } + + &__code { + color: $secondary-color; + + font-size: 10px; + font-weight: 400; + line-height: 14px; + text-align: left; + } + + &__reviews { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__price { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__star { + width: 20px; + height: 20px; + } + + &__reviews-text { + font-size: 10px; + + margin-left: 8px; + } + + &__price-label { + font-size: 12px; + line-height: 18px; + font-weight: 400; + + color: $secondary-color; + } + + &__price-value { + font-size: 16px; + line-height: 18px; + + font-weight: 700; + + color: #000; + } + + &__buy-button { + width: 100%; + height: 40px; + + border-radius: 5px; + border: none; + + background: var(--blue-accent-color, #00acdc); + color: #fff; + + margin-top: 8px; + padding: 8px 16px; + + font-size: 14px; + line-height: 16px; + font-weight: 700; + text-decoration: none; + text-transform: uppercase; + + cursor: pointer; + + &:hover { + background-color: #fff; + color: $blue-accent-color; + + border: 1px solid $blue-accent-color; + } + } } From 709f9e67169cf63708afa5c2d984896d52fcd80d Mon Sep 17 00:00:00 2001 From: Wilton Martins Date: Wed, 18 Dec 2024 22:25:21 -0300 Subject: [PATCH 2/3] add task solution --- src/index.html | 38 +++-------- src/styles/index.scss | 120 ++--------------------------------- src/styles/product-card.scss | 109 +++++++++++++++++++++++++++++++ src/styles/stars.scss | 26 ++++++++ src/styles/variables.scss | 3 + 5 files changed, 151 insertions(+), 145 deletions(-) create mode 100644 src/styles/product-card.scss create mode 100644 src/styles/stars.scss create mode 100644 src/styles/variables.scss diff --git a/src/index.html b/src/index.html index 443ab7cbda..e17b750c0f 100644 --- a/src/index.html +++ b/src/index.html @@ -22,7 +22,7 @@ Product cards @@ -43,35 +43,13 @@

Product code: 195434

- - - - - - - +
+
+
+
+
+
+

Reviews: 5

diff --git a/src/styles/index.scss b/src/styles/index.scss index febd81d5cd..9ecef78413 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,124 +1,14 @@ -$main-accent-color: #060b35; -$secondary-color: #616070; -$blue-accent-color: #00acdc; +@import 'variables'; +@import 'product-card'; +@import 'stars'; body { margin: 0; + padding: 0; + box-sizing: border-box; color: $main-accent-color; font-family: Roboto, sans-serif; font-size: 16px; } - -.product-card { - width: 165px; - - padding: 32px 16px 16px; - - background-color: #fff; - color: $main-accent-color; - - border: 1px solid #f3f3f3; - border-radius: 5px; - - &__image-container { - display: flex; - justify-content: center; - width: 100%; - } - - &__image { - width: 160px; - height: 134px; - - margin-bottom: 30px; - } - - &__title { - font-size: 12px; - font-weight: 500; - line-height: 18px; - text-align: left; - - width: 166px; - } - - &__code { - color: $secondary-color; - - font-size: 10px; - font-weight: 400; - line-height: 14px; - text-align: left; - } - - &__reviews { - display: flex; - justify-content: space-between; - align-items: center; - } - - &__price { - display: flex; - justify-content: space-between; - align-items: center; - } - - &__star { - width: 20px; - height: 20px; - } - - &__reviews-text { - font-size: 10px; - - margin-left: 8px; - } - - &__price-label { - font-size: 12px; - line-height: 18px; - font-weight: 400; - - color: $secondary-color; - } - - &__price-value { - font-size: 16px; - line-height: 18px; - - font-weight: 700; - - color: #000; - } - - &__buy-button { - width: 100%; - height: 40px; - - border-radius: 5px; - border: none; - - background: var(--blue-accent-color, #00acdc); - color: #fff; - - margin-top: 8px; - padding: 8px 16px; - - font-size: 14px; - line-height: 16px; - font-weight: 700; - text-decoration: none; - text-transform: uppercase; - - cursor: pointer; - - &:hover { - background-color: #fff; - color: $blue-accent-color; - - border: 1px solid $blue-accent-color; - } - } -} diff --git a/src/styles/product-card.scss b/src/styles/product-card.scss new file mode 100644 index 0000000000..60cc9fea54 --- /dev/null +++ b/src/styles/product-card.scss @@ -0,0 +1,109 @@ +.product-card { + max-width: 200px; + min-height: 408px; + + padding: 32px 16px 16px; + + background-color: #fff; + color: $main-accent-color; + + border: 1px solid #f3f3f3; + border-radius: 5px; + + &__image-container { + display: flex; + justify-content: center; + width: 100%; + } + + &__image { + width: 160px; + height: 134px; + + margin-bottom: 30px; + } + + &__title { + font-size: 12px; + font-weight: 500; + line-height: 18px; + text-align: left; + + color: $main-accent-color; + } + + &__code { + color: $secondary-color; + + font-size: 10px; + font-weight: 400; + line-height: 14px; + text-align: left; + } + + &__reviews { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__price { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__reviews-text { + font-size: 10px; + + color: $main-accent-color; + + margin-left: 8px; + } + + &__price-label { + font-size: 12px; + line-height: 18px; + font-weight: 400; + + color: $secondary-color; + } + + &__price-value { + font-size: 16px; + line-height: 18px; + + font-weight: 700; + + color: $main-accent-color; + } + + &__buy-button { + width: 100%; + height: 40px; + + border-radius: 5px; + border: none; + + background: $blue-accent-color; + color: #fff; + + margin-top: 8px; + padding: 8px 16px; + + font-size: 14px; + line-height: 16px; + font-weight: 700; + text-decoration: none; + text-transform: uppercase; + + cursor: pointer; + + &:hover { + background-color: #fff; + color: $blue-accent-color; + + border: 1px solid $blue-accent-color; + } + } +} diff --git a/src/styles/stars.scss b/src/styles/stars.scss new file mode 100644 index 0000000000..d31c2d4274 --- /dev/null +++ b/src/styles/stars.scss @@ -0,0 +1,26 @@ +.stars { + display: flex; + align-items: center; + justify-content: space-around; + + height: 16px; + width: 96px; + + &__star { + width: 13px; + height: 12px; + margin-right: 5px; + background-image: url(../images/star.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + &:last-child { + margin-right: 0; + } + + &:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); + } + } +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000000..811f4e37a2 --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,3 @@ +$main-accent-color: #060b35; +$secondary-color: #616070; +$blue-accent-color: #00acdc; From 43fe5ca5e2edfad11cb048f53b2834625251d026 Mon Sep 17 00:00:00 2001 From: Wilton Martins Date: Thu, 19 Dec 2024 13:46:54 -0300 Subject: [PATCH 3/3] add task solution --- src/styles/index.scss | 4 +++- src/styles/product-card.scss | 22 +++++++++++++++------- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 9ecef78413..65dd996fd9 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,11 +2,13 @@ @import 'product-card'; @import 'stars'; -body { +* { margin: 0; padding: 0; box-sizing: border-box; +} +body { color: $main-accent-color; font-family: Roboto, sans-serif; diff --git a/src/styles/product-card.scss b/src/styles/product-card.scss index 60cc9fea54..5a8c3f3513 100644 --- a/src/styles/product-card.scss +++ b/src/styles/product-card.scss @@ -13,14 +13,15 @@ &__image-container { display: flex; justify-content: center; + width: 100%; + + margin-bottom: 40px; } &__image { width: 160px; height: 134px; - - margin-bottom: 30px; } &__title { @@ -29,16 +30,21 @@ line-height: 18px; text-align: left; + margin-bottom: 4px; + color: $main-accent-color; } &__code { - color: $secondary-color; - font-size: 10px; font-weight: 400; line-height: 14px; text-align: left; + + margin-top: 4px; + margin-bottom: 16px; + + color: $secondary-color; } &__reviews { @@ -51,14 +57,17 @@ display: flex; justify-content: space-between; align-items: center; + + margin-top: 24px; + margin-bottom: 16px; } &__reviews-text { font-size: 10px; - color: $main-accent-color; - margin-left: 8px; + + color: $main-accent-color; } &__price-label { @@ -88,7 +97,6 @@ background: $blue-accent-color; color: #fff; - margin-top: 8px; padding: 8px 16px; font-size: 14px;