From c4ceed92301a37e5734e70a899a5e33a0682a2ac Mon Sep 17 00:00:00 2001 From: Liia Kukava Date: Tue, 23 Jun 2026 02:20:46 +0300 Subject: [PATCH] Catalog --- src/index.html | 349 +++++++++++++++++++++++++++++++- src/styles/blocks/_card.scss | 100 +++++++++ src/styles/blocks/_cards.scss | 19 ++ src/styles/blocks/_header.scss | 6 + src/styles/blocks/_logo.scss | 5 + src/styles/blocks/_nav.scss | 46 +++++ src/styles/blocks/_stars.scss | 23 +++ src/styles/index.scss | 25 +++ src/styles/utils/variables.scss | 6 + 9 files changed, 578 insertions(+), 1 deletion(-) create mode 100644 src/styles/blocks/_card.scss create mode 100644 src/styles/blocks/_cards.scss create mode 100644 src/styles/blocks/_header.scss create mode 100644 src/styles/blocks/_logo.scss create mode 100644 src/styles/blocks/_nav.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 9cff78eeb7..342b073497 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,353 @@ -

Catalog

+
+ + + + +
+
+
+ product image +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+
+
+ product image +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+
+
+ product image +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+
+
+ product image +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+
+
+ product image +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+
+
+ product image +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+
+
+ product image +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+
+
+ product image +
+

+ 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..821e0d606e --- /dev/null +++ b/src/styles/blocks/_card.scss @@ -0,0 +1,100 @@ +.card { + box-sizing: border-box; + padding: 32px 16px 16px; + width: 200px; + border: 1px solid $border; + border-radius: 5px; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + transition: transform 300ms; + + &:hover { + transform: scale(1.2); + z-index: 1; + } + + &__image { + width: 160px; + height: 134px; + margin-bottom: 40px; + } + + &__title { + font-weight: 500; + font-size: 12px; + line-height: 18px; + color: $main-color; + margin-bottom: 4px; + width: 166px; + transition: color 300ms; + } + + &:hover &__title { + color: $title-hover; + } + + &__text { + color: $secondary-color; + font-size: 10px; + line-height: 14px; + + &--spaced { + margin-bottom: 16px; + } + + &--accent { + color: $main-color; + } + + &--lead { + font-size: 12px; + line-height: 18px; + } + } + + &__reviews { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; + } + + &__price { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + } + + &__amount { + font-weight: 700; + font-size: 16px; + line-height: 18px; + color: $main-color; + } + + &__pay-button { + display: block; + text-align: center; + width: 100%; + background-color: $blue; + border: 1px solid $blue; + border-radius: 5px; + padding-block: 11px; + text-decoration: none; + color: $white; + text-transform: uppercase; + font-size: 14px; + line-height: 16px; + font-weight: 700; + transition: + background-color 300ms, + color 300ms; + + &:hover { + background-color: $white; + color: $blue; + } + } +} diff --git a/src/styles/blocks/_cards.scss b/src/styles/blocks/_cards.scss new file mode 100644 index 0000000000..4feb3a5b1b --- /dev/null +++ b/src/styles/blocks/_cards.scss @@ -0,0 +1,19 @@ +.cards { + display: grid; + grid-template-columns: 200px; + justify-content: center; + gap: 46px 48px; + padding: 50px 40px; + + @media (min-width: 488px) { + grid-template-columns: repeat(2, 200px); + } + + @media (min-width: 768px) { + grid-template-columns: repeat(3, 200px); + } + + @media (min-width: 1024px) { + grid-template-columns: repeat(4, 200px); + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 0000000000..469b0dcc85 --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,6 @@ +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 50px; +} diff --git a/src/styles/blocks/_logo.scss b/src/styles/blocks/_logo.scss new file mode 100644 index 0000000000..85907cef5e --- /dev/null +++ b/src/styles/blocks/_logo.scss @@ -0,0 +1,5 @@ +.logo { + display: block; + width: 40px; + height: 40px; +} diff --git a/src/styles/blocks/_nav.scss b/src/styles/blocks/_nav.scss new file mode 100644 index 0000000000..bd467fa04a --- /dev/null +++ b/src/styles/blocks/_nav.scss @@ -0,0 +1,46 @@ +.nav { + &__list { + display: flex; + margin: 0; + padding: 0; + list-style: none; + } + + &__item { + &:not(:last-child) { + margin-right: 20px; + } + } + + &__link { + display: block; + height: 60px; + color: $main-color; + font-size: 12px; + font-weight: 500; + line-height: 60px; + text-decoration: none; + text-transform: uppercase; + transition: color 300ms; + + &:hover { + color: $blue; + } + + &.is-active { + position: relative; + color: $blue; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 4px; + background-color: $blue; + border-radius: 2px; + } + } + } +} diff --git a/src/styles/blocks/_stars.scss b/src/styles/blocks/_stars.scss new file mode 100644 index 0000000000..19febefa9e --- /dev/null +++ b/src/styles/blocks/_stars.scss @@ -0,0 +1,23 @@ +.stars { + display: flex; + + &__star { + width: 16px; + height: 16px; + background-image: url(../images/star.svg); + background-repeat: no-repeat; + background-position: center; + + &:not(:last-child) { + margin-right: 4px; + } + } + + &--1 &__star:nth-child(-n + 1), + &--2 &__star:nth-child(-n + 2), + &--3 &__star:nth-child(-n + 3), + &--4 &__star:nth-child(-n + 4), + &--5 &__star:nth-child(-n + 5) { + background-image: url(../images/star-active.svg); + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..0e0c696d0e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,28 @@ body { margin: 0; + font-family: + Roboto, + system-ui, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Oxygen, + Ubuntu, + Cantarell, + 'Open Sans', + 'Helvetica Neue', + sans-serif; } + +h2, +p { + margin: 0; +} + +@import 'utils/variables'; +@import 'blocks/header'; +@import 'blocks/logo'; +@import 'blocks/nav'; +@import 'blocks/cards'; +@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..6495fad253 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,6 @@ +$border: #f3f3f3; +$main-color: #060b35; +$title-hover: #34568b; +$secondary-color: #616070; +$blue: #00acdc; +$white: #fff;