diff --git a/src/index.html b/src/index.html index 9cff78eeb7..b7286f5ede 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,385 @@ -

Catalog

+
+ + + + +
+ +
+
+
+ imac_photo +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac_photo +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac_photo +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac_photo +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac_photo +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac_photo +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac_photo +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac_photo +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+
+
diff --git a/src/styles/card.scss b/src/styles/card.scss new file mode 100644 index 0000000000..552ddb82bf --- /dev/null +++ b/src/styles/card.scss @@ -0,0 +1,123 @@ +.card-container { + padding: 50px 40px; + display: grid; + + @include media-grid(4, $widthOfCard); + + gap: 46px 48px; + justify-content: center; +} + +@media (max-width: 487px) { + @include media-grid(1, $widthOfCard); +} + +@media (min-width: 488px) and (max-width: 767px) { + @include media-grid(2, $widthOfCard); +} + +@media (min-width: 768px) and (max-width: 1023px) { + @include media-grid(3, $widthOfCard); +} + +@media (min-width: 1024px) { + @include media-grid(4, $widthOfCard); +} + +.card { + display: flex; + flex-direction: column; + max-width: 200px; + width: 100%; + padding: 32px 16px 16px; + border: 1px solid #f3f3f3; + border-radius: 5px; + font-family: $main-font-family; + transition: transform 0.3s ease; + + &__picture { + display: block; + width: 160px; + height: 134px; + margin: 0 auto; + } + + &__title { + margin-top: 40px; + font-style: normal; + font-size: 12px; + line-height: 18px; + font-weight: 500; + color: $font-main-color; + } + + &__product-code { + margin-top: 4px; + font-size: $default-font-size; + line-height: 14px; + font-weight: 400; + color: $font-second-color; + } + + &__stars { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 16px; + height: 16px; + + &-text { + font-size: 10px; + } + } + + &__price { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 24px; + + &-title { + color: $font-second-color; + font-size: 12px; + line-height: 18px; + } + &-cost { + font-weight: 700; + color: $font-main-color; + font-size: 16px; + line-height: 18px; + } + } + + &__button { + display: block; + height: 40px; + font-size: 14px; + line-height: 16px; + font-weight: 700; + background-color: $activeColor; + color: #fff; + border-radius: 5px; + border: none; + padding: 12px 70px; + margin-top: 16px; + } + + &__button:hover, + &__button:active { + color: $activeColor; + background-color: #fff; + border: solid 1px $activeColor; + } + + &:hover { + cursor: pointer; + transform: scale(1.2); + z-index: 2; + } + + &__title:hover { + color: #34568b; + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 0000000000..99feabbe4d --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,63 @@ +@import '../styles/variables'; + +.header { + background-color: white; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 50px; + box-shadow: 1px 15px 20px -15px #0000000d; + + &__logo { + width: 40px; + padding-top: 2px; + } +} + +.nav { + display: flex; + transition: transform 0.3s ease; + + &__list { + display: flex; + list-style: none; + padding: 0; + margin: 0; + } + + &__item:not(:first-child) { + margin-left: 20px; + } + + &__item-link { + display: flex; + height: 60px; + text-decoration: none; + color: $font-main-color; + font-weight: 500; + font-size: 12px; + position: relative; + align-items: center; + + &:hover, + &:active { + color: $activeColor; + } + } +} + +.is-active { + color: $activeColor; + + &::after { + content: ''; + display: block; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 4px; + background-color: $activeColor; + border-radius: 30px; + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..e68965e989 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,45 @@ +@import '../styles/utils/mixins'; +@import '../styles/header'; +@import '../styles/stars'; +@import '../styles/card'; +@import '../styles/variables'; + +html, +body, +div, +h1, +h2, +h3, +p, +a, +img, +footer, +header, +hgroup, +menu { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; +} + +footer, +header { + display: block; +} + +html { + height: 100%; +} + body { + line-height: 1; margin: 0; + font-family: $main-font-family; +} + +* { + box-sizing: border-box; } diff --git a/src/styles/stars.scss b/src/styles/stars.scss new file mode 100644 index 0000000000..c649afb924 --- /dev/null +++ b/src/styles/stars.scss @@ -0,0 +1,23 @@ +@import '../styles/variables'; + +.stars { + display: flex; + + &__star { + background-image: url(../images/star.svg); + background-repeat: no-repeat; + background-position: center; + width: 16px; + height: 16px; + } + + &__star:not(:last-child) { + margin-right: 4px; + } + + &__star:nth-child(-n + 4) { + background: url(../images/star-active.svg); + background-repeat: no-repeat; + background-position: center; + } +} diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..b924866c05 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,5 @@ +@mixin media-grid($repeatition, $widthOfCard) { + .card-container { + grid-template-columns: repeat($repeatition, $widthOfCard); + } +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000000..7b8f73758b --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,6 @@ +$main-font-family: Roboto, sans-serif; +$font-main-color: #060b35; +$font-second-color: #616070; +$default-font-size: 10px; +$activeColor: #00acdc; +$widthOfCard: 200px;