diff --git a/readme.md b/readme.md index 3354ca6020..ce3e8856a7 100644 --- a/readme.md +++ b/readme.md @@ -20,8 +20,8 @@ Create a pages with product card using `flexbox`, `BEM` and `SCSS` based on [thi ❗️ Replace `` with your Github username and copy the links to `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://SemenVodolazskij.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://SemenVodolazskij.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..73047597b8 100644 --- a/src/index.html +++ b/src/index.html @@ -7,12 +7,57 @@ content="width=device-width, initial-scale=1.0" /> Product cards + + + + -

Product cards

+
+ Imac +
+ Apple A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+
+
+
+
+
+
+ + Reviews: 5 +
+
+ Price: + $2,199 +
+ +
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..86637ea3d6 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,95 @@ body { margin: 0; + font-family: Roboto, sans-serif, Arial; +} + +.card { + width: 200px; + padding: 32px 16px 16px; +} + +.card_image { + display: flex; + width: 160px; + height: 134px; + margin-bottom: 40px; +} + +.description { + font-weight: 500; + margin-bottom: 4px; + font-size: 12px; +} + +.card_image--imac { + background-image: url(../images/imac.jpeg); +} + +.product_code { + margin-bottom: 16px; + font-size: 10px; + line-height: 14px; +} + +.star_review { + margin-bottom: 24px; + display: flex; + justify-content: space-between; +} + +.reviews { + display: flex; + white-space: nowrap; + font-size: 10px; + align-items: center; +} + +.stars_active { + background-image: url(../images/star-active.svg); + background-repeat: no-repeat; + background-position: center; + width: 16px; + height: 16px; + margin-right: 4px; +} + +.stars { + background-image: url(../images/star.svg); + background-repeat: no-repeat; + background-position: center; + width: 16px; + height: 16px; + margin-right: 4px; +} + +.price { + display: flex; + justify-content: space-between; + margin-bottom: 16px; +} + +.text_price { + color: #616070; +} + +.numeric_price { + font-family: Roboto, sans-serif, Arial; + font-weight: 700; +} + +.button_buy { + display: flex; + justify-content: center; + align-items: center; + background-color: #00acdc; + color: white; + border-radius: 5px; + width: 100%; + height: 40px; + border: solid #00acdc; +} + +.button_buy:hover { + background-color: white; + color: #00acdc; }