diff --git a/readme.md b/readme.md index b1f43ed970..277250a80a 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://Taipan-4ik.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://Taipan-4ik.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..f24949856e 100644 --- a/src/index.html +++ b/src/index.html @@ -7,12 +7,68 @@ content="width=device-width, initial-scale=1.0" /> Product cards + + + -

Product cards

+
+
+ apple_image +
+ + + 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..a9c70a5837 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,54 @@ +.card { + box-sizing: border-box; + position: relative; + text-align: justify; + width: 200px; + height: 407px; + border: 1px solid $grey-star-color; + border-radius: 5px; +} + +.card__product { + display: block; + padding-inline: $standart-inline-pad; + padding-bottom: 4px; + font-weight: 500; + font-size: 12px; + line-height: 18px; + color: $standart-black-color; + text-decoration: none; +} + +.card__code { + display: flex; + justify-content: flex-start; + align-items: center; + padding-inline: $standart-inline-pad; + padding-bottom: 16px; + font-size: 10px; + font-weight: 400; + color: #616070; +} + +.card__button { + display: flex; + align-items: center; + justify-content: center; + margin-inline: 16px; + height: 40px; + border: 1px solid $grey-star-color; + border-radius: 5px; + font-weight: 700; + font-size: 14px; + text-decoration: none; + color: #fff; + background-color: #00acdc; + cursor: pointer; +} + +.card__button:hover { + background-color: #fff; + border: 1px solid #00acdc; + border-radius: 5px; + color: #00acdc; +} diff --git a/src/styles/blocks/cash.scss b/src/styles/blocks/cash.scss new file mode 100644 index 0000000000..40a0c50ab5 --- /dev/null +++ b/src/styles/blocks/cash.scss @@ -0,0 +1,20 @@ +.cash { + display: flex; + height: 19px; + justify-content: space-between; + align-items: center; + padding-inline: $standart-inline-pad; + padding-bottom: 16px; +} + +.cash__name--price { + font-weight: 400; + font-size: 12px; + color: #616070; +} + +.cash__sum--value-of-price { + font-weight: 700; + font-size: 16px; + color: $standart-black-color; +} diff --git a/src/styles/blocks/image.scss b/src/styles/blocks/image.scss new file mode 100644 index 0000000000..73835510f7 --- /dev/null +++ b/src/styles/blocks/image.scss @@ -0,0 +1,10 @@ +.image { + padding: 32px 19px 40px; + display: flex; + justify-content: center; +} + +.image__display--settings { + width: 160px; + height: 134px; +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..c8276ccd45 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,7 @@ +html { + font-family: Roboto, serif; +} + +body { + margin: 0; +} diff --git a/src/styles/blocks/rating.scss b/src/styles/blocks/rating.scss new file mode 100644 index 0000000000..98a4667721 --- /dev/null +++ b/src/styles/blocks/rating.scss @@ -0,0 +1,13 @@ +.rating { + display: flex; + align-items: center; + justify-content: space-between; + padding-inline: $standart-inline-pad; + padding-bottom: 24px; +} + +.rating__review { + font-size: 10px; + font-weight: 400; + color: $standart-black-color; +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..20b5494487 --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,21 @@ +.stars { + display: flex; +} + +.stars__star { + width: 16px; + height: 16px; + background-image: url(../images/star.svg); + color: $grey-star-color; + background-position: center; + background-repeat: no-repeat; +} + +.stars__star:not(:last-child) { + margin-right: 4px; +} + +.stars__star--active { + background-image: url(../images/star-active.svg); + color: #ffde6a; +} diff --git a/src/styles/blocks/variables.scss b/src/styles/blocks/variables.scss new file mode 100644 index 0000000000..39d7270b11 --- /dev/null +++ b/src/styles/blocks/variables.scss @@ -0,0 +1,3 @@ +$grey-star-color: #f3f3f3; +$standart-inline-pad: 16px; +$standart-black-color: #060b35; diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..e8fe5efe96 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,7 @@ -body { - margin: 0; -} +@import '/src/styles/blocks/variables'; +@import '/src/styles/blocks/page'; +@import '/src/styles/blocks/card'; +@import '/src/styles/blocks/image'; +@import '/src/styles/blocks/cash'; +@import '/src/styles/blocks/rating'; +@import '/src/styles/blocks/stars';