From 58b65f8cf97f8aa87ec7f19bce2cdb1d0364d0bc Mon Sep 17 00:00:00 2001 From: Serhii Lesik Date: Fri, 17 Jan 2025 18:57:40 +0200 Subject: [PATCH 1/3] add tast solution --- readme.md | 4 +- src/index.html | 32 ++++++++- src/styles/index.css | 131 +++++++++++++++++++++++++++++++++++ src/styles/index.css.map | 1 + src/styles/index.min.css | 2 + src/styles/index.min.css.map | 1 + src/styles/index.scss | 127 +++++++++++++++++++++++++++++++++ 7 files changed, 295 insertions(+), 3 deletions(-) create mode 100644 src/styles/index.css create mode 100644 src/styles/index.css.map create mode 100644 src/styles/index.min.css create mode 100644 src/styles/index.min.css.map diff --git a/readme.md b/readme.md index b1f43ed970..94eee60ad0 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://serhii-lesik.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://serhii-lesik.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..be7dd7c5e2 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,4 @@ + @@ -7,12 +8,41 @@ 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
+
+
Buy
+
+
diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000000..828105cbb4 --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,131 @@ +body { + margin: 0; + font-family: Roboto, sans-serif; +} + +.card { + box-sizing: border-box; + width: 200px; + height: 408px; + display: flex; + flex-direction: column; + align-items: center; +} + +.card__image { + margin-top: 32px; + box-sizing: border-box; + background-image: url(/src/images/imac.jpeg); + background-size: cover; + width: 160px; + height: 134px; + opacity: 0px; +} + +.card__info { + box-sizing: border-box; + display: flex; + flex-direction: column; + margin-left: 17px; + margin-right: 17px; +} + +.card__name { + margin-top: 40px; + font-size: 12px; + font-weight: 500; + line-height: 18px; + text-align: left; + color: #000000; +} + +.card__code { + font-size: 10px; + font-weight: 400; + line-height: 14px; + text-align: left; + color: #616070; + margin-top: 4px; +} + +.card__rating { + margin-top: 16px; + display: flex; + justify-content: space-between; +} + +.card__stars { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.card__star { + box-sizing: border-box; + width: 16px; + height: 16px; + background-image: url(/src/images/star.svg); + background-repeat: no-repeat; + background-size: cover; + display: flex; + flex-direction: row; + margin-right: 4px; +} + +.card__reviews { + font-size: 10px; + font-weight: 400; + line-height: 14px; + text-align: right; +} + +.card__price { + margin-top: 24px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.card__priceText { + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: #616070; +} + +.card__priceValue { + font-size: 16px; + font-weight: 700; + line-height: 18px; + color: #060B35; +} + +.card__buttom { + box-sizing: border-box; + margin-top: 16px; + background-color: #00ACDC; + font-size: 14px; + line-height: 16px; + width: 166px; + height: 40px; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + color: #FFFFFF; + text-transform: uppercase; +} + +.card .card__star:nth-child(-n+4) { + background-image: url(/src/images/star-active.svg); + transition: transform 0.3s ease; +} + +.card__buttom:hover { + box-sizing: border-box; + background-color: #FFFFFF; + color: #00ACDC; + border-radius: 5px; + border: 1px solid #00ACDC; +} +/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/src/styles/index.css.map b/src/styles/index.css.map new file mode 100644 index 0000000000..6485e4caa3 --- /dev/null +++ b/src/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["file:///d:/MateAcademy/projects/layout_product-cards/src/styles/index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"index.css"} \ No newline at end of file diff --git a/src/styles/index.min.css b/src/styles/index.min.css new file mode 100644 index 0000000000..0c0268da75 --- /dev/null +++ b/src/styles/index.min.css @@ -0,0 +1,2 @@ +body{margin:0;font-family:Roboto,sans-serif}.card{box-sizing:border-box;width:200px;height:408px;display:flex;flex-direction:column;align-items:center}.card__image{margin-top:32px;box-sizing:border-box;background-image:url(/src/images/imac.jpeg);background-size:cover;width:160px;height:134px;opacity:0px}.card__info{box-sizing:border-box;display:flex;flex-direction:column;margin-left:17px;margin-right:17px}.card__name{margin-top:40px;font-size:12px;font-weight:500;line-height:18px;text-align:left;color:#000}.card__code{font-size:10px;font-weight:400;line-height:14px;text-align:left;color:#616070;margin-top:4px}.card__rating{margin-top:16px;display:flex;justify-content:space-between}.card__stars{display:flex;flex-direction:row;justify-content:space-between}.card__star{box-sizing:border-box;width:16px;height:16px;background-image:url(/src/images/star.svg);background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:row;margin-right:4px}.card__reviews{font-size:10px;font-weight:400;line-height:14px;text-align:right}.card__price{margin-top:24px;display:flex;flex-direction:row;justify-content:space-between}.card__priceText{font-size:12px;font-weight:400;line-height:18px;color:#616070}.card__priceValue{font-size:16px;font-weight:700;line-height:18px;color:#060b35}.card__buttom{box-sizing:border-box;margin-top:16px;background-color:#00acdc;font-size:14px;line-height:16px;width:166px;height:40px;border-radius:5px;display:flex;justify-content:center;align-items:center;color:#fff;text-transform:uppercase}.card .card__star:nth-child(-n+4){background-image:url(/src/images/star-active.svg);transition:transform .3s ease}.card__buttom:hover{box-sizing:border-box;background-color:#fff;color:#00acdc;border-radius:5px;border:1px solid #00acdc} +/*# sourceMappingURL=index.min.css.map */ \ No newline at end of file diff --git a/src/styles/index.min.css.map b/src/styles/index.min.css.map new file mode 100644 index 0000000000..67ff3375a0 --- /dev/null +++ b/src/styles/index.min.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["file:///d:/MateAcademy/projects/layout_product-cards/src/styles/index.scss"],"names":[],"mappings":"AAAA,KACE,SACA,8BAGF,MACE,sBACA,YACA,aACA,aACA,sBACA,mBAGF,aACE,gBACA,sBACA,4CACA,sBACA,YACA,aACA,YAGF,YACE,sBACA,aACA,sBACA,iBACA,kBAGF,YACE,gBACA,eACA,gBACA,iBACA,gBACA,WAGF,YACE,eACA,gBACA,iBACA,gBACA,cACA,eAGF,cACE,gBACA,aACA,8BAGF,aACE,aACA,mBACA,8BAGF,YACE,sBACA,WACA,YACA,2CACA,4BACA,sBACA,aACA,mBACA,iBAGF,eACE,eACA,gBACA,iBACA,iBAGF,aACE,gBACA,aACA,mBACA,8BAGF,iBACE,eACA,gBACA,iBACA,cAGF,kBACE,eACA,gBACA,iBACA,cAGF,cACE,sBACA,gBACA,yBACA,eACA,iBACA,YACA,YACA,kBACA,aACA,uBACA,mBACA,WACA,yBAGF,kCACE,kDACA,8BAGF,oBACE,sBACA,sBACA,cACA,kBACA","file":"index.min.css"} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..b55e7a0842 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,130 @@ body { margin: 0; + font-family: Roboto, sans-serif; +} + +.card { + box-sizing: border-box; + width: 200px; + height: 408px; + display: flex; + flex-direction: column; + align-items: center; +} + +.card__image { + margin-top: 32px; + box-sizing: border-box; + background-image: url(/src/images/imac.jpeg); + background-size: cover; + width: 160px; + height: 134px; + opacity: 0px; +} + +.card__info { + box-sizing: border-box; + display: flex; + flex-direction: column; + margin-left: 17px; + margin-right: 17px; +} + +.card__name { + margin-top: 40px; + font-size: 12px; + font-weight: 500; + line-height: 18px; + text-align: left; + color: #000000; +} + +.card__code { + font-size: 10px; + font-weight: 400; + line-height: 14px; + text-align: left; + color: #616070; + margin-top: 4px; +} + +.card__rating { + margin-top: 16px; + display: flex; + justify-content: space-between; +} + +.card__stars { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.card__star { + box-sizing: border-box; + width: 16px; + height: 16px; + background-image: url(/src/images/star.svg); + background-repeat: no-repeat; + background-size: cover; + display: flex; + flex-direction: row; + margin-right: 4px; +} + +.card__reviews { + font-size: 10px; + font-weight: 400; + line-height: 14px; + text-align: right; +} + +.card__price { + margin-top: 24px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.card__priceText { + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: #616070; +} + +.card__priceValue { + font-size: 16px; + font-weight: 700; + line-height: 18px; + color: #060B35; +} + +.card__buttom { + box-sizing: border-box; + margin-top: 16px; + background-color: #00ACDC; + font-size: 14px; + line-height: 16px; + width: 166px; + height: 40px; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + color: #FFFFFF; + text-transform: uppercase; +} + +.card .card__star:nth-child(-n+4) { + background-image: url(/src/images/star-active.svg); + transition: transform 0.3s ease; +} + +.card__buttom:hover { + box-sizing: border-box; + background-color: #FFFFFF; + color: #00ACDC; + border-radius: 5px; + border: 1px solid #00ACDC } From dc312db5ace577a5617be99a450ebac513dd3def Mon Sep 17 00:00:00 2001 From: Serhii Lesik Date: Fri, 17 Jan 2025 19:08:22 +0200 Subject: [PATCH 2/3] add second task solution --- src/index.html | 2 +- src/styles/index.css | 5 ++--- src/styles/index.css.map | 2 +- src/styles/index.min.css | 2 +- src/styles/index.min.css.map | 2 +- src/styles/index.scss | 5 ++--- 6 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/index.html b/src/index.html index be7dd7c5e2..64c2df9967 100644 --- a/src/index.html +++ b/src/index.html @@ -41,7 +41,7 @@
Price:
$2,199
-
Buy
+
Buy
diff --git a/src/styles/index.css b/src/styles/index.css index 828105cbb4..9dadad9074 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -19,7 +19,6 @@ body { background-size: cover; width: 160px; height: 134px; - opacity: 0px; } .card__info { @@ -100,7 +99,7 @@ body { color: #060B35; } -.card__buttom { +.card__button { box-sizing: border-box; margin-top: 16px; background-color: #00ACDC; @@ -121,7 +120,7 @@ body { transition: transform 0.3s ease; } -.card__buttom:hover { +.card__button:hover { box-sizing: border-box; background-color: #FFFFFF; color: #00ACDC; diff --git a/src/styles/index.css.map b/src/styles/index.css.map index 6485e4caa3..a236fd6418 100644 --- a/src/styles/index.css.map +++ b/src/styles/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["file:///d:/MateAcademy/projects/layout_product-cards/src/styles/index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["file:///d:/MateAcademy/projects/layout_product-cards/src/styles/index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"index.css"} \ No newline at end of file diff --git a/src/styles/index.min.css b/src/styles/index.min.css index 0c0268da75..b4d5a844cc 100644 --- a/src/styles/index.min.css +++ b/src/styles/index.min.css @@ -1,2 +1,2 @@ -body{margin:0;font-family:Roboto,sans-serif}.card{box-sizing:border-box;width:200px;height:408px;display:flex;flex-direction:column;align-items:center}.card__image{margin-top:32px;box-sizing:border-box;background-image:url(/src/images/imac.jpeg);background-size:cover;width:160px;height:134px;opacity:0px}.card__info{box-sizing:border-box;display:flex;flex-direction:column;margin-left:17px;margin-right:17px}.card__name{margin-top:40px;font-size:12px;font-weight:500;line-height:18px;text-align:left;color:#000}.card__code{font-size:10px;font-weight:400;line-height:14px;text-align:left;color:#616070;margin-top:4px}.card__rating{margin-top:16px;display:flex;justify-content:space-between}.card__stars{display:flex;flex-direction:row;justify-content:space-between}.card__star{box-sizing:border-box;width:16px;height:16px;background-image:url(/src/images/star.svg);background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:row;margin-right:4px}.card__reviews{font-size:10px;font-weight:400;line-height:14px;text-align:right}.card__price{margin-top:24px;display:flex;flex-direction:row;justify-content:space-between}.card__priceText{font-size:12px;font-weight:400;line-height:18px;color:#616070}.card__priceValue{font-size:16px;font-weight:700;line-height:18px;color:#060b35}.card__buttom{box-sizing:border-box;margin-top:16px;background-color:#00acdc;font-size:14px;line-height:16px;width:166px;height:40px;border-radius:5px;display:flex;justify-content:center;align-items:center;color:#fff;text-transform:uppercase}.card .card__star:nth-child(-n+4){background-image:url(/src/images/star-active.svg);transition:transform .3s ease}.card__buttom:hover{box-sizing:border-box;background-color:#fff;color:#00acdc;border-radius:5px;border:1px solid #00acdc} +body{margin:0;font-family:Roboto,sans-serif}.card{box-sizing:border-box;width:200px;height:408px;display:flex;flex-direction:column;align-items:center}.card__image{margin-top:32px;box-sizing:border-box;background-image:url(/src/images/imac.jpeg);background-size:cover;width:160px;height:134px}.card__info{box-sizing:border-box;display:flex;flex-direction:column;margin-left:17px;margin-right:17px}.card__name{margin-top:40px;font-size:12px;font-weight:500;line-height:18px;text-align:left;color:#000}.card__code{font-size:10px;font-weight:400;line-height:14px;text-align:left;color:#616070;margin-top:4px}.card__rating{margin-top:16px;display:flex;justify-content:space-between}.card__stars{display:flex;flex-direction:row;justify-content:space-between}.card__star{box-sizing:border-box;width:16px;height:16px;background-image:url(/src/images/star.svg);background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:row;margin-right:4px}.card__reviews{font-size:10px;font-weight:400;line-height:14px;text-align:right}.card__price{margin-top:24px;display:flex;flex-direction:row;justify-content:space-between}.card__priceText{font-size:12px;font-weight:400;line-height:18px;color:#616070}.card__priceValue{font-size:16px;font-weight:700;line-height:18px;color:#060b35}.card__button{box-sizing:border-box;margin-top:16px;background-color:#00acdc;font-size:14px;line-height:16px;width:166px;height:40px;border-radius:5px;display:flex;justify-content:center;align-items:center;color:#fff;text-transform:uppercase}.card .card__star:nth-child(-n+4){background-image:url(/src/images/star-active.svg);transition:transform .3s ease}.card__button:hover{box-sizing:border-box;background-color:#fff;color:#00acdc;border-radius:5px;border:1px solid #00acdc} /*# sourceMappingURL=index.min.css.map */ \ No newline at end of file diff --git a/src/styles/index.min.css.map b/src/styles/index.min.css.map index 67ff3375a0..efbfdfaf24 100644 --- a/src/styles/index.min.css.map +++ b/src/styles/index.min.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["file:///d:/MateAcademy/projects/layout_product-cards/src/styles/index.scss"],"names":[],"mappings":"AAAA,KACE,SACA,8BAGF,MACE,sBACA,YACA,aACA,aACA,sBACA,mBAGF,aACE,gBACA,sBACA,4CACA,sBACA,YACA,aACA,YAGF,YACE,sBACA,aACA,sBACA,iBACA,kBAGF,YACE,gBACA,eACA,gBACA,iBACA,gBACA,WAGF,YACE,eACA,gBACA,iBACA,gBACA,cACA,eAGF,cACE,gBACA,aACA,8BAGF,aACE,aACA,mBACA,8BAGF,YACE,sBACA,WACA,YACA,2CACA,4BACA,sBACA,aACA,mBACA,iBAGF,eACE,eACA,gBACA,iBACA,iBAGF,aACE,gBACA,aACA,mBACA,8BAGF,iBACE,eACA,gBACA,iBACA,cAGF,kBACE,eACA,gBACA,iBACA,cAGF,cACE,sBACA,gBACA,yBACA,eACA,iBACA,YACA,YACA,kBACA,aACA,uBACA,mBACA,WACA,yBAGF,kCACE,kDACA,8BAGF,oBACE,sBACA,sBACA,cACA,kBACA","file":"index.min.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["file:///d:/MateAcademy/projects/layout_product-cards/src/styles/index.scss"],"names":[],"mappings":"AAAA,KACE,SACA,8BAGF,MACE,sBACA,YACA,aACA,aACA,sBACA,mBAGF,aACE,gBACA,sBACA,4CACA,sBACA,YACA,aAGF,YACE,sBACA,aACA,sBACA,iBACA,kBAGF,YACE,gBACA,eACA,gBACA,iBACA,gBACA,WAGF,YACE,eACA,gBACA,iBACA,gBACA,cACA,eAGF,cACE,gBACA,aACA,8BAGF,aACE,aACA,mBACA,8BAGF,YACE,sBACA,WACA,YACA,2CACA,4BACA,sBACA,aACA,mBACA,iBAGF,eACE,eACA,gBACA,iBACA,iBAGF,aACE,gBACA,aACA,mBACA,8BAGF,iBACE,eACA,gBACA,iBACA,cAGF,kBACE,eACA,gBACA,iBACA,cAGF,cACE,sBACA,gBACA,yBACA,eACA,iBACA,YACA,YACA,kBACA,aACA,uBACA,mBACA,WACA,yBAGF,kCACE,kDACA,8BAGF,oBACE,sBACA,sBACA,cACA,kBACA","file":"index.min.css"} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index b55e7a0842..4d5dd6d6c3 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -19,7 +19,6 @@ body { background-size: cover; width: 160px; height: 134px; - opacity: 0px; } .card__info { @@ -100,7 +99,7 @@ body { color: #060B35; } -.card__buttom { +.card__button { box-sizing: border-box; margin-top: 16px; background-color: #00ACDC; @@ -121,7 +120,7 @@ body { transition: transform 0.3s ease; } -.card__buttom:hover { +.card__button:hover { box-sizing: border-box; background-color: #FFFFFF; color: #00ACDC; From ca64c2b21038c39082b4675d8ff17aaf5e22fa15 Mon Sep 17 00:00:00 2001 From: Serhii Lesik Date: Fri, 17 Jan 2025 19:21:56 +0200 Subject: [PATCH 3/3] add third task solution --- src/index.html | 4 - src/styles/index.css | 35 ++----- src/styles/index.css.map | 2 +- src/styles/index.min.css | 2 +- src/styles/index.min.css.map | 2 +- src/styles/index.scss | 187 ++++++++++++++++++----------------- 6 files changed, 107 insertions(+), 125 deletions(-) diff --git a/src/index.html b/src/index.html index 64c2df9967..0e04d329dc 100644 --- a/src/index.html +++ b/src/index.html @@ -11,10 +11,6 @@ -