diff --git a/src/index.html b/src/index.html index 9cff78eeb7..cf7dacd4ae 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,9 @@ + - + + + +
+ + moyo-logo + + +
+
+
+ Image of APPLE A1419 iMac 27❞ Retina +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + BUY + +
+
+ Image of APPLE A1419 iMac 27❞ Retina +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + BUY + +
+
+ Image of APPLE A1419 iMac 27❞ Retina +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + BUY + +
+
+ Image of APPLE A1419 iMac 27❞ Retina +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + BUY + +
+
+ Image of APPLE A1419 iMac 27❞ Retina +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + BUY + +
+
+ Image of APPLE A1419 iMac 27❞ Retina +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + BUY + +
+
+ Image of APPLE A1419 iMac 27❞ Retina +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + BUY + +
+
+ Image of APPLE A1419 iMac 27❞ Retina +
+ 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..9c3350f2aa --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,94 @@ +.card { + width: $catalog__card-width; + padding: 32px 16px 16px; + border: 1px solid #f3f3f3; + border-radius: 5px; + display: flex; + flex-direction: column; + transition: transform 300ms; + + &:hover { + transform: scale(1.2); + } + + &__image { + align-self: center; + width: 160px; + height: 134px; + margin: 0 0 40px; + } + + &__title { + color: #060b35; + margin-bottom: 4px; + font-size: 12px; + line-height: 18px; + font-weight: 500; + + &:hover { + color: #34568b; + } + } + + &__product-code { + margin-bottom: 16px; + font-size: 10px; + line-height: 14px; + font-weight: 400; + color: #616070; + } + + &__rating-field { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; + } + + &__rating-text { + color: #060b35; + font-size: 10px; + font-weight: 400; + } + + &__price-field { + margin-bottom: 16px; + display: flex; + justify-content: space-between; + } + + &__price-field-text { + font-size: 12px; + line-height: 18px; + font-weight: 400; + color: #616070; + } + + &__price-field-number { + color: #060b35; + font-size: 16px; + line-height: 18px; + font-weight: 700; + } + + &__buy-link { + box-sizing: border-box; + display: block; + text-align: center; + width: 100%; + height: 40px; + background-color: $page-design-color; + border: 1px solid $page-design-color; + border-radius: 5px; + font-weight: 700; + font-size: 14px; + line-height: 38px; + text-decoration: none; + color: #fff; + + &:hover { + background-color: #fff; + color: $page-design-color; + } + } +} diff --git a/src/styles/blocks/catalog.scss b/src/styles/blocks/catalog.scss new file mode 100644 index 0000000000..082d8b1cce --- /dev/null +++ b/src/styles/blocks/catalog.scss @@ -0,0 +1,25 @@ +.catalog { + padding: 50px 40px; + display: grid; + justify-content: center; + grid-template-columns: repeat(1, $catalog__card-width); + gap: 46px 48px; + + @media (min-width: 488px) { + & { + @include column(2); + } + } + + @media (min-width: 768px) { + & { + @include column(3); + } + } + + @media (min-width: 1024px) { + & { + @include column(4); + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..7241db7456 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,62 @@ +.header { + font-size: 12px; + font-weight: 500; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 50px; + line-height: 14px; + text-transform: uppercase; + + &__icon { + display: flex; + align-items: center; + justify-content: center; + } + + &__nav { + .nav { + &__list { + display: flex; + list-style-type: none; + margin: 0; + padding: 0; + } + + &__item { + margin-right: 20px; + } + + &__link { + display: flex; + align-items: center; + color: $nav-links-color; + text-decoration: none; + height: 60px; + } + + &__link:hover { + color: $page-design-color; + } + + &__item:last-child { + margin-right: 0; + } + } + + .is-active { + position: relative; + color: $page-design-color; + } + + .is-active::after { + position: absolute; + content: ' '; + width: 100%; + height: 4px; + background-color: $page-design-color; + border-radius: 8px; + bottom: 0; + } + } +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..e3186ed179 --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,24 @@ +.stars { + display: flex; +} + +.stars__star { + height: 16px; + width: 16px; + margin-right: 4px; + background-image: url(../images/star.svg); + background-repeat: no-repeat; + background-position: center; +} + +.stars__star:last-child { + margin-right: 0; +} + +.stars--1 .stars__star:nth-child(-n + 1), +.stars--2 .stars__star:nth-child(-n + 2), +.stars--3 .stars__star:nth-child(-n + 3), +.stars--4 .stars__star:nth-child(-n + 4), +.stars--5 .stars__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..4b9c291f08 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,9 @@ -body { - margin: 0; -} +@import './utils/reset'; +@import './utils/normalize'; +@import './utils/variables'; +@import './utils/colors'; +@import './utils/mixins'; +@import './blocks/card'; +@import './blocks/catalog'; +@import './blocks/header'; +@import './blocks/stars'; diff --git a/src/styles/utils/_colors.scss b/src/styles/utils/_colors.scss new file mode 100644 index 0000000000..8ad8f8da2f --- /dev/null +++ b/src/styles/utils/_colors.scss @@ -0,0 +1,2 @@ +$nav-links-color: #060b35; +$page-design-color: #00acdc; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss new file mode 100644 index 0000000000..4a9d2f8773 --- /dev/null +++ b/src/styles/utils/_mixins.scss @@ -0,0 +1,3 @@ +@mixin column($size) { + grid-template-columns: repeat($size, $catalog__card-width); +} diff --git a/src/styles/utils/_normalize.scss b/src/styles/utils/_normalize.scss new file mode 100644 index 0000000000..0c04d59f08 --- /dev/null +++ b/src/styles/utils/_normalize.scss @@ -0,0 +1,3 @@ +html { + font-family: Roboto, sans-serif; +} diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 0000000000..abe6d10c2c --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,7 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; +} diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss new file mode 100644 index 0000000000..86b8907be1 --- /dev/null +++ b/src/styles/utils/_variables.scss @@ -0,0 +1,2 @@ +$catalog__card-width: 200px; +$column-count: 1;