From eca1232f9f6a29b3f2b647b316702877263daac5 Mon Sep 17 00:00:00 2001 From: Ruslana Berkunova Date: Tue, 9 Apr 2024 15:11:06 +0300 Subject: [PATCH] add task solution --- readme.md | 6 +- src/index.html | 341 ++++++++++++++++++++++++++++++- src/styles/blocks/card.scss | 129 ++++++++++++ src/styles/blocks/header.scss | 65 ++++++ src/styles/blocks/main.scss | 7 + src/styles/blocks/page.scss | 4 + src/styles/blocks/stars.scss | 20 ++ src/styles/blocks/variables.scss | 7 + src/styles/index.scss | 9 +- 9 files changed, 580 insertions(+), 8 deletions(-) create mode 100644 src/styles/blocks/card.scss create mode 100644 src/styles/blocks/header.scss create mode 100644 src/styles/blocks/main.scss create mode 100644 src/styles/blocks/page.scss create mode 100644 src/styles/blocks/stars.scss create mode 100644 src/styles/blocks/variables.scss diff --git a/readme.md b/readme.md index 705275c4af..dfa8fced78 100644 --- a/readme.md +++ b/readme.md @@ -9,7 +9,7 @@ Create HTML page with catalog. Develop semantic page structure as shown on [the - add `data-qa="card-hover"` (not just `hover`) to the link `Buy` inside the first card - nav links color is not `black` any more (nav links should have `#060b35` color) - add class `is-active` to the first link (`Apple`) in navigation -- use `
` tag for cards container +- use `
` tag for cards container - use grid for cards with different number of columns: - 1 for the smaller screens - 2 starting at `488px` @@ -30,8 +30,8 @@ Make all the changes smooth on hover (during 300ms): ## Checklist ❗️ Replace `` with your Github username and copy the links to `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_catalog/) -- [TEST REPORT LINK](https://.github.io/layout_catalog/report/html_report/) +- [DEMO LINK](https://rberkunova.github.io/layout_catalog/) +- [TEST REPORT LINK](https://rberkunova.github.io/layout_catalog/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 9cff78eeb7..5ce935dec2 100644 --- a/src/index.html +++ b/src/index.html @@ -21,7 +21,344 @@ /> - -

Catalog

+ +
+ + + + +
+
+
+ iMac A1419 + +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+ +
+ iMac A1419 + +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+ +
+ iMac A1419 + +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+ +
+ iMac A1419 + +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+ +
+ iMac A1419 + +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+ +
+ iMac A1419 + +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+ +
+ iMac A1419 + +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + Buy + +
+ +
+ iMac A1419 + +

+ 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..81ba12f56d --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,129 @@ +.card { + width: 200px; + border: 1px solid $border-color; + box-sizing: border-box; + background-color: $white-color; + border-radius: 5px; + + &__image { + display: block; + width: 160px; + height: 134px; + margin-inline: 19px; + margin-top: 32px; + } + + &:hover { + transition-duration: 300ms; + transform: scale(1.2); + } +} + +.card__title .card:hover { + color: $hover-title; + transition-duration: 300ms; +} + +.card__title { + font-family: $main-text; + font-size: 12px; + font-weight: 500; + line-height: 18px; + padding-inline: 16px; + padding-top: 40px; + color: $main-color; + margin: 0; +} + +.card__code { + font-family: $main-text; + font-size: 10px; + font-weight: 400; + line-height: 14px; + color: $ligh-grey; + text-align: left; + padding-inline: 16px; + padding-top: 4px; + margin: 0; +} + +.reviews { + display: flex; + margin-inline: 16px; + justify-content: space-between; + padding-top: 16px; + align-items: flex-end; + + &__count { + font-family: $main-text; + font-size: 10px; + font-weight: 400; + line-height: 14px; + color: $main-color; + margin: 0; + text-align: bottom; + } +} + +.price { + display: flex; + margin-inline: 16px; + justify-content: space-between; + margin-top: 24px; + align-items: flex-end; + + &__text { + font-family: $main-text; + font-size: 12px; + font-weight: 400; + line-height: 18px; + text-align: left; + color: $ligh-grey; + margin: 0; + } + + &__price { + font-family: $main-text; + font-size: 16px; + font-weight: 700; + line-height: 18px; + text-align: right; + color: $main-color; + margin: 0; + } +} + +.card__to-buy { + display: flex; + align-items: center; + justify-content: center; + height: 40px; + border-radius: 5px; + background-color: $hover-color; + margin: 16px; + + font-family: $main-text; + font-size: 14px; + font-weight: 700; + line-height: 16px; + color: $white-color; + text-transform: uppercase; +} + +.card__to-buy:hover { + display: flex; + align-items: center; + justify-content: center; + height: 40px; + border-radius: 5px; + border: 1px solid $hover-color; + background-color: $white-color; + margin: 16px; + + font-family: $main-text; + font-size: 14px; + font-weight: 700; + line-height: 16px; + color: $hover-color; + text-transform: uppercase; +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..6d19920e5c --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,65 @@ +.header { + margin: 0; + padding: 0 50px; + display: flex; + box-sizing: border-box; + background-color: $white-color; + align-items: center; + justify-content: space-between; + + &__logo_link { + display: block; + width: 40px; + height: 40px; + margin: 10px 0; + } + + &__nav { + display: block; + + &_list { + display: flex; + list-style-type: none; + margin: 0; + padding: 0; + } + + &_link { + position: relative; + display: flex; + align-items: center; + height: 60px; + font-family: $main-text; + font-size: 12px; + text-transform: uppercase; + color: $main-color; + font-weight: 500; + text-decoration: none; + } + + &_item { + margin-left: 20px; + + &:first-child { + margin-left: 0; + } + } + } +} + +.is-active, +.header__nav_link:hover { + transition-duration: 300ms; + color: $hover-color; +} + +.is-active::after { + content: ''; + position: absolute; + background-color: $hover-color; + bottom: 0; + left: 0; + right: 0; + height: 4px; + border-radius: 8px; +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..a49f1404e7 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,7 @@ +.container { + display: grid; + grid-template-columns: repeat(auto-fill, 200px); + gap: 46px 48px; + justify-content: center; + padding: 50px 40px; +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..72b9234fee --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,4 @@ +.page { + margin: 0; + display: block; +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..7c51cc6760 --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,20 @@ +.stars--4 { + display: flex; +} + +.stars__star { + height: 16px; + width: 16px; + background-image: url(../images/star.svg); + background-position: center; + background-repeat: no-repeat; + margin-right: 4px; +} + +.stars--4:last-child { + margin: 0; +} + +.stars--4 .stars__star:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); +} diff --git a/src/styles/blocks/variables.scss b/src/styles/blocks/variables.scss new file mode 100644 index 0000000000..2df3f4de1c --- /dev/null +++ b/src/styles/blocks/variables.scss @@ -0,0 +1,7 @@ +$hover-color: #00acdc; +$main-color: #060b35; +$hover-title: #34568b; +$border-color: #f3f3f3; +$ligh-grey: #616070; +$white-color: #fff; +$main-text: Roboto, sans-serif; diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..7353498fbf 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,6 @@ -body { - margin: 0; -} +@import 'blocks/page'; +@import 'blocks/variables'; +@import 'blocks/header'; +@import 'blocks/card'; +@import 'blocks/stars'; +@import 'blocks/main';