From 4e5f6265377a9768d6b387bc8e8234ac7d2bc1b3 Mon Sep 17 00:00:00 2001 From: Oleh Tymoshchuk Date: Sun, 15 Dec 2024 15:24:11 +0200 Subject: [PATCH 1/2] final-code --- readme.md | 4 +- src/index.html | 49 ++++++++++++++- src/styles/index.scss | 138 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 188 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index b1f43ed970..383f3a343f 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://pryge.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://pryge.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..be68735e49 100644 --- a/src/index.html +++ b/src/index.html @@ -11,8 +11,55 @@ rel="stylesheet" href="./styles/index.scss" /> + + + -

Product cards

+
+ Apple 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..88e0a8364a 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,141 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + body { margin: 0; + font-family: Roboto, serif; +} + +p { + margin: 0; +} + +.card { + width: 200px; + height: 408px; + border: 1px solid #f3f3f3; + border-radius: 5px; + background-color: #fff; + position: relative; + padding: 32px 16px 16px; +} + +.imac-img { + width: 160px; + height: 134px; + margin: 0 auto 40px; + display: block; +} + +.name { + font-weight: 500; + font-size: 12px; + line-height: 18px; + + // margin: 0; + margin-bottom: 4px; +} + +.product-code { + font-weight: 400; + font-size: 10px; + line-height: 14px; + position: relative; + color: #616070; +} + +.stars-review { + display: flex; + justify-content: space-between; + align-items: center; + + font-weight: 400; + font-size: 10px; + line-height: 14px; + text-align: right; + + margin-top: 16px; +} + +.card-review { + color: #060b35; + align-items: flex-end; + margin-bottom: 24px; + font-size: 10px; + font-weight: 400; + line-height: 14px; + display: flex; +} + +.stars { + display: flex; + gap: 4px; + margin-bottom: 24px; + + &__star { + width: 16px; + height: 16px; + background-image: url(../images/star.svg); + background-repeat: no-repeat; + } + &__star:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); + } +} + +.price { + justify-content: space-between; + margin-bottom: 16px; + display: flex; + + &-text { + font-weight: 400; + font-size: 12px; + line-height: 18px; + + height: 18px; + width: 31px; + color: #616070; + } + + &-num { + width: 50px; + height: 18px; + + font-weight: 700; + font-size: 16px; + line-height: 18px; + text-align: right; + color: #060b35; + } +} + +.button { + font-family: Roboto, serif; + width: 166px; + height: 40px; + + font-weight: 700; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + align-items: center; + color: #fff; + box-sizing: border-box; + + border-radius: 5px; + background-color: #00acdc; + border: none; + justify-content: center; + + position: absolute; +} + +.button:hover { + background-color: transparent; + border: 1px solid #00acdc; + color: #00acdc; } From 21755b9bfbe7bfffedd4a7a4c9cc9ba6effd0032 Mon Sep 17 00:00:00 2001 From: Oleh Tymoshchuk Date: Sun, 15 Dec 2024 15:45:09 +0200 Subject: [PATCH 2/2] fixed-code --- src/index.html | 42 ++++++------- src/styles/card.scss | 91 ++++++++++++++++++++++++++++ src/styles/index.css | 135 ++++++++++++++++++++++++++++++++++++++++++ src/styles/page.scss | 9 +++ src/styles/stars.scss | 31 ++++++++++ 5 files changed, 285 insertions(+), 23 deletions(-) create mode 100644 src/styles/card.scss create mode 100644 src/styles/index.css create mode 100644 src/styles/page.scss create mode 100644 src/styles/stars.scss diff --git a/src/index.html b/src/index.html index be68735e49..0c537cdf61 100644 --- a/src/index.html +++ b/src/index.html @@ -1,65 +1,61 @@ - + Product cards - +
Apple Imac -

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

+ 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

+ diff --git a/src/styles/card.scss b/src/styles/card.scss new file mode 100644 index 0000000000..f230b9b3f8 --- /dev/null +++ b/src/styles/card.scss @@ -0,0 +1,91 @@ +.card { + box-sizing: border-box; + background-color: $color-white; + border: 1px solid #f3f3f3; + border-radius: 5px; + height: 408px; + width: 200px; + padding: 32px 16px 16px; + position: relative; + + &__image { + width: 160px; + height: 134px; + display: block; + margin: 0 auto 40px; + } + + &__name { + font-size: 12px; + font-weight: 500; + line-height: 18px; + color: $text-main-color; + margin-bottom: 4px; + } + + &__code { + font-weight: 400; + font-size: 10px; + color: $text-secondary-color; + line-height: 14px; + text-align: left; + position: relative; + } + + &__reviews { + color: $text-main-color; + font-size: 10px; + line-height: 14px; + font-weight: 400; + display: flex; + align-items: flex-end; + margin-bottom: 24px; + } + + &__cost { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + } + + &__price { + font-weight: 400; + font-size: 12px; + line-height: 18px; + color: $text-secondary-color; + text-align: left; + position: relative; + } + + &__total { + font-weight: 700; + font-size: 16px; + line-height: 18px; + color: $text-main-color; + display: flex; + align-items: flex-end; + } + + &__button { + position: absolute; + justify-content: center; + align-items: center; + width: 166px; + height: 40px; + right: 16px; + background: $color-blue-accent; + border: 1px solid $color-blue-accent; + border-radius: 5px; + font-weight: 700; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: $color-white; + box-sizing: border-box; + } + + &__button:hover { + color: $color-blue-accent; + background-color: $color-white; + } +} diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000000..9edced0ea2 --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,135 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: Roboto, sans-serif; +} + +.card { + box-sizing: border-box; + background-color: #fff; + border: 1px solid #f3f3f3; + border-radius: 5px; + width: 200px; + height: 408px; + padding: 32px 16px 16px; + position: relative; +} + +.card__image { + width: 160px; + height: 134px; + margin: 0 auto 40px; + display: block; +} + +.card__name { + color: #060b35; + margin-bottom: 4px; + font-size: 12px; + font-weight: 500; + line-height: 18px; +} + +.card__code { + color: #616070; + text-align: left; + font-size: 10px; + font-weight: 400; + line-height: 14px; + position: relative; +} + +.card__reviews { + color: #060b35; + align-items: flex-end; + margin-bottom: 24px; + font-size: 10px; + font-weight: 400; + line-height: 14px; + display: flex; +} + +.card__cost { + justify-content: space-between; + margin-bottom: 16px; + display: flex; +} + +.card__price { + color: #616070; + text-align: left; + font-size: 12px; + font-weight: 400; + line-height: 18px; + position: relative; +} + +.card__total { + color: #060b35; + align-items: flex-end; + font-size: 16px; + font-weight: 700; + line-height: 18px; + display: flex; +} + +.card__button { + text-transform: uppercase; + color: #fff; + box-sizing: border-box; + background: #00acdc; + border: 1px solid #00acdc; + border-radius: 5px; + justify-content: center; + align-items: center; + width: 166px; + height: 40px; + font-size: 14px; + font-weight: 700; + line-height: 16px; + position: absolute; + right: 16px; +} + +.card__button:hover { + color: #00acdc; + background-color: #fff; +} + +.stars { + gap: 4px; + margin-bottom: 24px; + display: flex; +} + +.stars__star { + background-position: center; + background-repeat: no-repeat; + width: 16px; + height: 16px; +} + +.stars__star:first-child { + margin-left: 0; +} + +.card__stars { + justify-content: space-between; + align-items: center; + margin-top: 16px; + display: flex; +} + +.stars .stars__star:nth-child(-n + 4) { + background-image: url('../images/star-active.svg'); +} + +.stars .stars__star:nth-child(5) { + background-image: url('../images/star.svg'); +} + +/*# sourceMappingURL=index.dff692dd.css.map */ diff --git a/src/styles/page.scss b/src/styles/page.scss new file mode 100644 index 0000000000..82680d19eb --- /dev/null +++ b/src/styles/page.scss @@ -0,0 +1,9 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Roboto, sans-serif; +} diff --git a/src/styles/stars.scss b/src/styles/stars.scss new file mode 100644 index 0000000000..3e92ddfd6b --- /dev/null +++ b/src/styles/stars.scss @@ -0,0 +1,31 @@ +.stars { + display: flex; + gap: 4px; + margin-bottom: 24px; + + &__star { + width: 16px; + height: 16px; + background-position: center; + background-repeat: no-repeat; + } + + &__star:first-child { + margin-left: 0; + } +} + +.card__stars { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 16px; +} + +.stars .stars__star:nth-child(-n + 4) { + background-image: url('../images/star-active.svg'); +} + +.stars .stars__star:nth-child(5) { + background-image: url('../images/star.svg'); +}