From f76551bb62c29ffaabb1b14de585d33ad3cc3043 Mon Sep 17 00:00:00 2001 From: Andrii Filipenko Date: Wed, 18 Dec 2024 19:43:01 +0200 Subject: [PATCH 1/4] add basic style --- src/index.html | 34 +++++++++++++++++++++++++++++++++- src/styles/index.scss | 43 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index 43745cc17f..eeb44d758b 100644 --- a/src/index.html +++ b/src/index.html @@ -7,12 +7,44 @@ content="width=device-width, initial-scale=1.0" /> Product cards + + + -

Product cards

+
+ imac image +
+ 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..d1ad9ff98c 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,46 @@ +.roboto-regular { + font-family: Roboto, sans-serif; + font-weight: 400; + font-style: normal; +} + +.roboto-medium { + font-family: Roboto, sans-serif; + font-weight: 500; + font-style: normal; +} + +.roboto-bold { + font-family: Roboto, sans-serif; + font-weight: 700; + font-style: normal; +} + +html { + font-family: Roboto, sans-serif; + font-size: 12px; + font-weight: 500; + line-height: 18px; +} + body { margin: 0; } + +.product-card { + box-sizing: border-box; + width: 200px; + height: 408px; + padding-inline: 16px; + padding-block: 32px 16px; + + border: 1px solid #f3f3f3; + border-radius: 5px; + + &__image { + width: 160px; + height: 134px; + + margin: 0 3px; + } +} From 1a0a09d727eef1df6cb61737afe2bd4f36639ec1 Mon Sep 17 00:00:00 2001 From: Andrii Date: Thu, 19 Dec 2024 00:57:10 +0200 Subject: [PATCH 2/4] add styles --- src/index.html | 23 +++++++-- src/styles/index.scss | 109 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 129 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index eeb44d758b..0f2a961a16 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,4 @@ + @@ -25,8 +26,12 @@ href="./styles/index.scss" /> + -
+
Product code: 195434
-
+
+
+
+
+
+
+
Reviews: 5
Price:
$2,199
- + + Buy +
diff --git a/src/styles/index.scss b/src/styles/index.scss index d1ad9ff98c..747c5323ea 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,7 @@ +$secondaryColor: #616070; +$buyButtonHeight: 40px; + +// #region fonts .roboto-regular { font-family: Roboto, sans-serif; font-weight: 400; @@ -16,11 +20,14 @@ font-style: normal; } +// #endregion + html { font-family: Roboto, sans-serif; font-size: 12px; font-weight: 500; line-height: 18px; + color: #060b35; } body { @@ -35,6 +42,7 @@ body { padding-block: 32px 16px; border: 1px solid #f3f3f3; + border-radius: 5px; &__image { @@ -43,4 +51,105 @@ body { margin: 0 3px; } + + &__name { + margin-top: 40px; + } + + &__code { + margin-top: 4px; + + font-family: Roboto, sans-serif; + font-size: 10px; + font-weight: 400; + line-height: 14px; + color: $secondaryColor; + } + + // #region review + &__review { + margin-top: 16px; + + height: 16px; + display: flex; + justify-content: space-between; + align-items: center; + } + + &__review-stars-container { + width: 96px; + display: flex; + justify-content: space-between; + } + + &__review-star { + background-image: url(../images/star.svg); + width: 16px; + height: 16px; + background-size: 80%; + background-position: center; + background-repeat: no-repeat; + } + + &__review-star:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); + } + + &__review-text { + width: 56px; + + font-size: 10px; + font-weight: 400; + line-height: 14px; + text-align: right; + } + + // #endregion + + // #region price + &__price { + margin-top: 24px; + + display: flex; + justify-content: space-between; + align-items: center; + } + + &__price-text { + font-family: Roboto, sans-serif; + font-weight: 400; + text-align: left; + color: $secondaryColor; + } + + &__price-numbers { + font-family: Roboto, sans-serif; + font-weight: 700; + text-align: right; + } + + // #endregion + + &__buy { + box-sizing: border-box; + display: block; + margin-top: 16px; + width: 166px; + height: $buyButtonHeight; + + line-height: $buyButtonHeight; + text-align: center; + text-decoration: none; + text-transform: uppercase; + color: #fff; + + background-color: #00acdc; + border-radius: 5px; + border: 1px solid #00acdc; + } + + &__buy:hover { + background-color: #fff; + color: #00acdc; + } } From b2e7e1c9b53051c867b8469e4e55567a3553a0ec Mon Sep 17 00:00:00 2001 From: Andrii Filipenko Date: Thu, 19 Dec 2024 17:46:05 +0200 Subject: [PATCH 3/4] test deploy --- src/index.html | 32 +++++++++--------- src/styles/_variables.scss | 5 +++ src/styles/index.scss | 66 ++++++++++++++++++++------------------ 3 files changed, 55 insertions(+), 48 deletions(-) create mode 100644 src/styles/_variables.scss diff --git a/src/index.html b/src/index.html index 0f2a961a16..e80dabfd97 100644 --- a/src/index.html +++ b/src/index.html @@ -29,34 +29,34 @@
imac image -
+
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/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 0000000000..79fd3c6c8c --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,5 @@ +$mainAccentColor: #060b35; +$secondaryColor: #616070; +$buyButtonHeight: 40px; +$buyBackgroundColor: #00acdc; +$buyTextColor: #fff; diff --git a/src/styles/index.scss b/src/styles/index.scss index 747c5323ea..0dc48b3461 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,5 +1,4 @@ -$secondaryColor: #616070; -$buyButtonHeight: 40px; +@use 'variables'; // #region fonts .roboto-regular { @@ -22,19 +21,32 @@ $buyButtonHeight: 40px; // #endregion -html { +body { + margin: 0; +} + +.stars { + &__star { + background-image: url(../images/star.svg); + width: 16px; + height: 16px; + background-size: 80%; + background-position: center; + background-repeat: no-repeat; + } + + &__star:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); + } +} + +.card { font-family: Roboto, sans-serif; font-size: 12px; font-weight: 500; line-height: 18px; - color: #060b35; -} + color: $mainAccentColor; -body { - margin: 0; -} - -.product-card { box-sizing: border-box; width: 200px; height: 408px; @@ -46,10 +58,11 @@ body { border-radius: 5px; &__image { + display: block; width: 160px; height: 134px; - margin: 0 3px; + margin-inline: 3px; } &__name { @@ -76,25 +89,12 @@ body { align-items: center; } - &__review-stars-container { + &__review-stars { width: 96px; display: flex; justify-content: space-between; } - &__review-star { - background-image: url(../images/star.svg); - width: 16px; - height: 16px; - background-size: 80%; - background-position: center; - background-repeat: no-repeat; - } - - &__review-star:nth-child(-n + 4) { - background-image: url(../images/star-active.svg); - } - &__review-text { width: 56px; @@ -125,6 +125,7 @@ body { &__price-numbers { font-family: Roboto, sans-serif; font-weight: 700; + font-size: 16px; text-align: right; } @@ -138,18 +139,19 @@ body { height: $buyButtonHeight; line-height: $buyButtonHeight; + font-size: 14; text-align: center; text-decoration: none; text-transform: uppercase; - color: #fff; + color: $buyTextColor; - background-color: #00acdc; + background-color: $buyBackgroundColor; border-radius: 5px; - border: 1px solid #00acdc; - } + border: 1px solid $buyBackgroundColor; - &__buy:hover { - background-color: #fff; - color: #00acdc; + &:hover { + background-color: $buyTextColor; + color: $buyBackgroundColor; + } } } From 60d17e17c3212fa8083555c06f5042c855249ffc Mon Sep 17 00:00:00 2001 From: Andrii Filipenko Date: Thu, 19 Dec 2024 18:10:17 +0200 Subject: [PATCH 4/4] second finish deploy --- src/styles/_body.scss | 24 +++++++ src/styles/_card.scss | 117 ++++++++++++++++++++++++++++++ src/styles/_stars.scss | 14 ++++ src/styles/index.scss | 159 +---------------------------------------- 4 files changed, 158 insertions(+), 156 deletions(-) create mode 100644 src/styles/_body.scss create mode 100644 src/styles/_card.scss create mode 100644 src/styles/_stars.scss diff --git a/src/styles/_body.scss b/src/styles/_body.scss new file mode 100644 index 0000000000..5629ebc7fa --- /dev/null +++ b/src/styles/_body.scss @@ -0,0 +1,24 @@ +// #region fonts +.roboto-regular { + font-family: Roboto, sans-serif; + font-weight: 400; + font-style: normal; +} + +.roboto-medium { + font-family: Roboto, sans-serif; + font-weight: 500; + font-style: normal; +} + +.roboto-bold { + font-family: Roboto, sans-serif; + font-weight: 700; + font-style: normal; +} + +// #endregion + +body { + margin: 0; +} diff --git a/src/styles/_card.scss b/src/styles/_card.scss new file mode 100644 index 0000000000..1d5d197acd --- /dev/null +++ b/src/styles/_card.scss @@ -0,0 +1,117 @@ +@use 'variables'; + +.card { + font-family: Roboto, sans-serif; + font-size: 12px; + font-weight: 500; + line-height: 18px; + color: variables.$mainAccentColor; + + box-sizing: border-box; + width: 200px; + height: 408px; + padding-inline: 16px; + padding-block: 32px 16px; + + border: 1px solid #f3f3f3; + + border-radius: 5px; + + &__image { + display: block; + width: 160px; + height: 134px; + + margin-inline: 3px; + } + + &__name { + margin-top: 40px; + } + + &__code { + margin-top: 4px; + + font-family: Roboto, sans-serif; + font-size: 10px; + font-weight: 400; + line-height: 14px; + color: variables.$secondaryColor; + } + + // #region review + &__review { + margin-top: 16px; + + height: 16px; + display: flex; + justify-content: space-between; + align-items: center; + } + + &__review-stars { + width: 96px; + display: flex; + justify-content: space-between; + } + + &__review-text { + width: 56px; + + font-size: 10px; + font-weight: 400; + line-height: 14px; + text-align: right; + } + + // #endregion + + // #region price + &__price { + margin-top: 24px; + + display: flex; + justify-content: space-between; + align-items: center; + } + + &__price-text { + font-family: Roboto, sans-serif; + font-weight: 400; + text-align: left; + color: variables.$secondaryColor; + } + + &__price-numbers { + font-family: Roboto, sans-serif; + font-weight: 700; + font-size: 16px; + text-align: right; + } + + // #endregion + + &__buy { + box-sizing: border-box; + display: block; + margin-top: 16px; + width: 166px; + height: variables.$buyButtonHeight; + + line-height: variables.$buyButtonHeight; + font-size: 14px; + text-align: center; + text-decoration: none; + text-transform: uppercase; + color: variables.$buyTextColor; + + background-color: variables.$buyBackgroundColor; + border-radius: 5px; + border: 1px solid variables.$buyBackgroundColor; + + &:hover { + background-color: variables.$buyTextColor; + color: variables.$buyBackgroundColor; + } + } +} diff --git a/src/styles/_stars.scss b/src/styles/_stars.scss new file mode 100644 index 0000000000..c3d74e9e8f --- /dev/null +++ b/src/styles/_stars.scss @@ -0,0 +1,14 @@ +.stars { + &__star { + background-image: url(../images/star.svg); + width: 16px; + height: 16px; + background-size: 80%; + background-position: center; + background-repeat: no-repeat; + } + + &__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 0dc48b3461..a9c25ab2c9 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,157 +1,4 @@ @use 'variables'; - -// #region fonts -.roboto-regular { - font-family: Roboto, sans-serif; - font-weight: 400; - font-style: normal; -} - -.roboto-medium { - font-family: Roboto, sans-serif; - font-weight: 500; - font-style: normal; -} - -.roboto-bold { - font-family: Roboto, sans-serif; - font-weight: 700; - font-style: normal; -} - -// #endregion - -body { - margin: 0; -} - -.stars { - &__star { - background-image: url(../images/star.svg); - width: 16px; - height: 16px; - background-size: 80%; - background-position: center; - background-repeat: no-repeat; - } - - &__star:nth-child(-n + 4) { - background-image: url(../images/star-active.svg); - } -} - -.card { - font-family: Roboto, sans-serif; - font-size: 12px; - font-weight: 500; - line-height: 18px; - color: $mainAccentColor; - - box-sizing: border-box; - width: 200px; - height: 408px; - padding-inline: 16px; - padding-block: 32px 16px; - - border: 1px solid #f3f3f3; - - border-radius: 5px; - - &__image { - display: block; - width: 160px; - height: 134px; - - margin-inline: 3px; - } - - &__name { - margin-top: 40px; - } - - &__code { - margin-top: 4px; - - font-family: Roboto, sans-serif; - font-size: 10px; - font-weight: 400; - line-height: 14px; - color: $secondaryColor; - } - - // #region review - &__review { - margin-top: 16px; - - height: 16px; - display: flex; - justify-content: space-between; - align-items: center; - } - - &__review-stars { - width: 96px; - display: flex; - justify-content: space-between; - } - - &__review-text { - width: 56px; - - font-size: 10px; - font-weight: 400; - line-height: 14px; - text-align: right; - } - - // #endregion - - // #region price - &__price { - margin-top: 24px; - - display: flex; - justify-content: space-between; - align-items: center; - } - - &__price-text { - font-family: Roboto, sans-serif; - font-weight: 400; - text-align: left; - color: $secondaryColor; - } - - &__price-numbers { - font-family: Roboto, sans-serif; - font-weight: 700; - font-size: 16px; - text-align: right; - } - - // #endregion - - &__buy { - box-sizing: border-box; - display: block; - margin-top: 16px; - width: 166px; - height: $buyButtonHeight; - - line-height: $buyButtonHeight; - font-size: 14; - text-align: center; - text-decoration: none; - text-transform: uppercase; - color: $buyTextColor; - - background-color: $buyBackgroundColor; - border-radius: 5px; - border: 1px solid $buyBackgroundColor; - - &:hover { - background-color: $buyTextColor; - color: $buyBackgroundColor; - } - } -} +@use 'body'; +@use 'stars'; +@use 'card';