From 50934fd3a3ce4d88efdc2b41f9e2467c6c080889 Mon Sep 17 00:00:00 2001 From: diachkinainna Date: Thu, 12 Dec 2024 14:41:46 +0200 Subject: [PATCH 1/3] add solution --- src/index.html | 55 +++++++++++++++++- src/styles/blocks/card.scss | 98 +++++++++++++++++++++++++++++++++ src/styles/blocks/page.scss | 10 ++++ src/styles/blocks/stars.scss | 20 +++++++ src/styles/index.scss | 7 ++- src/styles/utils/variables.scss | 4 ++ 6 files changed, 188 insertions(+), 6 deletions(-) create mode 100644 src/styles/blocks/card.scss create mode 100644 src/styles/blocks/page.scss create mode 100644 src/styles/blocks/stars.scss create mode 100644 src/styles/utils/variables.scss diff --git a/src/index.html b/src/index.html index 43745cc17f..fa3d418d67 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,8 @@ - + + + + - -

Product cards

+ +
+ product photo +

+ 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..19b13b1369 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,98 @@ +.product-card { + box-sizing: border-box; + padding-inline: 16px; + width: 200px; + background-color: $main-background-color; + display: flex; + flex-direction: column; + border-radius: 5px; + border: 1px solid rgba(243, 243, 243, 1); + + &__image { + object-position: center; + margin-inline: 3px; + width: 160px; + height: 134px; + margin-top: 32px; + } + + &__product-title { + margin-top: 40px; + margin-bottom: 0; + height: 36px; + font-size: 12px; + line-height: 18px; + text-align: left; + font-weight: 500; + color: $bold-font-color; + } + + &__product-code { + align-self: start; + margin-top: 4px; + margin-bottom: 0; + width: 98px; + height: 14px; + line-height: 14px; + color: $main-font-color; + } + + &__rating { + display: flex; + justify-content: space-between; + align-items: center; + height: 16px; + margin-top: 16px; + } + + &__price { + height: 18px; + margin-top: 24px; + display: flex; + align-items: center; + justify-content: space-between; + + &-name { + color: $main-font-color; + margin: 0; + width: 31px; + font-size: 12px; + line-height: 18px; + height: 18px; + } + + &-value { + margin: 0; + line-height: 18px; + font-size: 16px; + font-weight: 700; + width: 50px; + } + } + + &__bottom-buy { + box-sizing: border-box; + text-align: center; + line-height: 40px; + height: 40px; + background-color: $extra-color; + color: rgba(255, 255, 255, 1); + font-size: 14px; + font-weight: 700; + border-radius: 5px; + margin-top: 16px; + margin-bottom: 16px; + + &:hover { + border: 1px solid $extra-color; + background-color: $main-background-color; + color: $extra-color; + line-height: 38px; + } + } +} + +.reviews { + color: $bold-font-color; + line-height: 14px; +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..9628481443 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,10 @@ +.page { + font-family: Roboto, Arial, sans-serif; + font-weight: 400; + font-style: normal; + font-size: 10px; + + &__body { + margin: 0; + } +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..33677b8c2a --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,20 @@ +.stars { + display: flex; + + &__star { + margin-right: 4px; + height: 16px; + width: 16px; + background-image: url(../images/star.svg); + background-repeat: no-repeat; + background-position: center; + + &:last-child { + margin-right: 0; + } + } +} + +.stars__star: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..6b5ceaa586 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,4 @@ -body { - margin: 0; -} +@import 'utils/variables'; +@import 'blocks/page'; +@import 'blocks/card'; +@import 'blocks/stars'; diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..22d2f7d833 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,4 @@ +$main-background-color: rgba(255, 255, 255, 1); +$extra-color: rgba(0, 172, 220, 1); +$main-font-color: rgba(97, 96, 112, 1); +$bold-font-color: rgba(6, 11, 53, 1); From 309806c8c3e96c18e99f32862703fc40baaee84f Mon Sep 17 00:00:00 2001 From: diachkinainna Date: Thu, 12 Dec 2024 14:59:42 +0200 Subject: [PATCH 2/3] fixed button --- src/index.html | 6 +++--- src/styles/blocks/card.scss | 7 ++----- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index fa3d418d67..942977b1d8 100644 --- a/src/index.html +++ b/src/index.html @@ -56,12 +56,12 @@

Price:

$2,199

- BUY - + diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss index 19b13b1369..9a005aa143 100644 --- a/src/styles/blocks/card.scss +++ b/src/styles/blocks/card.scss @@ -70,11 +70,9 @@ } } - &__bottom-buy { - box-sizing: border-box; - text-align: center; - line-height: 40px; + &__button-buy { height: 40px; + border: none; background-color: $extra-color; color: rgba(255, 255, 255, 1); font-size: 14px; @@ -87,7 +85,6 @@ border: 1px solid $extra-color; background-color: $main-background-color; color: $extra-color; - line-height: 38px; } } } From 4d0256752eec3743c12436edae729f61f705f40d Mon Sep 17 00:00:00 2001 From: diachkinainna Date: Thu, 12 Dec 2024 15:56:54 +0200 Subject: [PATCH 3/3] fixed product-card__rating --- src/styles/blocks/card.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss index 9a005aa143..8c3adcd3ea 100644 --- a/src/styles/blocks/card.scss +++ b/src/styles/blocks/card.scss @@ -40,7 +40,7 @@ &__rating { display: flex; justify-content: space-between; - align-items: center; + align-items: end; height: 16px; margin-top: 16px; } @@ -92,4 +92,5 @@ .reviews { color: $bold-font-color; line-height: 14px; + margin: 0; }