diff --git a/src/index.html b/src/index.html index 43745cc17f..0d72e06894 100644 --- a/src/index.html +++ b/src/index.html @@ -7,12 +7,59 @@ content="width=device-width, initial-scale=1.0" /> Product cards + + +

Product cards

+ +
+
+
+ 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..3c71b6cbdd --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,101 @@ +.card { + box-sizing: border-box; + background-color: white; + border-radius: 5px; + width: 200px; + height: 408px; + padding: 16px; + display: flex; + flex-direction: column; + border: 1px solid #f3f3f3; + + &__image { + background-image: url(../images/imac.jpeg); + width: 100%; + height: 134px; + margin: 16px 0 40px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + + &__title { + font-weight: 500; + margin-bottom: 4px; + line-height: 18px; + } + + &__code { + margin-bottom: 16px; + } + + &__code, + &__reviews-label { + font-size: 10px; + } + + &__price-word, + &__title { + font-size: 12px; + } + + &__price-value, + &__buy-button { + font-weight: 700; + } + + &__reviews-label, + &__code, + &__price-word { + font-weight: 400; + } + + &__title, + &__price-value, + &__reviews-label { + color: #060b35; + } + + &__code, + &__price-word { + color: #616070; + } + + &__reviews { + display: flex; + justify-content: space-between; + margin-bottom: 24px; + } + + &__reviews-label { + align-self: flex-end; + } + + &__price { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + align-items: center; + } + + &__buy-button { + color: white; + text-decoration: none; + background-color: #00acdc; + width: 100%; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 5px; + border: 1px solid #00acdc; + box-sizing: border-box; + text-transform: uppercase; + font-size: 14px; + } + + &__buy-button:hover { + background-color: white; + color: #00acdc; + } +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..b2ce3d06fb --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,18 @@ +.stars { + display: flex; + width: 96px; + justify-content: space-between; + align-self: flex-end; + + &__star { + background-image: url(../images/star.svg); + background-repeat: no-repeat; + background-position: bottom; + width: 16px; + height: 16px; + } + + &__star:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..db80fbfaf4 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,7 @@ body { margin: 0; + font-family: Roboto, sans-serif; } + +@import 'blocks/card'; +@import 'blocks/stars';