diff --git a/readme.md b/readme.md index b1f43ed970..2152646dc0 100644 --- a/readme.md +++ b/readme.md @@ -23,8 +23,8 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs ❗️ Replace `` with your GitHub username and copy the links to the `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_product-cards/) -- [TEST REPORT LINK](https://.github.io/layout_product-cards/report/html_report/) +- [DEMO LINK](https://alla-vedmid.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://alla-vedmid.github.io/layout_product-cards/report/html_report/) ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. diff --git a/src/index.html b/src/index.html index 43745cc17f..8cc1affd6d 100644 --- a/src/index.html +++ b/src/index.html @@ -7,12 +7,60 @@ 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
+
+ + +
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..ecae4420c9 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,97 @@ +$base-color: #060b35; +$color-light-gray: #616070; +$color-blue: #00acdc; +$color-white: #fff; +$color-border-card: #f3f3f3; +$card-radius: 5px; +$card-width: 198px; +$card-height: 406px; +$card-font: Roboto, sans-serif; + +.card { + width: $card-width; + height: $card-height; + border: 1px solid $color-border-card; + font-family: $card-font; + border-radius: $card-radius; + margin: 50px; + padding: 17px; + display: flex; + flex-direction: column; + justify-content: space-between; + + &__image { + background-image: url('../images/imac.jpeg'); + width: 160px; + height: 134px; + display: block; + background-repeat: no-repeat; + background-size: cover; + margin: 16px auto 0; + } + + &__description { + margin-top: 33px; + } + &__title { + font-size: 12px; + font-weight: 500; + line-height: 18px; + color: $base-color; + display: block; + } + &__prod-code { + @include simple-text; + + display: block; + color: $color-light-gray; + } + + &__reviews { + @include elem-space-between; + + margin: 20px 0; + } + &__reviews-text { + @include simple-text; + + color: $base-color; + } + + &__price { + @include elem-space-between; + } + + &__label { + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: $color-light-gray; + } + &__value { + font-size: 16px; + font-weight: 700; + line-height: 18px; + } + + &__btn { + width: 166px; + height: 40px; + border-radius: 5px; + background-color: $color-blue; + border: 1px solid $color-blue; + font-size: 14px; + font-weight: 700; + line-height: 16px; + color: $color-white; + text-transform: uppercase; + align-self: center; + } + + &:hover { + .card__btn { + background-color: $color-white; + color: $color-blue; + } + } +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..852f1eda2a --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,17 @@ +.stars { + display: flex; + + &__star { + background-image: url('../images/star.svg'); + width: 16px; + height: 16px; + display: block; + background-repeat: no-repeat; + } +} + +@for $i from 1 through 5 { + .stars--#{$i} .stars__star:nth-child(-n + #{$i}) { + background-image: url('../images/star-active.svg'); + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..d79542e52d 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,8 @@ + +@import 'utils/mixins'; +@import 'blocks/card'; +@import 'blocks/stars'; + body { margin: 0; } diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..64c06aa39a --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,11 @@ +@mixin simple-text() { + font-size: 10px; + font-weight: 400; + line-height: 14px; +} + +@mixin elem-space-between() { + display: flex; + justify-content: space-between; + align-items: center; +}