From 0847a1944fdbc8cbe11c4a606086e9c3b2bb06d5 Mon Sep 17 00:00:00 2001 From: Alexander Date: Sun, 5 Jul 2026 12:28:57 +0300 Subject: [PATCH 1/3] solution: layout catalog --- src/index.html | 376 +++++++++++++++++++++++++++++++- src/styles/blocks/card.scss | 90 ++++++++ src/styles/blocks/catalog.scss | 29 +++ src/styles/blocks/header.scss | 82 +++++++ src/styles/blocks/stars.scss | 24 ++ src/styles/index.scss | 3 - src/styles/main.scss | 20 ++ src/styles/utils/mixin.scss | 13 ++ src/styles/utils/variables.scss | 22 ++ 9 files changed, 654 insertions(+), 5 deletions(-) create mode 100644 src/styles/blocks/card.scss create mode 100644 src/styles/blocks/catalog.scss create mode 100644 src/styles/blocks/header.scss create mode 100644 src/styles/blocks/stars.scss delete mode 100644 src/styles/index.scss create mode 100644 src/styles/main.scss create mode 100644 src/styles/utils/mixin.scss create mode 100644 src/styles/utils/variables.scss diff --git a/src/index.html b/src/index.html index 9cff78eeb7..c7ae09c376 100644 --- a/src/index.html +++ b/src/index.html @@ -17,11 +17,383 @@ /> -

Catalog

+
+
+ + + +
+
+
+
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+ Reviews: 5 +
+
+ Price: + $2,199 +
+ + Buy + +
+
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+ Reviews: 5 +
+
+ Price: + $2,199 +
+ + Buy + +
+
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+ Reviews: 5 +
+
+ Price: + $2,199 +
+ + Buy + +
+
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+ Reviews: 5 +
+
+ Price: + $2,199 +
+ + Buy + +
+
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+ Reviews: 5 +
+
+ Price: + $2,199 +
+ + Buy + +
+
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+ Reviews: 5 +
+
+ Price: + $2,199 +
+ + Buy + +
+
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+ Reviews: 5 +
+
+ Price: + $2,199 +
+ + Buy + +
+
+ imac +

+ 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..748fb3a30f --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,90 @@ +.card { + display: flex; + flex-direction: column; + align-items: center; + background-color: $color-white; + border: 1px solid $color-gray-border; + border-radius: 5px; + width: 200px; + padding: 16px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.2); + + &__title { + color: $color-card-hover; + } + } + + &__image { + display: block; + width: 100%; + max-width: 160px; + height: 134px; + margin: 16px auto 0; + object-fit: cover; + } + &__title { + @include text-style(12px, 500, 150%, $color-main-accent); + + padding-top: 40px; + margin: 0; + transition: color 0.3s; + } + &__product-code { + @include text-style(10px, 400, 140%, $color-secondary); + + padding-top: 4px; + width: 100%; + margin: 0; + } + &__rating { + @include flex-between; + + padding-top: 16px; + width: 100%; + } + &__reviews-count { + @include text-style(10px, 400, 140%, $color-main-accent); + + display: block; + } + &__price-container { + @include flex-between; + + width: 100%; + padding-top: 24px; + } + &__price-label { + @include text-style(12px, 400, 150%, $color-secondary); + + display: block; + } + &__price-value { + @include text-style(16px, 700, 113%, $color-main-accent); + + display: block; + } + &__link { + @include text-style(14px, 700, 40px, $color-white); + + display: block; + text-align: center; + text-decoration: none; + text-transform: uppercase; + margin-top: 16px; + width: 100%; + height: 40px; + border: 1px solid $color-blue-accent; + border-radius: 5px; + background-color: $color-blue-accent; + box-sizing: border-box; + transition: color 0.3s; + + &:hover { + background-color: $color-white; + color: $color-blue-accent; + } + } +} diff --git a/src/styles/blocks/catalog.scss b/src/styles/blocks/catalog.scss new file mode 100644 index 0000000000..1f039ae3ff --- /dev/null +++ b/src/styles/blocks/catalog.scss @@ -0,0 +1,29 @@ +.cards-container { + --column-count: 1; + + display: grid; + grid-template-columns: repeat(var(--column-count), 200px); + gap: 46px 48px; + justify-content: center; + padding: 50px 40px; + width: 100%; + margin: 0 auto; +} + +@media (min-width: 488px) { + .cards-container { + --column-count: 2; + } +} + +@media (min-width: 768px) { + .cards-container { + --column-count: 3; + } +} + +@media (min-width: 1024px) { + .cards-container { + --column-count: 4; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..93fbc5c3b2 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,82 @@ +.header { + display: flex; + justify-content: center; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); + background: $color-white; + + &__container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + max-width: 1200px; + padding: 0 50px; + } +} + +.logo { + display: inline-block; + + &__image { + display: block; + width: 40px; + height: auto; + } +} + +.nav { + display: flex; + + &__list { + display: flex; + align-items: center; + list-style: none; + margin: 0; + padding: 0; + } + + &__item { + position: relative; + margin: 0 10px; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + } + + &__link { + display: flex; + align-items: center; + color: $color-dark-blue; + font-size: 12px; + text-transform: uppercase; + transition: color 0.3s; + height: 60px; + text-decoration: none; + font-weight: 500; + + &:hover { + color: $color-blue; + } + + &.is-active { + color: $color-blue; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 4px; + border-radius: 8px; + background-color: $color-blue; + color: $color-blue; + } + } + } +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..aee39813db --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,24 @@ +.stars { + display: flex; + + &__star { + width: 16px; + height: 16px; + background-image: url(../images/star.svg); + background-repeat: no-repeat; + background-position: center; + margin-right: 4px; + + &:last-child { + margin-right: 0; + } + } + + @for $star from 1 through 5 { + &--active-#{$star} { + .stars__star:nth-child(-n + #{$star}) { + background-image: url(../images/star-active.svg); + } + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 293d3b1f13..0000000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000000..f0a5ba9c65 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,20 @@ +@import './utils/variables'; +@import './utils/mixin'; +@import './blocks/header'; +@import './blocks/catalog'; +@import './blocks/card'; +@import './blocks/stars'; + +html, +body { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: border-box; + font-family: Roboto, sans-serif; +} diff --git a/src/styles/utils/mixin.scss b/src/styles/utils/mixin.scss new file mode 100644 index 0000000000..a6ed5bf82a --- /dev/null +++ b/src/styles/utils/mixin.scss @@ -0,0 +1,13 @@ +// card +@mixin text-style($size, $weight: 400, $line-height: normal, $color: inherit) { + font-size: $size; + font-weight: $weight; + line-height: $line-height; + color: $color; +} + +@mixin flex-between { + display: flex; + justify-content: space-between; + align-items: center; +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..e061aba216 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,22 @@ +// header properties +$color-white: #fff; +$color-blue: #00acdc; +$color-dark-blue: #060b35; + +// catalog properties +$breakpoints: ( + 'mobile': 488px, + 'tablet': 768px, + 'desktop': 1024px, +); + +// card properties +$card-width: 200px; +$color-white: #fff; +$color-main-accent: #060b35; +$color-secondary: #616070; +$color-gray-border: #f3f3f3; +$color-yellow-stars: #ffde6a; +$color-blue-accent: #00acdc; +$color-card-hover: #34568b; +$color-link-hover: #00acdc; From 77540a058ab06e12908ca37f00601b74dfe7c114 Mon Sep 17 00:00:00 2001 From: Alexander Date: Sun, 5 Jul 2026 13:07:29 +0300 Subject: [PATCH 2/3] fix problems --- src/styles/blocks/card.scss | 28 +++++++++++++++++++--------- src/styles/blocks/catalog.scss | 2 +- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss index 748fb3a30f..ef62d2d2c9 100644 --- a/src/styles/blocks/card.scss +++ b/src/styles/blocks/card.scss @@ -5,14 +5,22 @@ background-color: $color-white; border: 1px solid $color-gray-border; border-radius: 5px; - width: 200px; + width: $card-width; padding: 16px; transition: transform 0.3s; + &__title { + @include text-style(12px, 500, 150%, $color-main-accent); + + padding-top: 40px; + margin: 0; + transition: color 0.3s; + } + &:hover { transform: scale(1.2); - &__title { + .card__title { color: $color-card-hover; } } @@ -25,13 +33,7 @@ margin: 16px auto 0; object-fit: cover; } - &__title { - @include text-style(12px, 500, 150%, $color-main-accent); - padding-top: 40px; - margin: 0; - transition: color 0.3s; - } &__product-code { @include text-style(10px, 400, 140%, $color-secondary); @@ -39,33 +41,39 @@ width: 100%; margin: 0; } + &__rating { @include flex-between; padding-top: 16px; width: 100%; } + &__reviews-count { @include text-style(10px, 400, 140%, $color-main-accent); display: block; } + &__price-container { @include flex-between; width: 100%; padding-top: 24px; } + &__price-label { @include text-style(12px, 400, 150%, $color-secondary); display: block; } + &__price-value { @include text-style(16px, 700, 113%, $color-main-accent); display: block; } + &__link { @include text-style(14px, 700, 40px, $color-white); @@ -80,7 +88,9 @@ border-radius: 5px; background-color: $color-blue-accent; box-sizing: border-box; - transition: color 0.3s; + transition: + background-color 0.3s, + color 0.3s; &:hover { background-color: $color-white; diff --git a/src/styles/blocks/catalog.scss b/src/styles/blocks/catalog.scss index 1f039ae3ff..f86737c418 100644 --- a/src/styles/blocks/catalog.scss +++ b/src/styles/blocks/catalog.scss @@ -2,7 +2,7 @@ --column-count: 1; display: grid; - grid-template-columns: repeat(var(--column-count), 200px); + grid-template-columns: repeat(var(--column-count), $card-width); gap: 46px 48px; justify-content: center; padding: 50px 40px; From b1bc791c80c759bb44f1062c85b369a732bbe774 Mon Sep 17 00:00:00 2001 From: Alexander Date: Sun, 5 Jul 2026 13:21:58 +0300 Subject: [PATCH 3/3] fix problems --- src/styles/utils/variables.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss index e061aba216..c179b6450e 100644 --- a/src/styles/utils/variables.scss +++ b/src/styles/utils/variables.scss @@ -1,5 +1,4 @@ // header properties -$color-white: #fff; $color-blue: #00acdc; $color-dark-blue: #060b35;