From c43cffc15ccac504aa33e717653793bdad75fe7a Mon Sep 17 00:00:00 2001 From: Karina Turchyna Date: Sat, 1 Feb 2025 09:25:15 +0200 Subject: [PATCH] implement task --- readme.md | 4 +-- src/images/button-img-hover.png | Bin 0 -> 824 bytes src/images/button-img.png | Bin 0 -> 764 bytes src/index.html | 58 ++++++++++++++++++++++++++++++-- src/styles/blocks/body.scss | 5 +++ src/styles/blocks/bottom.scss | 35 +++++++++++++++++++ src/styles/blocks/card.scss | 55 ++++++++++++++++++++++++++++++ src/styles/blocks/page.scss | 5 +++ src/styles/blocks/stars.scss | 15 +++++++++ src/styles/index.scss | 9 +++-- src/utils/variables.scss | 6 ++++ 11 files changed, 184 insertions(+), 8 deletions(-) create mode 100644 src/images/button-img-hover.png create mode 100644 src/images/button-img.png create mode 100644 src/styles/blocks/body.scss create mode 100644 src/styles/blocks/bottom.scss create mode 100644 src/styles/blocks/card.scss create mode 100644 src/styles/blocks/page.scss create mode 100644 src/styles/blocks/stars.scss create mode 100644 src/utils/variables.scss diff --git a/readme.md b/readme.md index b1f43ed970..96364d26a5 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://Karabesk.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://Karabesk.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/button-img-hover.png b/src/images/button-img-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..1e619f38f83ec5658f687749ae6c39e5dbc7ab13 GIT binary patch literal 824 zcmV-81IPS{P)|wQAwrl$O%Gk5R{}+SC|{LC!m}l=?O5astqXW2|`W)T~$qqpeHEH zNKu%+_Z&!QQSFilX7PWLiwB#oem##p&oMM}`lCX|GxpIdHCU^%uBl44}KT( zztVru)N#^E*jrfkJ-v*{*cu;`PMSKwUr;gAwRN*rdQ>CI=g%|$G6+sMe6qw=(SBF) z@mrBYxu^TqHVKwOFw-2CBHg4dFbP>vt7R5Rx6B9KH>Reaxm-p652=>b?J>bp2xeB- z*CAh?lg|FhBzueCebtPp)ekw~4gDU~@}CgQG@aqOZuxv)$I`o6-_0J(hgGvskZAy_ zWd;alx}Ul^_w{aEqyLpu%`tCf9iv*NLNL?J=9ou26_UGa3D@jKCaa`swsqgRFQ}I3 z5X@B=BXiB!#P4}v$pUxFY9{b3RjJ3&|q@7_;zuVgC za~0)^I6r5s=fKJk%rwqL`YC~&PA~Xz&)fN>IG3yPL-rGrd8a-|H*)^sIk2KXS2$ob z@@!LHKZVEROrl~w6;#M4g_|Gn5`qa{LNLKg2qt(5!2~ZMnBXM@6TF0Af|sl=wJkOw z0BoGqm#hkfG6DEN{^YfD7gpcqGp2>A2^*JW@R+QLEgkLjIGk;5-TL%>p8(cP0x8Yc zl0nJhK`A!#gWX|7Qx|dd+#`T>N?Ho#)s^>JDA{l69O3?<=O)hp0000x@w~Ud&T;bETdmgOO)I6tlU_L;bn_AI3fQtT=xA8_ zp8KZ4S<-Veqi*FF))mY=S+Kmj$in!(#F2OB#S(mO&U^ayljD}nQXGe^^5(5R$^Tf- zcdxE;mzKh<++!gDGHa#oR0|*Ytme4HRiwAtY>KKtW>UPSZM8;&$MikyO0_j?lS7gW zJXLW~ry72BbuF&{n^#u1BeZsJ$G7eCPspBmaCfWDt<$S5{=TTqkAM5AaLOk4fZDG& z|LV=RZ##CVyvKg-{SC{n{cDOoFYX|{(NOqGZbiz^>hB6CWRFhPRu8&weKE=@-P9%V zNkgV#WU5@wb9z zP5+f_5IpJFm-c^ucB>R*9$l-MtNs1-;@Azk|NGz1;C$p>e((PCzVf)bBFAp$St@zH zoJ;=bZcDYwIm1$1wqv4cGP}H>{UmeesNg1v_Sv~JdwORoL>QZTKR(*rS z>e`aLt}gRC;?vb{&A#xF<#8a8>l+nvB=g_&NQDaDyb zWuN|D5>s9HRpnK2e0B8_-&B6yzJoprm$yt%@Vl*WZ`)!2KN|b~y-`-v}r7`30V Y@XPn*kqNGwfr*vD)78&qol`;+0LHIN - + + + + + - -

Product cards

+ + +
+
+

+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +

+

Product code: 195434

+
+
+
+
+
+
+
+
+
+ +
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+
+ +
diff --git a/src/styles/blocks/body.scss b/src/styles/blocks/body.scss new file mode 100644 index 0000000000..5decc7d508 --- /dev/null +++ b/src/styles/blocks/body.scss @@ -0,0 +1,5 @@ +.body { + margin: 0; + width: 198px; + height: 406px; +} diff --git a/src/styles/blocks/bottom.scss b/src/styles/blocks/bottom.scss new file mode 100644 index 0000000000..d6a9d27d27 --- /dev/null +++ b/src/styles/blocks/bottom.scss @@ -0,0 +1,35 @@ +.bottom { + width: $widthAllFlexBlocks; + + &__review { + display: flex; + font-weight: $fontWeightCustomText; + } + + &__price { + font-weight: $fontWeightCustomText; + color: $secondaryFontcolor; + line-height: 18px; + font-size: 12px; + + &-amount { + font-weight: 700; + font-size: 16px; + line-height: 18px; + } + } + + &__line { + display: flex; + justify-content: space-between; + align-items: center; + + &--1--distance { + margin: 16px 0 24px; + } + + &--2--distance { + margin-bottom: 16px; + } + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..c87647530c --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,55 @@ +.card { + width: 200px; + box-sizing: border-box; + border-radius: 5px; + display: flex; + flex-direction: column; + align-items: center; + + &--page { + padding: 32px 16px 16px; + } + + &__image { + background-image: url(/src/images/imac.jpeg); + width: 160px; + height: 134px; + background-size: cover; + } + + &__description { + width: $widthAllFlexBlocks; + font-size: 12px; + line-height: 18px; + font-weight: 500; + + &--image { + margin: 40px 0 4px; + } + } + + &__product-code { + margin: 0; + width: $widthAllFlexBlocks; + line-height: $lineHeightcustom; + display: flex; + justify-content: left; + font-size: 10px; + font-weight: $fontWeightCustomText; + color: $secondaryFontcolor; + } + + &__button { + padding: 0; + border-radius: 5px; + border: none; + background-image: url(/src/images/button-img.png); + background-size: cover; + height: 40px; + width: $widthAllFlexBlocks; + + &:hover { + background-image: url(/src/images/button-img-hover.png); + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..3d37f0a211 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,5 @@ +.page { + font-family: Roboto, serif; + margin: 0; + font-size: $defaultFontSize; +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..36c625e2b7 --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,15 @@ +.stars { + display: flex; + gap: 4px; + + &__star { + width: 16px; + height: 16px; + background-size: cover; + background-image: url(/src/images/star-active.svg); + } + + &__star--5 { + background-image: url(/src/images/star.svg); + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..bf17e5f074 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,6 @@ -body { - margin: 0; -} +@import '/src/utils/variables'; +@import '/src/styles/blocks/page'; +@import '/src/styles/blocks/body'; +@import '/src/styles/blocks/card'; +@import '/src/styles/blocks/stars'; +@import '/src/styles/blocks/bottom'; diff --git a/src/utils/variables.scss b/src/utils/variables.scss new file mode 100644 index 0000000000..83caf28196 --- /dev/null +++ b/src/utils/variables.scss @@ -0,0 +1,6 @@ +$defaultFontSize: 10px; +$secondaryFontcolor: #616070; +$mainFontColor: #060b35; +$lineHeightcustom: 14px; +$fontWeightCustomText: 400; +$widthAllFlexBlocks: 166px;