diff --git a/readme.md b/readme.md index 3354ca6020..fb5b38b4c2 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://OlhaLishenko.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://OlhaLishenko.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/images/mac.png b/src/images/mac.png new file mode 100644 index 0000000000..46cfd1d239 Binary files /dev/null and b/src/images/mac.png differ diff --git a/src/images/star-active.svg b/src/images/star-yellow.svg similarity index 100% rename from src/images/star-active.svg rename to src/images/star-yellow.svg diff --git a/src/index.html b/src/index.html index 43745cc17f..4c0b56d101 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,61 @@ 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/index.css b/src/styles/index.css new file mode 100644 index 0000000000..f6faf12eca --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,128 @@ +body { + margin: 0; +} + +.product-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 200px; + border: 1px solid #f3f3f3; + border-radius: 5px; +} + +.product-card__image { + background-image: url('../images/imac.jpeg'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 160px; + height: 134px; + margin: 32px 19px 0; + box-sizing: border-box; +} + +.product-card__content { + margin: 40px 16px 16px; + font-family: Roboto, sans-serif; +} + +.product-name { + font-weight: 500; + font-size: 12px; + line-height: 18px; + color: #060b35; + margin: 0; +} + +.product-code { + font-weight: 400; + font-size: 10px; + line-height: 14px; + color: #616070; + margin: 4px 0 0; +} + +.product-rating { + margin: 16px 0 0; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; +} + +.product-rating__reviews { + font-weight: 400; + font-size: 10px; + line-height: 14px; + color: #060b35; + margin: 0; +} + +.stars { + flex-direction: row; + display: flex; + gap: 4px; +} + +.stars__star { + background-image: url('../images/star-yellow.svg'); + background-repeat: no-repeat; + background-position: center; + width: 16px; + height: 16px; +} + +.stars__star:last-of-type { + background-image: url('../images/star.svg'); +} + +.product-price { + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 24px 0 0; +} + +.product-price__text { + line-height: 18px; + font-weight: 400; + font-size: 12px; + color: #616070; + margin: 0; +} + +.product-price__value { + line-height: 18px; + font-weight: 700; + font-size: 16px; + color: #060b35; + margin: 0; +} + +.buy-button { + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + background-color: #00acdc; + text-decoration: none; + text-transform: uppercase; + color: white; + font-weight: 700; + font-size: 14px; + line-height: 16px; + margin: 16px 0 0; + border-radius: 5px; + border: 1px solid #00acdc; + width: 166px; + height: 40px; +} + +.buy-button:hover { + color: #00acdc; + background-color: white; +} + +/*# sourceMappingURL=index.css.map */ diff --git a/src/styles/index.css.map b/src/styles/index.css.map new file mode 100644 index 0000000000..6f49ed7587 --- /dev/null +++ b/src/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAQA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,OAjBmB;EAkBnB;EACA,eAdc;;AAgBd;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA,OAvCgB;EAwChB;;;AAGF;EACE;EACA;EACA;EACA,OA9CkB;EA+ClB;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,OA9Dc;EA+Dd;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,OA9FgB;EA+FhB;;AAGF;EACE;EACA;EACA;EACA,OAvGc;EAwGd;;;AAIJ;EACE;EACA;EACA;EACA;EACA,kBA/Ga;EAgHb;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eAtHc;EAuHd;EACA;EACA;;AAEA;EACE,OA7HW;EA8HX","file":"index.css"} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..69b49e35e2 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,134 @@ +$border-color: #f3f3f3; +$product-card-width: 200px; +$main-fonts: 'Roboto'; +$main-text-color: #060b35; +$second-text-color: #616070; +$button-color: #00acdc; +$border-radius: 5px; + body { margin: 0; } + +.product-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: $product-card-width; + border: 1px solid $border-color; + border-radius: $border-radius; + + &__image { + background-image: url('../images/imac.jpeg'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 160px; + height: 134px; + margin: 32px 19px 0; + box-sizing: border-box; + } + + &__content { + margin: 40px 16px 16px; + font-family: $main-fonts, sans-serif; + } +} + +.product-name { + font-weight: 500; + font-size: 12px; + line-height: 18px; + color: $main-text-color; + margin: 0; +} + +.product-code { + font-weight: 400; + font-size: 10px; + line-height: 14px; + color: $second-text-color; + margin: 4px 0 0; +} + +.product-rating { + margin: 16px 0 0; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + + &__reviews { + font-weight: 400; + font-size: 10px; + line-height: 14px; + color: $main-text-color; + margin: 0; + } +} + +.stars { + flex-direction: row; + display: flex; + gap: 4px; + + &__star { + background-image: url('../images/star-yellow.svg'); + background-repeat: no-repeat; + background-position: center; + width: 16px; + height: 16px; + + &:last-of-type { + background-image: url('../images/star.svg'); + } + } +} + +.product-price { + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 24px 0 0; + + &__text { + line-height: 18px; + font-weight: 400; + font-size: 12px; + color: $second-text-color; + margin: 0; + } + + &__value { + line-height: 18px; + font-weight: 700; + font-size: 16px; + color: $main-text-color; + margin: 0; + } +} + +.buy-button { + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + background-color: $button-color; + text-decoration: none; + text-transform: uppercase; + color: #ffff; + font-weight: 700; + font-size: 14px; + line-height: 16px; + margin: 16px 0 0; + border-radius: $border-radius; + border: 1px solid $button-color; + width: 166px; + height: 40px; + + &:hover { + color: $button-color; + background-color: #ffff; + } +}