diff --git a/src/index.html b/src/index.html index 9cff78eeb7..2e00c49f18 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,427 @@ -

Catalog

+
+ + + +
+ +
+
+ Apple image + +

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

+ +

Product code: 195434

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +

+ Price + $2.199 +

+ +
+ +
+
+
+ Apple image + +

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

+ +

Product code: 195434

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +

+ Price + $2.199 +

+ +
+ +
+
+
+ Apple image + +

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

+ +

Product code: 195434

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +

+ Price + $2.199 +

+ +
+ +
+
+
+ Apple image + +

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

+ +

Product code: 195434

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +

+ Price + $2.199 +

+ +
+ +
+
+
+ Apple image + +

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

+ +

Product code: 195434

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +

+ Price + $2.199 +

+ +
+ +
+
+
+ Apple image + +

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

+ +

Product code: 195434

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +

+ Price + $2.199 +

+ +
+ +
+
+
+ Apple image + +

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

+ +

Product code: 195434

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +

+ Price + $2.199 +

+ +
+ +
+
+
+ Apple image + +

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

+ +

Product code: 195434

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +

+ Price + $2.199 +

+ +
+ +
+
+
diff --git a/src/styles/blocks/cards.scss b/src/styles/blocks/cards.scss new file mode 100644 index 0000000000..c45fbe86f5 --- /dev/null +++ b/src/styles/blocks/cards.scss @@ -0,0 +1,92 @@ +.card { + width: 200px; + padding: 32px 16px 16px; + border: 1px solig lightgray; + border-radius: 2px; + box-sizing: border-box; + + display: flex; + flex-direction: column; + + &__image { + width: 160px; + margin: auto; + } + + &:hover { + transform: scale(120%); + transition-duration: $effectDuration; + } + + &__title { + font-size: 12px; + font-weight: 500; + line-height: 18px; + text-align: left; + margin-top: 42px; + } + + &:hover &__title { + color: $color-title-hover; + } + + &__product-code { + font-size: 10px; + font-weight: 400; + line-height: 14px; + color: $grey-color; + text-align: left; + margin-top: 4px; + } + + &__reviews { + display: flex; + justify-content: space-between; + margin: 16px 0; + + &-reviews { + font-size: 10px; + line-height: 14px; + } + } + + &__price { + display: flex; + justify-content: space-between; + margin: 8px 0; + + &-how { + font-size: 12px; + line-height: 18px; + color: $grey-color; + } + + &-what { + font-size: 16px; + font-weight: 700; + line-height: 18px; + } + } + + &__buy { + &-button { + width: 100%; + height: 40px; + border-radius: 5px; + background: $blue-color; + box-sizing: border-box; + border: 1px solid $blue-color; + color: $color-white; + font-size: 14px; + font-weight: 700; + margin-top: 8px; + text-transform: uppercase; + } + + &-button:hover { + background-color: $color-white; + color: $blue-color; + transition-duration: $effectDuration; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..aecaf6715e --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,60 @@ +header { + display: flex; + justify-content: space-between; + padding: 0 50px; + align-items: center; + + .logo { + display: flex; + &__link { + height: 40px; + width: 40px; + } + } + + .nav { + &__list { + list-style-type: none; + display: flex; + justify-content: space-between; + align-items: center; + } + + &__link { + color: $color-nav; + font-size: 12px; + font-weight: 500; + text-decoration: none; + height: 60px; + line-height: 60px; + display: block; + margin-left: 20px; + text-transform: uppercase; + text-align: center; + } + + &__link:hover { + color: $blue-color; + text-decoration: none; + transition-duration: $effectDuration; + } + + &__item:first-child &__link { + margin-left: 0; + } + } + + .is-active { + color: $blue-color; + } + + .is-active::after { + display: block; + content: ''; + background-color: $blue-color; + height: 4px; + border-radius: 8px; + top: -4px; + position: relative; + } +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..82d95e1fd4 --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,24 @@ +.stars { + display: flex; +} + +.stars__star { + width: 16px; + height: 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..c3631358ff 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,31 @@ body { margin: 0; + font-family: Roboto, sans-serif; + + @import '../utils/variables'; + @import '../utils/mixins'; + @import './blocks/header'; + @import './blocks/cards'; + @import './blocks/stars'; + + ul, + li, + nav, + p, + h3, + button { + margin: 0; + padding: 0; + } + + .catalog { + width: 100vw; + padding: 50px 40px; + box-sizing: border-box; + display: grid; + justify-content: center; + gap: 46px 48px; + + @include column-count-container; + } } diff --git a/src/utils/mixins.scss b/src/utils/mixins.scss new file mode 100644 index 0000000000..402b48a7c1 --- /dev/null +++ b/src/utils/mixins.scss @@ -0,0 +1,15 @@ +@mixin column-count-container { + grid-template-columns: repeat(1, 200px); + + @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/utils/variables.scss b/src/utils/variables.scss new file mode 100644 index 0000000000..39f6f424b2 --- /dev/null +++ b/src/utils/variables.scss @@ -0,0 +1,6 @@ +$color-nav: #060b35; +$blue-color: #00acdc; +$color-title-hover: #34568b; +$grey-color: #616070; +$color-white: #fff; +$effectDuration: 300ms;