From 364c9e8934f2a2661c11d975768fb4ef1d8bb231 Mon Sep 17 00:00:00 2001 From: Anastasiia Ihush Date: Sun, 29 Dec 2024 22:34:07 -0800 Subject: [PATCH 1/5] create product card --- readme.md | 14 +++--- src/index.html | 47 +++++++++++++++++- src/styles/blocks/card.scss | 87 +++++++++++++++++++++++++++++++++ src/styles/blocks/stars.scss | 15 ++++++ src/styles/index.scss | 8 +++ src/styles/utils/variables.scss | 6 +++ 6 files changed, 169 insertions(+), 8 deletions(-) create mode 100644 src/styles/blocks/card.scss create mode 100644 src/styles/blocks/stars.scss create mode 100644 src/styles/utils/variables.scss diff --git a/readme.md b/readme.md index b1f43ed970..da9f2e6538 100644 --- a/readme.md +++ b/readme.md @@ -23,13 +23,13 @@ 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://anastat1on.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://anastat1on.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. -- [ ] there 2 BEM blocks `card` and `stars` each in their own file -- [ ] SCSS Nesting is used for `elements`, `modifiers` and `pseudo-classes` -- [ ] SCSS Variables are used for main values and placed in a **separate file** -- [ ] all `stars--N` modifiers work as expected (Highlight first `N` stars) -- [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) +- [x] there 2 BEM blocks `card` and `stars` each in their own file +- [x] SCSS Nesting is used for `elements`, `modifiers` and `pseudo-classes` +- [x] SCSS Variables are used for main values and placed in a **separate file** +- [x] all `stars--N` modifiers work as expected (Highlight first `N` stars) +- [x] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) diff --git a/src/index.html b/src/index.html index 43745cc17f..fc0473668f 100644 --- a/src/index.html +++ b/src/index.html @@ -11,8 +11,53 @@ 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
+
+ +
+ Buy +
+
+
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..5ff1093787 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,87 @@ +.card { + width: 200px; + height: 400px; + margin: 40px; + + padding: 32px 19px 16px; + + border: 1px solid rgb(214, 212, 212); + border-radius: 5px; + box-sizing: border-box; + align-items: center; + + &__item-image { + background: no-repeat; + background-image: url(../images/imac.jpeg); + background-size: cover; + + height: 134px; + } + + &__content { + height: 100%; + width: 100%; + + display: flex; + flex-direction: column; + justify-content: space-between; + } + + &__item-name { + font-size: 12px; + font-weight: 500; + } + + &__item-code { + margin-top: 4px; + font-size: 10px; + color: $light-color-text; + } +} + +.review { + display: flex; + justify-content: space-between; + + &__comments { + font-size: 10px; + line-height: 14px; + } +} + +.price { + display: flex; + justify-content: space-between; + + &__item { + color: $light-color-text; + font-size: 12px; + } + + &__amount { + font-size: 16px; + font-weight: 700; + } +} + +.buy { + height: 40px; + border-radius: 5px; + + color: white; + text-transform: uppercase; + + background: $buy-button-color; + + font-size: 14px; + font-weight: 700; + text-align: center; + align-content: center; + + &:hover { + border: 1px solid $buy-button-color; + background-color: white; + color: $buy-button-color; + box-sizing: border-box; + } +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..bcc42fa731 --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,15 @@ +.review__star { + display: flex; + + &-stars { + background-image: url(../images/star.svg); + background-repeat: no-repeat; + width: 16px; + height: 16px; + padding: 2px; + } + + & .review__star-stars:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..0a824b8f16 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,11 @@ +@import './utils/variables'; +@import './blocks/card'; +@import './blocks/stars'; + body { margin: 0; + + font-family: $main-font; + line-height: $main-line-height; + font-weight: $main-font-weigh; } diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..da2143e1a9 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,6 @@ +$main-font: 'Roboto', 'Arial', sans-serif; +$main-color-text: rgba(6, 11, 53, 1); +$main-font-weigh: 400; +$light-color-text: rgba(97, 96, 112, 1); +$buy-button-color: rgba(0, 172, 220, 1); +$main-line-height: 18px; From df1da9c193fe6b7d6cd4f414eb07f4e433c46f6b Mon Sep 17 00:00:00 2001 From: Anastasiia Ihush Date: Sun, 29 Dec 2024 22:40:02 -0800 Subject: [PATCH 2/5] fix typo --- src/styles/index.scss | 2 +- src/styles/utils/variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 0a824b8f16..91f044781c 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -7,5 +7,5 @@ body { font-family: $main-font; line-height: $main-line-height; - font-weight: $main-font-weigh; + font-weight: $main-font-weight; } diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss index da2143e1a9..9757107652 100644 --- a/src/styles/utils/variables.scss +++ b/src/styles/utils/variables.scss @@ -1,6 +1,6 @@ $main-font: 'Roboto', 'Arial', sans-serif; $main-color-text: rgba(6, 11, 53, 1); -$main-font-weigh: 400; +$main-font-weight: 400; $light-color-text: rgba(97, 96, 112, 1); $buy-button-color: rgba(0, 172, 220, 1); $main-line-height: 18px; From c31c657a05706668c76ab9b6bdaac7e62aaaa82c Mon Sep 17 00:00:00 2001 From: Anastasiia Ihush Date: Tue, 7 Jan 2025 23:28:17 -0800 Subject: [PATCH 3/5] fixing as per suggestionss --- src/index.html | 55 ++++++++++++++++++------------------ src/styles/blocks/card.scss | 33 +++++++++------------- src/styles/blocks/stars.scss | 3 +- 3 files changed, 43 insertions(+), 48 deletions(-) diff --git a/src/index.html b/src/index.html index fc0473668f..7e0b19217f 100644 --- a/src/index.html +++ b/src/index.html @@ -21,43 +21,44 @@ class="card" data-qa="card" > -
-
-
-
- APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) -
-
Product code: 195434
-
-
-
-
+ Apple iMac computer +

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

+

Product code: 195434

-
+
+
+
-
+
-
+
-
-
+
-
Reviews: 5
+
-
-
Price:
+

Reviews: 5

+
-
$2,199
-
+
+

Price:

-
- Buy -
+

$2,199

+ + + Buy +
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss index 5ff1093787..8fca262225 100644 --- a/src/styles/blocks/card.scss +++ b/src/styles/blocks/card.scss @@ -1,47 +1,39 @@ .card { width: 200px; - height: 400px; - margin: 40px; - - padding: 32px 19px 16px; + height: auto; + padding: 32px 16px 16px; border: 1px solid rgb(214, 212, 212); border-radius: 5px; - box-sizing: border-box; - align-items: center; - &__item-image { - background: no-repeat; - background-image: url(../images/imac.jpeg); - background-size: cover; + box-sizing: border-box; - height: 134px; - } + display: flex; + flex-direction: column; + justify-content: space-between; - &__content { - height: 100%; + &__product-image-mac { + height: auto; width: 100%; - - display: flex; - flex-direction: column; - justify-content: space-between; } &__item-name { font-size: 12px; font-weight: 500; + margin: 40 0 0; } &__item-code { - margin-top: 4px; font-size: 10px; color: $light-color-text; + margin-top: 4px; } } .review { display: flex; justify-content: space-between; + align-items: center; &__comments { font-size: 10px; @@ -52,6 +44,7 @@ .price { display: flex; justify-content: space-between; + align-items: center; &__item { color: $light-color-text; @@ -64,7 +57,7 @@ } } -.buy { +.buy-button { height: 40px; border-radius: 5px; diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss index bcc42fa731..5681150fbe 100644 --- a/src/styles/blocks/stars.scss +++ b/src/styles/blocks/stars.scss @@ -4,9 +4,10 @@ &-stars { background-image: url(../images/star.svg); background-repeat: no-repeat; + background-position: center; width: 16px; height: 16px; - padding: 2px; + margin-right: 4px; } & .review__star-stars:nth-child(-n + 4) { From 98176f06d572c4e86638bab8315e28213b2d86d4 Mon Sep 17 00:00:00 2001 From: Anastasiia Ihush Date: Thu, 9 Jan 2025 23:10:55 -0800 Subject: [PATCH 4/5] fixing px --- src/index.html | 2 +- src/styles/blocks/card.scss | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index 7e0b19217f..d57b99a5b2 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@ Product cards Date: Thu, 9 Jan 2025 23:33:12 -0800 Subject: [PATCH 5/5] fixing 2x --- src/styles/blocks/card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss index f3e61bfc4e..f277a56bc3 100644 --- a/src/styles/blocks/card.scss +++ b/src/styles/blocks/card.scss @@ -15,7 +15,7 @@ &__product-image-mac { height: auto; width: 100%; - align-items: center; + display: block; } &__item-name {