diff --git a/src/index.html b/src/index.html index 9cff78eeb7..959d4c4298 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,9 @@ + - + - -

Catalog

+ + + +
+ + logo + + +
+ + +
+
+
+ APPLE A1419 iMac 27″ Retina 5K Monoblock +
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ + Reviews: 5 +
+ +
+ Price: + $2,199 +
+ + +
+
+
+ APPLE A1419 iMac 27″ Retina 5K Monoblock +
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ + Reviews: 5 +
+ +
+ Price: + $2,199 +
+ + +
+
+
+ APPLE A1419 iMac 27″ Retina 5K Monoblock +
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ + Reviews: 5 +
+ +
+ Price: + $2,199 +
+ + +
+
+
+ APPLE A1419 iMac 27″ Retina 5K Monoblock +
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ + Reviews: 5 +
+ +
+ Price: + $2,199 +
+ + +
+
+
+ APPLE A1419 iMac 27″ Retina 5K Monoblock +
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ + Reviews: 5 +
+ +
+ Price: + $2,199 +
+ + +
+
+
+ APPLE A1419 iMac 27″ Retina 5K Monoblock +
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ + Reviews: 5 +
+ +
+ Price: + $2,199 +
+ + +
+
+
+ APPLE A1419 iMac 27″ Retina 5K Monoblock +
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ + Reviews: 5 +
+ +
+ Price: + $2,199 +
+ + +
+
+
+ APPLE A1419 iMac 27″ Retina 5K Monoblock +
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ + Reviews: 5 +
+ +
+ Price: + $2,199 +
+ + +
+
+ diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..81f13eabfc --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,104 @@ +@use '../utils/variables'; + +.card { + display: flex; + flex-direction: column; + box-sizing: border-box; + + width: variables.$card-width; + padding: variables.$main-padding; + border: 1px solid variables.$border-color; + border-radius: 5px; + transition: all variables.$transition-duration; + color: variables.$main-text-color; + + &:hover { + transform: scale(1.2); + } + + &__image-container { + width: 160px; + height: 134px; + padding-block: 16px; + align-self: center; + } + + &__image { + width: 100%; + height: 100%; + background-color: white; + } + + &__title { + margin-top: variables.$secondary-padding; + } + + &:hover &__title { + color: variables.$hover-text-color; + } + + &__secondary-tytle { + font-weight: 400; + font-size: 10px; + line-height: 14px; + color: variables.$secondary-text-color; + margin-top: 4px; + } + + &__reviews { + display: flex; + justify-content: space-between; + align-items: center; + + font-weight: 400; + font-size: 10px; + line-height: 14px; + margin-top: variables.$main-padding; + } + + &__price-row { + display: flex; + justify-content: space-between; + margin-top: variables.$secondary-padding; + } + + &__price-label { + font-weight: 400; + font-size: 12px; + line-height: 18px; + color: variables.$secondary-text-color; + } + + &__price-value { + font-weight: 700; + font-size: 16px; + line-height: 18px; + } + + &__buy-button { + box-sizing: border-box; + place-self: center; + width: 166px; + height: 40px; + + background-color: variables.$main-color; + color: white; + + border: 1px solid variables.$main-color; + border-radius: 5px; + + font-family: Roboto, sans-serif; + text-transform: uppercase; + font-weight: 700; + font-size: 14px; + line-height: 16px; + + margin-top: variables.$main-padding; + transition: all variables.$transition-duration; + + &:hover { + background-color: white; + color: variables.$main-color; + } + } +} diff --git a/src/styles/blocks/catalog.scss b/src/styles/blocks/catalog.scss new file mode 100644 index 0000000000..1697b07967 --- /dev/null +++ b/src/styles/blocks/catalog.scss @@ -0,0 +1,26 @@ +@use '../utils/variables.scss'; + +.catalog { + --grid-columns: 1; + + display: grid; + grid-template-columns: repeat(var(--grid-columns), variables.$card-width); + place-items: center; + justify-content: center; + gap: 46px 48px; + overflow: hidden; + + padding: 50px 40px; + + @media (min-width: 488px) { + --grid-columns: 2; + } + + @media (min-width: 768px) { + --grid-columns: 3; + } + + @media (min-width: 1024px) { + --grid-columns: 4; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..50c2cef2d3 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,18 @@ +.header { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + box-shadow: 0 2px 4px 0 #0000000d; + + &__logo-link { + display: flex; + height: 40px; + width: 40px; + margin: 0 50px; + } + + &__nav { + margin-right: 50px; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..e86bcc8d71 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,53 @@ +@use '../utils/variables'; + +.nav { + display: flex; + text-transform: uppercase; + + &__list { + display: flex; + list-style: none; + margin: 0; + padding: 0; + } + + &__item { + position: relative; + display: flex; + + &:not(:last-child) { + margin-right: 20px; + } + } + + &__link { + display: flex; + align-items: center; + text-decoration: none; + color: variables.$nav-link-color; + height: variables.$nav-height; + transition: color variables.$transition-duration; + + &:hover { + color: variables.$main-color; + cursor: pointer; + text-decoration: none; + } + + &.is-active { + color: variables.$main-color; + + &::after { + position: absolute; + content: ''; + height: 4px; + width: 100%; + bottom: 0; + background-color: variables.$main-color; + border-radius: 8px; + } + } + + } +} + diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..5968f4d535 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,10 @@ +.page { + font-family: Roboto, sans-serif; + font-weight: 500; + font-size: 12px; + line-height: 18px; + + &__body { + margin: 0; + } +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..64c1b13aed --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,24 @@ +.stars { + display: flex; + + &__star { + width: 16px; + height: 16px; + margin-right: 4px; + background-image: url(../images/star.svg); + background-repeat: no-repeat; + background-position: center; + + &:last-child { + margin-right: 0; + } + } + + &--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..74f0961c87 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,6 @@ -body { - margin: 0; -} +@use './blocks/page'; +@use './blocks/header'; +@use './blocks/nav'; +@use './blocks/catalog'; +@use './blocks/stars'; +@use './blocks/card'; diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..18f0b15259 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,11 @@ +$transition-duration: 0.3s; +$nav-height: 60px; +$nav-link-color: #060b35; +$main-color: #00acdc; +$card-width: 200px; +$border-color: #f3f3f3; +$main-text-color: #060b35; +$secondary-text-color: #616070; +$hover-text-color: #34568b; +$main-padding: 16px; +$secondary-padding: 24px;