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..ef62d2d2c9 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,100 @@ +.card { + display: flex; + flex-direction: column; + align-items: center; + background-color: $color-white; + border: 1px solid $color-gray-border; + border-radius: 5px; + 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); + + .card__title { + color: $color-card-hover; + } + } + + &__image { + display: block; + width: 100%; + max-width: 160px; + height: 134px; + margin: 16px auto 0; + object-fit: cover; + } + + &__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: + background-color 0.3s, + 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..f86737c418 --- /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), $card-width); + 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..c179b6450e --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,21 @@ +// header properties +$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;