From 74896e2c68f495715e8e25d2b5b28e1dfa05a26d Mon Sep 17 00:00:00 2001 From: Khrystyna Melnyk Date: Tue, 3 Dec 2024 00:56:31 +0200 Subject: [PATCH 1/2] add demo task solution --- readme.md | 4 +- src/index.html | 53 +++++++++++++++- src/styles/index.css | 134 +++++++++++++++++++++++++++++++++++++++ src/styles/index.css.map | 1 + src/styles/index.scss | 133 +++++++++++++++++++++++++++++++++++++- 5 files changed, 320 insertions(+), 5 deletions(-) create mode 100644 src/styles/index.css create mode 100644 src/styles/index.css.map diff --git a/readme.md b/readme.md index 3354ca6020..ac69e9ed06 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://KristinaMelnyk.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://KristinaMelnyk.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..8512dc9998 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,59 @@ Product cards + + + -

Product cards

+
+
+
+ photo of iMac 27 +
+

+ 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..3a46c52f5f --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,134 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Roboto, sans-serif; + background-color: rgb(255, 255, 255); + display: flex; + justify-content: center; + align-items: center; +} + +.page { + display: flex; + justify-content: center; + align-items: center; +} + +.product-card { + padding: 16px; + background-color: #fff; + border: 1px solid rgb(243, 243, 243); + border-radius: 5px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 198px; + height: 406px; +} + +.product-card__image { + width: 160px; + height: 134px; + margin: 16px auto 40px; +} + +.product-card__image img { + width: 100%; + border-radius: 8px; +} + +.product-card__title { + width: 166px; + height: 36px; + font-size: 12px; + line-height: 18px; + margin-bottom: 4px; + color: rgb(6, 11, 53); + font-weight: 500; +} + +.product-card__code { + width: 98px; + font-size: 10px; + line-height: 14px; + margin-bottom: 16px; + color: rgb(97, 96, 112); + font-weight: 400; +} + +.product-card__rating { + width: 166px; + height: 16px; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 24px; +} + +.product-card__stars { + display: flex; +} + +.product-card__star { + width: 16px; + height: 16px; + margin-right: 4px; + background-image: url(../images/star.svg); + background-position: center; + background-repeat: no-repeat; +} + +.product-card__star:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); +} + +.product-card__reviews { + font-size: 10px; + line-height: 14px; + color: rgb(6, 11, 53); + margin-left: auto; +} + +.product-card__price-section { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; +} + +.product-card__price { + font-size: 12px; + color: rgb(97, 96, 112); +} + +.product-card__amount { + font-size: 16px; + font-weight: 700; + color: rgb(6, 11, 53); +} + +.product-card__button { + display: flex; + justify-content: center; + align-items: center; + width: 166px; + height: 40px; + font-size: 14px; + font-weight: 700; + color: rgb(255, 255, 255); + background-color: rgb(0, 172, 220); + border: none; + border-radius: 5px; + text-decoration: none; + transition: + background-color 0.3s, + color 0.3s; +} + +.product-card__button:hover { + background-color: rgb(255, 255, 255); + color: rgb(0, 172, 220); + border: 1px solid rgb(0, 172, 220); +} /*# sourceMappingURL=index.css.map */ diff --git a/src/styles/index.css.map b/src/styles/index.css.map new file mode 100644 index 0000000000..4cc89792e4 --- /dev/null +++ b/src/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,UAAA;EACA,sBAAA;ACCF;;ADEA;EACE,+BAAA;EACA,oCAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ACCF;;ADEA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;ACCF;;ADEA;EACE,aAAA;EACA,sBAAA;EACA,oCAAA;EACA,kBAAA;EACA,wCAAA;EACA,YAAA;EACA,aAAA;ACCF;ADCE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;ACCJ;ADCI;EACE,WAAA;EACA,kBAAA;ACCN;ADGE;EACE,YAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,qBAAA;EACA,gBAAA;ACDJ;ADIE;EACE,WAAA;EACA,eAAA;EACA,iBAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;ACFJ;ADKE;EACE,YAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,mBAAA;ACHJ;ADME;EACE,aAAA;ACJJ;ADOE;EACE,WAAA;EACA,YAAA;EACA,iBAAA;EACA,yCAAA;EACA,2BAAA;EACA,4BAAA;ACLJ;ADOI;EACE,gDAAA;ACLN;ADSE;EACE,eAAA;EACA,iBAAA;EACA,qBAAA;EACA,iBAAA;ACPJ;ADUE;EACE,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,mBAAA;ACRJ;ADWE;EACE,eAAA;EACA,uBAAA;ACTJ;ADYE;EACE,eAAA;EACA,gBAAA;EACA,qBAAA;ACVJ;ADaE;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;EACA,gBAAA;EACA,yBAAA;EACA,kCAAA;EACA,YAAA;EACA,kBAAA;EACA,qBAAA;EACA,6CACE;ACZN;ADeI;EACE,oCAAA;EACA,uBAAA;EACA,kCAAA;ACbN","file":"index.css"} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..57c8870d7f 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,134 @@ -body { +* { margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Roboto, sans-serif; + background-color: rgba(255, 255, 255, 1); + display: flex; + justify-content: center; + align-items: center; +} + +.page { + display: flex; + justify-content: center; + align-items: center; +} + +.product-card { + padding: 16px; + background-color: #fff; + border: 1px solid rgba(243, 243, 243, 1); + border-radius: 5px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 198px; + height: 406px; + + &__image { + width: 160px; + height: 134px; + margin: 16px auto 40px; + + img { + width: 100%; + border-radius: 8px; + } + } + + &__title { + width: 166px; + height: 36px; + font-size: 12px; + line-height: 18px; + margin-bottom: 4px; + color: rgba(6, 11, 53, 1); + font-weight: 500; + } + + &__code { + width: 98px; + font-size: 10px; + line-height: 14px; + margin-bottom: 16px; + color: rgba(97, 96, 112, 1); + font-weight: 400; + } + + &__rating { + width: 166px; + height: 16px; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 24px; + } + + &__stars { + display: flex; + } + + &__star { + width: 16px; + height: 16px; + margin-right: 4px; + background-image: url(../images/star.svg); + background-position: center; + background-repeat: no-repeat; + + &:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); + } + } + + &__reviews { + font-size: 10px; + line-height: 14px; + color: rgba(6, 11, 53, 1); + margin-left: auto; + } + + &__price-section { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; + } + + &__price { + font-size: 12px; + color: rgba(97, 96, 112, 1); + } + + &__amount { + font-size: 16px; + font-weight: 700; + color: rgba(6, 11, 53, 1); + } + + &__button { + display: flex; + justify-content: center; + align-items: center; + width: 166px; + height: 40px; + font-size: 14px; + font-weight: 700; + color: rgba(255, 255, 255, 1); + background-color: rgba(0, 172, 220, 1); + border: none; + border-radius: 5px; + text-decoration: none; + transition: + background-color 0.3s, + color 0.3s; + + &:hover { + background-color: rgba(255, 255, 255, 1); + color: rgba(0, 172, 220, 1); + border: 1px solid rgba(0, 172, 220, 1); + } + } } From f51b2b5a480a84f96afd120a9a375fed3f46f3a0 Mon Sep 17 00:00:00 2001 From: Khrystyna Melnyk Date: Thu, 2 Jan 2025 12:16:32 +0200 Subject: [PATCH 2/2] add task solution --- src/styles/index.css | 4 ++-- src/styles/index.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/index.css b/src/styles/index.css index 3a46c52f5f..18ecf0b615 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -24,8 +24,8 @@ body { border: 1px solid rgb(243, 243, 243); border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: 198px; - height: 406px; + width: 200px; + height: 408px; } .product-card__image { diff --git a/src/styles/index.scss b/src/styles/index.scss index 57c8870d7f..70164d0935 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -24,8 +24,8 @@ body { border: 1px solid rgba(243, 243, 243, 1); border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: 198px; - height: 406px; + width: 200px; + height: 408px; &__image { width: 160px;