diff --git a/readme.md b/readme.md index b1f43ed970..14eb7bf73b 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://dvdmsk.github.io/layout_product-cards/) +- [TEST REPORT LINK](https://dvdmsk.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..2b744ce70f 100644 --- a/src/index.html +++ b/src/index.html @@ -11,8 +11,54 @@ rel="stylesheet" href="./styles/index.scss" /> + + + -

Product cards

+
+ card image +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+

+ Price: + $2,199 +

+ + Buy + +
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..895de5e979 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,90 @@ +.card { + width: 200px; + margin: 0 auto; + background-color: #fff; + padding: 32px 16px 16px; + border-radius: 5px; + border: 1px solid #f3f3f3; + + &__image { + display: block; + width: 160px; + height: 134px; + margin-bottom: 40px; + margin-right: auto; + margin-left: auto; + } + + &__title { + font-weight: 500; + font-size: 12px; + line-height: 18px; + margin-bottom: 4px; + } + + &__code { + font-weight: 400; + font-size: 10px; + line-height: 14px; + color: $main-grey; + margin-bottom: 16px; + } + + &__rate { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 24px; + + .review { + padding-top: 2px; + font-weight: 400; + font-size: 10px; + line-height: 14px; + text-align: right; + display: flex; + align-items: center; + align-self: center; + } + } + + &__price { + display: flex; + justify-content: space-between; + font-weight: 400; + font-size: 12px; + line-height: 18px; + color: $main-grey; + margin-bottom: 16px; + + & span { + font-weight: 700; + font-size: 16px; + line-height: 18px; + color: $main-black; + } + } + + &__btn { + display: block; + height: 40px; + font-weight: 700; + font-size: 14px; + line-height: 16px; + padding: 12px 70px 12px 69px; + background-color: $primary-color; + color: #fff; + border-radius: 5px; + text-transform: uppercase; + box-sizing: border-box; + transition: none; + + &:hover { + border: 1px solid $primary-color; + background-color: #fff; + color: $primary-color; + height: 40px; + padding: 11px 69px 11px 68px; + } + } +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..b15f85e19e --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,18 @@ +.stars { + display: flex; + align-items: center; + &__star { + background-image: url(../images/star.svg); + background-repeat: no-repeat; + background-position: center; + width: 16px; + height: 16px; + margin-right: 4px; + } + + @for $i from 1 through 5 { + &--#{$i} :nth-child(-n + #{$i}) { + background-image: url(../images/star-active.svg); + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..3358022e23 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,6 @@ -body { - margin: 0; -} +@import './utils/variables'; +@import './utils/global'; +@import './blocks/card'; +@import './blocks/stars'; + + diff --git a/src/styles/utils/global.scss b/src/styles/utils/global.scss new file mode 100644 index 0000000000..ee52a7eeae --- /dev/null +++ b/src/styles/utils/global.scss @@ -0,0 +1,20 @@ +body { + margin: 0; + background-color: #ccc; + font-family: Roboto, serif; + color: $main-black; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +p { + margin: 0; +} + +a { + text-decoration: none; +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..8383903f07 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,3 @@ +$main-black: #060b35; +$main-grey: #616070; +$primary-color: #00acdc;