From 3db7cab28be31fe70b89a4e29169d693eb6cf946 Mon Sep 17 00:00:00 2001 From: Olya Date: Thu, 21 May 2026 22:29:12 +0200 Subject: [PATCH 1/3] added BEM --- readme.md | 6 +- src/index.html | 156 +++++++++++++++++++++++++++++- src/styles/index.scss | 220 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 377 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index acd5174814..769770a4fd 100644 --- a/readme.md +++ b/readme.md @@ -9,7 +9,7 @@ Create an HTML page with a catalog. Develop semantic page structure as shown on - add `data-qa="card-hover"` (not just `hover`) to the link `Buy` inside the first card - nav links color is not `black` anymore (nav links should have `#060b35` color) - add the class `is-active` to the first link (`Apple`) in the navigation -- use `
` tag for cards container +- use `
` tag for cards container - use the grid for cards with different numbers of columns: - 1 for the smaller screens - 2 starting at `488px` @@ -33,8 +33,8 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs ## Checklist ❗️ Replace `` with your GitHub username and copy the links to the `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_catalog/) -- [TEST REPORT LINK](https://.github.io/layout_catalog/report/html_report/) +- [DEMO LINK](https://OlyaFialkovska.github.io/MateAcademy_layout_catalog/) +- [TEST REPORT LINK](https://OlyaFialkovska.github.io/MateAcademy_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..431d630b7c 100644 --- a/src/index.html +++ b/src/index.html @@ -19,9 +19,161 @@ rel="stylesheet" href="styles/index.scss" /> - + + + + + -

Catalog

+
+ + + +
+ +
+
+ + Apple A1419 iMac + +
+

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

+ +

Product code: 195434

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

+
+ + + Buy + +
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..9a58fcf5a8 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,223 @@ +$button-color: #00acdc; +$secondary: #616070; +$main-accent: #060b35; +$white: white; +$border-color: #f3f3f3; +$main-color: #00acdc; + +html{ + font-family: Roboto, sans-serif; + font-style: normal; +} + body { margin: 0; } + +// #region header + +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 50px; + + &__link{ + text-decoration: none; + + &--active { + position: relative; + color: $main-color; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 100%; + height: 4px; + border-radius: 8px; + + background-color: $main-color; + } + } + } + + &__link--logo { + display: flex; + } + + &__logo-img{ + width: 40px; + height: 40px; + } + + &__nav-list{ + display: flex; + align-items: center; + margin: 0; + padding: 0; + list-style: none; + } + + &__nav-list &__nav-item:not(:last-child) { + margin-right: 20px; + } + + &__link--nav { + display: flex; + align-items: center; + + height: 60px; + + font-size: 12px; + font-weight: 500; + color: black; + text-transform: uppercase; + + &:hover { + color: $main-color; + } + } +} + +// #endregion header + + +// #region cards + +.card { + box-sizing: border-box; + width: 200px; + padding: 32px 16px 16px; + border: 1px solid $border-color; + border-radius: 5px; + + &__image { + display: block; + width: 160px; + height: 134px; + margin: 0 3px 40px; + } + + &__content { + box-sizing: border-box; + } + + &__text { + margin: 0; + padding: 0; + color: $main-accent; + + &--review-text { + font-weight: 400; + font-size: 10px; + line-height: 14px; + letter-spacing: 0%; + } + + &--product-name { + font-weight: 500; + font-size: 12px; + line-height: 18px; + letter-spacing: 0%; + } + + &--product-code { + font-weight: 400; + margin-top: 4px; + font-size: 10px; + line-height: 14px; + letter-spacing: 0%; + color: $secondary; + } + + &--price-label { + font-weight: 400; + font-size: 12px; + line-height: 18px; + letter-spacing: 0%; + color: $secondary; + } + + &--price-value { + font-weight: 700; + font-size: 16px; + line-height: 18px; + letter-spacing: 0%; + } + } + + &__review { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: nowrap; + margin-top: 16px; + } + + &__price { + margin-top: 24px; + display: flex; + justify-content: space-between; + } + + &__button { + box-sizing: border-box; + margin-top: 16px; + display: flex; + width: 100%; + height: 40px; + justify-content: center; + align-items: center; + border-radius: 5px; + border: 1px solid $button-color; + + background-color: $button-color; + + color: $white; + font-weight: 700; + font-size: 14px; + line-height: 16px; + letter-spacing: 0%; + text-transform: uppercase; + text-decoration: none; + + &:hover { + background-color: $white; + color: $button-color; + } + } +} + +// #endregion cards + + +// #region stars + +.stars { + display: flex; + + &__star { + width: 16px; + height: 16px; + background-image: url('../images/star.svg'); + background-repeat: no-repeat; + background-position: center; + } + + &__star:not(:last-child) { + margin-right: 4px; + } + + &--4 &__star:nth-child(-n + 4) { + background-image: url('../images/star-active.svg'); + } +} + +// #endregion stars + + + From db8bdd2ecfb12480cc05d69c5d9418d156cc04ec Mon Sep 17 00:00:00 2001 From: Olya Date: Fri, 22 May 2026 12:42:54 +0200 Subject: [PATCH 2/3] did the task --- src/index.html | 345 +++++++++++++++++++++++++++++++++++++++--- src/styles/index.scss | 144 +++++++++++------- 2 files changed, 415 insertions(+), 74 deletions(-) diff --git a/src/index.html b/src/index.html index 431d630b7c..f53985da01 100644 --- a/src/index.html +++ b/src/index.html @@ -19,21 +19,6 @@ rel="stylesheet" href="styles/index.scss" /> - - - - -
@@ -52,7 +37,7 @@
-
+
+ Apple A1419 iMac + +
+

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

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

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+

$2,199

+
+ + + Buy + +
+
+ +
Apple A1419 iMac
-

+

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

-

Product code: 195434

+

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

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

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

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

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

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

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

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

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

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

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

+ +

+ Product code: 195434 +

@@ -166,7 +468,6 @@
diff --git a/src/styles/index.scss b/src/styles/index.scss index 9a58fcf5a8..1a5bd68a28 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,11 +1,12 @@ -$button-color: #00acdc; $secondary: #616070; $main-accent: #060b35; $white: white; $border-color: #f3f3f3; $main-color: #00acdc; +$header-shadow: #0000000d; +$hover-card-title: #34568b; -html{ +html { font-family: Roboto, sans-serif; font-style: normal; } @@ -22,39 +23,22 @@ body { justify-content: space-between; padding: 0 50px; - &__link{ - text-decoration: none; - - &--active { - position: relative; - color: $main-color; - - &::after { - content: ''; + box-shadow: 0 2px 4px 0 rgba($header-shadow, 0.05); - position: absolute; - bottom: 0; - left: 0; - - width: 100%; - height: 4px; - border-radius: 8px; - - background-color: $main-color; - } - } + &__link { + text-decoration: none; } &__link--logo { display: flex; } - &__logo-img{ + &__logo-img { width: 40px; height: 40px; } - &__nav-list{ + &__nav-list { display: flex; align-items: center; margin: 0; @@ -62,7 +46,7 @@ body { list-style: none; } - &__nav-list &__nav-item:not(:last-child) { + &__nav-list &__nav-item:not(:last-child) { margin-right: 20px; } @@ -74,28 +58,91 @@ body { font-size: 12px; font-weight: 500; - color: black; + color: $main-accent; text-transform: uppercase; + transition: color 300ms; + &:hover { - color: $main-color; + color: $main-color; } } } -// #endregion header +.is-active { + position: relative; + color: $main-color; + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 100%; + height: 4px; + border-radius: 8px; + + background-color: $main-color; + } +} + +// #endregion header // #region cards +.catalog { + display: grid; + place-content: center; + gap: 46px 48px; + padding: 50px 40px; + grid-template-columns: 200px; + grid-template-rows: repeat(auto-fit, 1fr); + + @media (min-width: 488px) { + grid-template-columns: repeat(2, 200px); + } + + @media (min-width: 768px) { + grid-template-columns: repeat(3, 200px); + } + + @media (min-width: 1024px) { + grid-template-columns: repeat(4, 200px); + } +} + .card { box-sizing: border-box; width: 200px; padding: 32px 16px 16px; border: 1px solid $border-color; border-radius: 5px; + transition: transform 300ms; + + &:hover { + transform: scale(1.2); + } + + &__title { + margin: 0; + padding: 0; + color: $main-accent; + + font-weight: 500; + font-size: 12px; + line-height: 18px; + letter-spacing: 0; - &__image { + transition: color 300ms; + } + + // &:hover &__title { + // color: $hover-card-title; + // } + + &__img { display: block; width: 160px; height: 134px; @@ -111,34 +158,27 @@ body { padding: 0; color: $main-accent; - &--review-text { + &--product-code { font-weight: 400; + margin-top: 4px; font-size: 10px; line-height: 14px; - letter-spacing: 0%; - } - - &--product-name { - font-weight: 500; - font-size: 12px; - line-height: 18px; - letter-spacing: 0%; + letter-spacing: 0; + color: $secondary; } - &--product-code { + &--review-text { font-weight: 400; - margin-top: 4px; font-size: 10px; line-height: 14px; - letter-spacing: 0%; - color: $secondary; + letter-spacing: 0; } &--price-label { font-weight: 400; font-size: 12px; line-height: 18px; - letter-spacing: 0%; + letter-spacing: 0; color: $secondary; } @@ -146,7 +186,7 @@ body { font-weight: 700; font-size: 16px; line-height: 18px; - letter-spacing: 0%; + letter-spacing: 0; } } @@ -173,28 +213,31 @@ body { justify-content: center; align-items: center; border-radius: 5px; - border: 1px solid $button-color; + border: 1px solid $main-color; - background-color: $button-color; + background-color: $main-color; color: $white; font-weight: 700; font-size: 14px; line-height: 16px; - letter-spacing: 0%; + letter-spacing: 0; text-transform: uppercase; text-decoration: none; + transition: + background-color 300ms, + color 300ms; + &:hover { background-color: $white; - color: $button-color; + color: $main-color; } } } // #endregion cards - // #region stars .stars { @@ -218,6 +261,3 @@ body { } // #endregion stars - - - From 180fd3295f0e5e377787b9a9bdd2e9d2835a6d15 Mon Sep 17 00:00:00 2001 From: Olya Date: Fri, 22 May 2026 12:49:37 +0200 Subject: [PATCH 3/3] uncomment rule --- src/styles/index.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 1a5bd68a28..b09e61e41d 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -138,9 +138,9 @@ body { transition: color 300ms; } - // &:hover &__title { - // color: $hover-card-title; - // } + &:hover &__title { + color: $hover-card-title; + } &__img { display: block;