From 72365b111e9cc067c437a65769840a53f70b85ba Mon Sep 17 00:00:00 2001 From: Higor Pedroso Arruda Date: Mon, 11 Mar 2024 14:35:47 -0300 Subject: [PATCH 1/5] add task solution --- package.json | 2 +- readme.md | 6 +- src/index.html | 372 +++++++++++++++++++++++++++++++++++++- src/styles/card.scss | 131 ++++++++++++++ src/styles/index.scss | 8 + src/styles/menu.scss | 65 +++++++ src/styles/stars.scss | 17 ++ src/styles/variables.scss | 6 + 8 files changed, 602 insertions(+), 5 deletions(-) create mode 100644 src/styles/card.scss create mode 100644 src/styles/menu.scss create mode 100644 src/styles/stars.scss create mode 100644 src/styles/variables.scss diff --git a/package.json b/package.json index 31948fe18a..2ccebee145 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@mate-academy/bemlint": "latest", "@mate-academy/eslint-config": "0.0.27", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.7.2", + "@mate-academy/scripts": "^1.7.3", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "2.10.2", "backstopjs": "^6.2.2", diff --git a/readme.md b/readme.md index 705275c4af..adafc4fc3c 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://HigorPedroso.github.io/layout_catalog/) +- [TEST REPORT LINK](https://HigorPedroso.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..bc0c960beb 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,376 @@ -

Catalog

+
+ + + + +
+
+
+ Imac +

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

+

Product code: 195434

+
+
+ + + + + +
+
+

Reviews: 5

+
+
+
+

Price:

+

$2,199

+
+ +
+
+ Imac +

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

+

Product code: 195434

+
+
+ + + + + +
+
+

Reviews: 5

+
+
+
+

Price:

+

$2,199

+
+ +
+
+ Imac +

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

+

Product code: 195434

+
+
+ + + + + +
+
+

Reviews: 5

+
+
+
+

Price:

+

$2,199

+
+ +
+
+ Imac +

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

+

Product code: 195434

+
+
+ + + + + +
+
+

Reviews: 5

+
+
+
+

Price:

+

$2,199

+
+ +
+
+ Imac +

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

+

Product code: 195434

+
+
+ + + + + +
+
+

Reviews: 5

+
+
+
+

Price:

+

$2,199

+
+ +
+
+ Imac +

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

+

Product code: 195434

+
+
+ + + + + +
+
+

Reviews: 5

+
+
+
+

Price:

+

$2,199

+
+ +
+
+ Imac +

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

+

Product code: 195434

+
+
+ + + + + +
+
+

Reviews: 5

+
+
+
+

Price:

+

$2,199

+
+ +
+
+ Imac +

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

+

Product code: 195434

+
+
+ + + + + +
+
+

Reviews: 5

+
+
+
+

Price:

+

$2,199

+
+ +
+
diff --git a/src/styles/card.scss b/src/styles/card.scss new file mode 100644 index 0000000000..6c9563fb38 --- /dev/null +++ b/src/styles/card.scss @@ -0,0 +1,131 @@ +main { + display: grid; + grid-template-columns: repeat(1, 200px); + gap: 46px 48px; + padding: 50px; + justify-content: center; +} + +@media (min-width: 488px) { + main { + grid-template-columns: repeat(2, 200px); + } +} + +@media (min-width: 768px) { + main { + grid-template-columns: repeat(3, 200px); + } +} + +@media (min-width: 1024px) { + main { + grid-template-columns: repeat(4, 200px); + } +} + +.card { + width: 200px; + display: flex; + flex-direction: column; + box-sizing: border-box; + border: 1px solid #f3f3f3; + padding: 32px 16px 16px; + border-radius: 5px; + color: $color-text-card; + + &:hover { + border: 3px solid #f3f3f3; + transform: scale(1.2); + } + + &__img { + width: 160px; + height: 134px; + box-sizing: border-box; + margin-left: 3px; + transition: 3s; + } + + &__title { + margin: 0; + font-size: 12px; + font-weight: 500; + line-height: 18px; + padding-top: 40px; + height: 36px; + } + + &:hover &__title { + color: #34568b; + cursor: pointer; + transition: 3s; + } + + &__code { + justify-content: space-between; + margin: 0; + font-size: 10px; + font-weight: 400; + line-height: 14px; + padding-top: 4px; + color: $color-secondary; + } + + &__rate { + padding-top: 17px; + display: flex; + justify-content: space-between; + align-items: center; + height: 16px; + + &-reviews { + font-size: 10px; + font-weight: 400; + line-height: 14px; + } + } + + &__price { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 23px; + + &-text { + margin: 0; + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: $color-text-card; + } + + &-value { + margin: 0; + font-size: 16px; + font-weight: 700; + line-height: 18px; + } + } + + &__btn { + width: $width; + height: 40px; + border: 0; + border-radius: 5px; + background-color: $btn-color; + font-size: 14px; + font-weight: 700; + line-height: 16px; + color: #fff; + margin-top: 16px; + cursor: pointer; + text-transform: uppercase; + + &:hover { + border: 1px solid $btn-color; + background-color: #fff; + color: $btn-color; + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..05df316bf1 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,11 @@ +@import 'variables'; +@import 'menu'; +@import 'card'; +@import 'stars'; + body { margin: 0; + font-family: Roboto, sans-serif; + font-size: 12px; + font-weight: 500; } diff --git a/src/styles/menu.scss b/src/styles/menu.scss new file mode 100644 index 0000000000..d72f98a74c --- /dev/null +++ b/src/styles/menu.scss @@ -0,0 +1,65 @@ +* { + margin: 0; +} + +.header { + width: 100%; + display: flex; + justify-content: space-between; + box-shadow: 0 2px 4px 0 #0000000d; + transition: 0.3s; + &__logo { + margin-left: 50px; + margin-top: 10px; + width: 40px; + height: 40px; + } +} + +.menu { + background-color: #fff; + margin-right: 50px; + + &__list { + list-style: none; + display: flex; + justify-items: left; + padding: 0; + } + + &__item { + text-transform: uppercase; + } + + &__link { + text-decoration: none; + text-align: center; + height: 60px; + display: flex; + align-items: center; + } + + &__link:not(.is-active) { + color: $color-links; + margin-left: 20px; + } + + &__link:hover { + color: $color-primary; + } +} + +.is-active { + color: $color-primary; + position: relative; + + &::after { + content: ''; + position: absolute; + color: $color-primary; + width: 90%; + bottom: 0; + border: 2px solid $color-primary; + border-radius: 10px; + } +} diff --git a/src/styles/stars.scss b/src/styles/stars.scss new file mode 100644 index 0000000000..38000ddbea --- /dev/null +++ b/src/styles/stars.scss @@ -0,0 +1,17 @@ +.stars { + display: flex; + + &__star { + background-image: url('../images/star-active.svg'); + background-repeat: no-repeat; + background-position: center; + display: flex; + height: 16px; + width: 16px; + margin-right: 4px; + + &:nth-child(5) { + background-image: url('../images/star.svg'); + } + } +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000000..e09cf700f0 --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,6 @@ +$color-primary: #00acdc; +$color-secondary: #616070; +$btn-color: #00acdc; +$width: 166px; +$color-links: #060b35; +$color-text-card: #060b35; From 1e73d720aaa03f010e1ffdf8ad4f91d28269c9c4 Mon Sep 17 00:00:00 2001 From: Higor Pedroso Arruda Date: Mon, 11 Mar 2024 15:07:12 -0300 Subject: [PATCH 2/5] add task solution --- src/index.html | 2 +- src/styles/card.scss | 28 +--------------------------- src/styles/index.scss | 1 + src/styles/main.scss | 25 +++++++++++++++++++++++++ 4 files changed, 28 insertions(+), 28 deletions(-) create mode 100644 src/styles/main.scss diff --git a/src/index.html b/src/index.html index bc0c960beb..85118d3a3d 100644 --- a/src/index.html +++ b/src/index.html @@ -103,7 +103,7 @@ -
+
Date: Mon, 11 Mar 2024 19:36:31 -0300 Subject: [PATCH 3/5] add task solution --- src/index.html | 63 +++++++++++++++++++++++++++++++++++++------ src/styles/card.scss | 4 +-- src/styles/stars.scss | 12 ++++++--- 3 files changed, 64 insertions(+), 15 deletions(-) diff --git a/src/index.html b/src/index.html index 85118d3a3d..1843ce3e84 100644 --- a/src/index.html +++ b/src/index.html @@ -43,6 +43,7 @@ Apple +
    • +
    • +
    • +
    • +
    • +
    • +
  • +

    Product code: 195434

    -
    +
    + + + +
    @@ -140,6 +152,7 @@

    Buy

    +

    Product code: 195434

    -
    +
    + + + +
    @@ -176,6 +193,7 @@

    Buy

    +

    Product code: 195434

    -
    +
    + + + +
    @@ -212,6 +234,7 @@

    Buy

    +

    Product code: 195434

    -
    +
    + + + +
    @@ -248,6 +275,7 @@

    Buy

    +

    Product code: 195434

    -
    +
    + + + +
    @@ -284,6 +316,7 @@

    Buy

    +

    Product code: 195434

    -
    +
    + + + +
    @@ -320,6 +357,7 @@

    Buy

    +

    Product code: 195434

    -
    +
    + + + +
    @@ -356,6 +398,7 @@

    Buy

    +

    Product code: 195434

    -
    +
    + + + +
    diff --git a/src/styles/card.scss b/src/styles/card.scss index 5399dcd6a9..2bbb6aebd1 100644 --- a/src/styles/card.scss +++ b/src/styles/card.scss @@ -7,10 +7,10 @@ padding: 32px 16px 16px; border-radius: 5px; color: $color-text-card; + transition-duration: 300ms; &:hover { transform: scale(1.2); - transition-duration: 300ms; } &__img { @@ -18,7 +18,6 @@ height: 134px; box-sizing: border-box; margin-left: 3px; - transition: 3s; } &__title { @@ -33,7 +32,6 @@ &:hover &__title { color: #34568b; cursor: pointer; - transition: 3s; } &__code { diff --git a/src/styles/stars.scss b/src/styles/stars.scss index 38000ddbea..b4565d2b22 100644 --- a/src/styles/stars.scss +++ b/src/styles/stars.scss @@ -1,17 +1,21 @@ .stars { display: flex; + justify-content: start; + align-items: center; + background-size: cover; &__star { - background-image: url('../images/star-active.svg'); + background-image: url(/src/images/star.svg); background-repeat: no-repeat; background-position: center; - display: flex; height: 16px; width: 16px; margin-right: 4px; + } - &:nth-child(5) { - background-image: url('../images/star.svg'); + @for $i from 1 through 5 { + &--#{$i} &__star:nth-child(-n + #{$i}) { + background-image: url(/src/images/star-active.svg); } } } From 8b6a761aba653bf48d2de9139de09674df5c8194 Mon Sep 17 00:00:00 2001 From: Higor Pedroso Arruda Date: Mon, 11 Mar 2024 20:45:28 -0300 Subject: [PATCH 4/5] add task solution --- src/styles/card.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/styles/card.scss b/src/styles/card.scss index 2bbb6aebd1..cbd208c61c 100644 --- a/src/styles/card.scss +++ b/src/styles/card.scss @@ -7,7 +7,7 @@ padding: 32px 16px 16px; border-radius: 5px; color: $color-text-card; - transition-duration: 300ms; + transition: transform 0.3s ease; &:hover { transform: scale(1.2); @@ -27,6 +27,7 @@ line-height: 18px; padding-top: 40px; height: 36px; + transition: color 0.3s ease; } &:hover &__title { @@ -93,6 +94,7 @@ margin-top: 16px; cursor: pointer; text-transform: uppercase; + transition: background-color 0.3s ease; &:hover { border: 1px solid $btn-color; From 0f597608e89314c16e4f7af4f2d99b6c5da9bdbf Mon Sep 17 00:00:00 2001 From: Misha Hrynko Date: Tue, 12 Mar 2024 21:01:35 +0200 Subject: [PATCH 5/5] Update readme.md --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index adafc4fc3c..76a56c66d9 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`