From 0738bc0e85da8590817e4c998af87b7dc98e89e5 Mon Sep 17 00:00:00 2001 From: Valentyn Date: Sat, 7 Dec 2024 17:53:35 +0200 Subject: [PATCH 01/16] add --- readme.md | 12 +- src/index.html | 396 +++++++++++++++++++++++++++++++++++++++++- src/styles/index.scss | 223 ++++++++++++++++++++++++ 3 files changed, 625 insertions(+), 6 deletions(-) diff --git a/readme.md b/readme.md index 874ca70d97..1ed18066c2 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ # Frontend practice with catalog page -Create an HTML page with a catalog. Develop semantic page structure as shown on [the mockup](https://www.figma.com/file/ojkArVazq7vsX0nbpn9CxZ/Moyo-%2F-Catalog-(ENG)?node-id=32249%3A354). +Create an HTML page with a catalog. Develop semantic page structure as shown on [the mockup](). - use `Header`, `Stars` and `Card` blocks from previous tasks but rewrite them using BEM and SCSS - remove old `data-qa` attributes @@ -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` @@ -20,6 +20,7 @@ Create an HTML page with a catalog. Develop semantic page structure as shown on - cards container(catalog) have fixed paddings (`50px` vertically and `40px` horizontally) Make all the changes smooth on hover (during 300ms): + - increase the card by 20 percent (neighboring cards **should not be** affected) - change the card title text color to `#34568b` when the card is hovered (`.card:hover .card__title`) - change navigation link text color to `#00acdc` @@ -27,14 +28,15 @@ Make all the changes smooth on hover (during 300ms): > Here are the [Layout Tasks Instructions](https://mate-academy.github.io/layout_task-guideline) -*Important note*: In this task, you are allowed to link `*.scss` files directly in HTML `` tags using `href` attribute. +_Important note_: In this task, you are allowed to link `*.scss` files directly in HTML `` tags using `href` attribute. This is possible because [we use the Parcel library](https://en.parceljs.org/scss.html) to bundle your solution's source code. ## 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://Valbel93.github.io/layout_catalog/) +- [TEST REPORT LINK](https://Valbel93.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..a45ea5a506 100644 --- a/src/index.html +++ b/src/index.html @@ -19,9 +19,403 @@ rel="stylesheet" href="styles/index.scss" /> + + + + -

Catalog

+ +
+ + Moyo-Logo + + + +
+ + +
+
+ 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/index.scss b/src/styles/index.scss index 293d3b1f13..0a9cee3194 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,226 @@ +html { + font-family: Roboto, sans-serif; +} + +:root { + --font-family: Roboto, sans-serif; + --color: #00acdc; + --main-accent: #060b35; + --secondary: #616070; + --white: #fff; + --blue-accent: #00acdc; + --gray-elements: #f3f3f3; + --yellow-stars: #ffde6a; +} + body { margin: 0; } + +// <-- #logo moyo end --> +.header { + // width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + width: 1024px; + height: 60px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); +} + +.nav__link { + font-size: 12px; + text-decoration: none; + color: #060b35; + padding-top: 22.5px; + padding-bottom: 22.5px; +} + +.nav__list { + list-style-type: none; + display: flex; + flex-wrap: nowrap; +} + +.nav__item { + justify-content: center; + align-items: center; + font-weight: 500; + font-size: 12px; + text-transform: uppercase; + margin-right: 20px; +} + +.nav { + padding-top: 6px; + padding-right: 30px; +} + +.img { + height: 40px; + width: 40px; + margin-top: 10px; + margin-left: 50px; + margin-bottom: 10px; +} + +.is-active { + position: relative; + border-radius: 8px; + width: 37px; + height: 4px; + margin-top: 57px; + color: #00acdc; +} + +.is-active::after { + position: absolute; + content: ''; + left: 0; + width: 100%; + bottom: 0; + margin-top: 56px; + height: 4px; + background-color: #00acdc; + border-radius: 8px; +} + +.nav__link:hover { + color: #00acdc; +} + +main { + gap: 135px; + display: grid; + grid-template-columns: repeat(4, 113px); + row-gap: 46px; + width: 944px; + margin: 40px; + margin-top: 50px; +} + +.card { + border: 1px solid var(--gray-elements); + border-radius: 5px; + width: 198px; + height: 406px; + background-color: var(--white); + justify-content: center; +} + +.card__img { + width: 160px; + height: 134px; + margin: 32px 19px 36px; +} + +.card__name { + font-weight: 500; + font-size: 12px; + line-height: 150%; + color: #060b35; + margin: 0 16px 4px; +} + +.card__code { + font-weight: 400; + font-size: 10px; + line-height: 140%; + color: #616070; + margin-top: 4px; +} + +.stars { + gap: 4px; + margin-top: 16px; + display: flex; + margin-left: 16px; + margin-bottom: 24px; + + &__star { + background-image: url(/src/images/star.svg); + background-position: 50%; + background-repeat: no-repeat; + width: 16px; + height: 16px; + } + + &__reviews { + font-family: var(--font-family); + margin-top: 1.7px; + margin-left: 18px; + margin-right: 16px; + font-weight: 400; + font-size: 10px; + line-height: 140%; + color: var(--main-accent); + text-align: right; + } +} + +.stars__star:nth-child(-n + 4) { + background-image: url(/src/images/star-active.svg); + background-repeat: no-repeat; +} + +.card__price { + font-family: var(--font-family); + display: flex; + font-weight: 400; + font-size: 12px; + line-height: 150%; + color: var(--secondary); + margin-left: 16px; + margin-bottom: 16px; +} + +.card__price-value { + font-family: var(--font-family); + display: block; + font-weight: 700; + font-size: 16px; + line-height: 112%; + text-align: right; + margin-left: 85px; + color: var(--main-accent); +} + +button { + display: block; + font-family: var(--font-family); + width: 166px; + height: 40px; + margin: 0 16px 16px; + border-radius: 5px; + border: 1px solid #00acdc; + color: #fff; + background-color: #00acdc; + font-size: 14px; + line-height: 16px; + font-weight: 700; + + &__button-buy { + font-family: var(--font-family); + font-size: 14px; + line-height: 16px; + font-weight: 700; + text-transform: uppercase; + text-align: center; + border: 1px solid #00acdc; + color: var(--white); + background-color: #00acdc; + } +} + +.card__button-buy:hover { + font-family: var(--font-family); + font-size: 14px; + line-height: 16px; + font-weight: 700; + text-transform: uppercase; + text-align: center; + border-radius: 5px; + border: 1px solid var(--blue-accent); + color: var(--blue-accent); + background-color: var(--white); +} From 9d7a07b69abd5b689a76fc0325eeae2aa86328d2 Mon Sep 17 00:00:00 2001 From: Valentyn Date: Sat, 7 Dec 2024 18:18:39 +0200 Subject: [PATCH 02/16] add solution --- src/styles/header.scss | 70 ++++++++++++++ src/styles/index.scss | 211 +---------------------------------------- src/styles/main.scss | 135 ++++++++++++++++++++++++++ 3 files changed, 208 insertions(+), 208 deletions(-) create mode 100644 src/styles/header.scss create mode 100644 src/styles/main.scss diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 0000000000..a608abfaef --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,70 @@ +.header { + // width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + width: 1024px; + height: 60px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); +} + +.nav__link { + font-size: 12px; + text-decoration: none; + color: #060b35; + padding-top: 22.5px; + padding-bottom: 22.5px; +} + +.nav__list { + list-style-type: none; + display: flex; + flex-wrap: nowrap; +} + +.nav__item { + justify-content: center; + align-items: center; + font-weight: 500; + font-size: 12px; + text-transform: uppercase; + margin-right: 20px; +} + +.nav { + padding-top: 6px; + padding-right: 30px; +} + +.img { + height: 40px; + width: 40px; + margin-top: 10px; + margin-left: 50px; + margin-bottom: 10px; +} + +.is-active { + position: relative; + border-radius: 8px; + width: 37px; + height: 4px; + margin-top: 57px; + color: #00acdc; +} + +.is-active::after { + position: absolute; + content: ''; + left: 0; + width: 100%; + bottom: 0; + margin-top: 56px; + height: 4px; + background-color: #00acdc; + border-radius: 8px; +} + +.nav__link:hover { + color: #00acdc; +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 0a9cee3194..b3e8b0c2cc 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,6 @@ +@import 'header'; +@import 'main'; + html { font-family: Roboto, sans-serif; } @@ -16,211 +19,3 @@ html { body { margin: 0; } - -// <-- #logo moyo end --> -.header { - // width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - width: 1024px; - height: 60px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); -} - -.nav__link { - font-size: 12px; - text-decoration: none; - color: #060b35; - padding-top: 22.5px; - padding-bottom: 22.5px; -} - -.nav__list { - list-style-type: none; - display: flex; - flex-wrap: nowrap; -} - -.nav__item { - justify-content: center; - align-items: center; - font-weight: 500; - font-size: 12px; - text-transform: uppercase; - margin-right: 20px; -} - -.nav { - padding-top: 6px; - padding-right: 30px; -} - -.img { - height: 40px; - width: 40px; - margin-top: 10px; - margin-left: 50px; - margin-bottom: 10px; -} - -.is-active { - position: relative; - border-radius: 8px; - width: 37px; - height: 4px; - margin-top: 57px; - color: #00acdc; -} - -.is-active::after { - position: absolute; - content: ''; - left: 0; - width: 100%; - bottom: 0; - margin-top: 56px; - height: 4px; - background-color: #00acdc; - border-radius: 8px; -} - -.nav__link:hover { - color: #00acdc; -} - -main { - gap: 135px; - display: grid; - grid-template-columns: repeat(4, 113px); - row-gap: 46px; - width: 944px; - margin: 40px; - margin-top: 50px; -} - -.card { - border: 1px solid var(--gray-elements); - border-radius: 5px; - width: 198px; - height: 406px; - background-color: var(--white); - justify-content: center; -} - -.card__img { - width: 160px; - height: 134px; - margin: 32px 19px 36px; -} - -.card__name { - font-weight: 500; - font-size: 12px; - line-height: 150%; - color: #060b35; - margin: 0 16px 4px; -} - -.card__code { - font-weight: 400; - font-size: 10px; - line-height: 140%; - color: #616070; - margin-top: 4px; -} - -.stars { - gap: 4px; - margin-top: 16px; - display: flex; - margin-left: 16px; - margin-bottom: 24px; - - &__star { - background-image: url(/src/images/star.svg); - background-position: 50%; - background-repeat: no-repeat; - width: 16px; - height: 16px; - } - - &__reviews { - font-family: var(--font-family); - margin-top: 1.7px; - margin-left: 18px; - margin-right: 16px; - font-weight: 400; - font-size: 10px; - line-height: 140%; - color: var(--main-accent); - text-align: right; - } -} - -.stars__star:nth-child(-n + 4) { - background-image: url(/src/images/star-active.svg); - background-repeat: no-repeat; -} - -.card__price { - font-family: var(--font-family); - display: flex; - font-weight: 400; - font-size: 12px; - line-height: 150%; - color: var(--secondary); - margin-left: 16px; - margin-bottom: 16px; -} - -.card__price-value { - font-family: var(--font-family); - display: block; - font-weight: 700; - font-size: 16px; - line-height: 112%; - text-align: right; - margin-left: 85px; - color: var(--main-accent); -} - -button { - display: block; - font-family: var(--font-family); - width: 166px; - height: 40px; - margin: 0 16px 16px; - border-radius: 5px; - border: 1px solid #00acdc; - color: #fff; - background-color: #00acdc; - font-size: 14px; - line-height: 16px; - font-weight: 700; - - &__button-buy { - font-family: var(--font-family); - font-size: 14px; - line-height: 16px; - font-weight: 700; - text-transform: uppercase; - text-align: center; - border: 1px solid #00acdc; - color: var(--white); - background-color: #00acdc; - } -} - -.card__button-buy:hover { - font-family: var(--font-family); - font-size: 14px; - line-height: 16px; - font-weight: 700; - text-transform: uppercase; - text-align: center; - border-radius: 5px; - border: 1px solid var(--blue-accent); - color: var(--blue-accent); - background-color: var(--white); -} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000000..5df958af73 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,135 @@ +main { + gap: 135px; + display: grid; + grid-template-columns: repeat(4, 113px); + row-gap: 46px; + width: 944px; + margin: 40px; + margin-top: 50px; +} + +.card { + border: 1px solid var(--gray-elements); + border-radius: 5px; + width: 198px; + height: 406px; + background-color: var(--white); + justify-content: center; +} + +.card__img { + width: 160px; + height: 134px; + margin: 32px 19px 36px; +} + +.card__name { + font-weight: 500; + font-size: 12px; + line-height: 150%; + color: #060b35; + margin: 0 16px 4px; +} + +.card__code { + font-weight: 400; + font-size: 10px; + line-height: 140%; + color: #616070; + margin-top: 4px; +} + +.stars { + gap: 4px; + margin-top: 16px; + display: flex; + margin-left: 16px; + margin-bottom: 24px; + + &__star { + background-image: url(/src/images/star.svg); + background-position: 50%; + background-repeat: no-repeat; + width: 16px; + height: 16px; + } + + &__reviews { + font-family: var(--font-family); + margin-top: 1.7px; + margin-left: 18px; + margin-right: 16px; + font-weight: 400; + font-size: 10px; + line-height: 140%; + color: var(--main-accent); + text-align: right; + } +} + +.stars__star:nth-child(-n + 4) { + background-image: url(/src/images/star-active.svg); + background-repeat: no-repeat; +} + +.card__price { + font-family: var(--font-family); + display: flex; + font-weight: 400; + font-size: 12px; + line-height: 150%; + color: var(--secondary); + margin-left: 16px; + margin-bottom: 16px; +} + +.card__price-value { + font-family: var(--font-family); + display: block; + font-weight: 700; + font-size: 16px; + line-height: 112%; + text-align: right; + margin-left: 85px; + color: var(--main-accent); +} + +button { + display: block; + font-family: var(--font-family); + width: 166px; + height: 40px; + margin: 0 16px 16px; + border-radius: 5px; + border: 1px solid #00acdc; + color: #fff; + background-color: #00acdc; + font-size: 14px; + line-height: 16px; + font-weight: 700; + + &__button-buy { + font-family: var(--font-family); + font-size: 14px; + line-height: 16px; + font-weight: 700; + text-transform: uppercase; + text-align: center; + border: 1px solid #00acdc; + color: var(--white); + background-color: #00acdc; + } +} + +.card__button-buy:hover { + font-family: var(--font-family); + font-size: 14px; + line-height: 16px; + font-weight: 700; + text-transform: uppercase; + text-align: center; + border-radius: 5px; + border: 1px solid var(--blue-accent); + color: var(--blue-accent); + background-color: var(--white); +} From bb2c53899d7df404a41e2aaacfc3438fce195e8e Mon Sep 17 00:00:00 2001 From: Valentyn Date: Sat, 7 Dec 2024 18:38:17 +0200 Subject: [PATCH 03/16] add blocks Stars/Haeder/Main --- src/styles/header.scss | 22 ++++++++++++++++++++-- src/styles/index.scss | 20 +------------------- src/styles/main.scss | 33 --------------------------------- src/styles/stars.scss | 32 ++++++++++++++++++++++++++++++++ 4 files changed, 53 insertions(+), 54 deletions(-) create mode 100644 src/styles/stars.scss diff --git a/src/styles/header.scss b/src/styles/header.scss index a608abfaef..c289135b99 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -1,5 +1,23 @@ -.header { - // width: 100%; +html { + font-family: Roboto, sans-serif; +} + +:root { + --font-family: Roboto, sans-serif; + --color: #00acdc; + --main-accent: #060b35; + --secondary: #616070; + --white: #fff; + --blue-accent: #00acdc; + --gray-elements: #f3f3f3; + --yellow-stars: #ffde6a; +} + +body { + margin: 0; +} + +header { display: flex; justify-content: space-between; align-items: center; diff --git a/src/styles/index.scss b/src/styles/index.scss index b3e8b0c2cc..b284f68507 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,21 +1,3 @@ @import 'header'; @import 'main'; - -html { - font-family: Roboto, sans-serif; -} - -:root { - --font-family: Roboto, sans-serif; - --color: #00acdc; - --main-accent: #060b35; - --secondary: #616070; - --white: #fff; - --blue-accent: #00acdc; - --gray-elements: #f3f3f3; - --yellow-stars: #ffde6a; -} - -body { - margin: 0; -} +@import 'stars'; diff --git a/src/styles/main.scss b/src/styles/main.scss index 5df958af73..0d82d7ae64 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -39,39 +39,6 @@ main { margin-top: 4px; } -.stars { - gap: 4px; - margin-top: 16px; - display: flex; - margin-left: 16px; - margin-bottom: 24px; - - &__star { - background-image: url(/src/images/star.svg); - background-position: 50%; - background-repeat: no-repeat; - width: 16px; - height: 16px; - } - - &__reviews { - font-family: var(--font-family); - margin-top: 1.7px; - margin-left: 18px; - margin-right: 16px; - font-weight: 400; - font-size: 10px; - line-height: 140%; - color: var(--main-accent); - text-align: right; - } -} - -.stars__star:nth-child(-n + 4) { - background-image: url(/src/images/star-active.svg); - background-repeat: no-repeat; -} - .card__price { font-family: var(--font-family); display: flex; diff --git a/src/styles/stars.scss b/src/styles/stars.scss new file mode 100644 index 0000000000..f4b88f6156 --- /dev/null +++ b/src/styles/stars.scss @@ -0,0 +1,32 @@ +.stars { + gap: 4px; + margin-top: 16px; + display: flex; + margin-left: 16px; + margin-bottom: 24px; + + &__star { + background-image: url(/src/images/star.svg); + background-position: 50%; + background-repeat: no-repeat; + width: 16px; + height: 16px; + } + + &__reviews { + font-family: var(--font-family); + margin-top: 1.7px; + margin-left: 18px; + margin-right: 16px; + font-weight: 400; + font-size: 10px; + line-height: 140%; + color: var(--main-accent); + text-align: right; + } +} + +.stars__star:nth-child(-n + 4) { + background-image: url(/src/images/star-active.svg); + background-repeat: no-repeat; +} From 0f9a95d14815710be4b8258004a7971e84d5e383 Mon Sep 17 00:00:00 2001 From: Valentyn Date: Sat, 7 Dec 2024 19:05:58 +0200 Subject: [PATCH 04/16] solution for 1024 --- src/index.html | 2 +- src/styles/header.scss | 8 ++++++-- src/styles/main.scss | 1 + 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index a45ea5a506..eaba2e9efb 100644 --- a/src/index.html +++ b/src/index.html @@ -80,7 +80,7 @@
  • LAPTOPS & COMPUTERS diff --git a/src/styles/header.scss b/src/styles/header.scss index c289135b99..fc6cdc34fb 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -50,7 +50,6 @@ header { } .nav { - padding-top: 6px; padding-right: 30px; } @@ -75,14 +74,19 @@ header { position: absolute; content: ''; left: 0; - width: 100%; + bottom: 0; margin-top: 56px; + width: 37px; height: 4px; background-color: #00acdc; border-radius: 8px; } +.nav-hover { + color: #00acdc; +} + .nav__link:hover { color: #00acdc; } diff --git a/src/styles/main.scss b/src/styles/main.scss index 0d82d7ae64..b1a204f048 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -6,6 +6,7 @@ main { width: 944px; margin: 40px; margin-top: 50px; + transition-duration: 0.3s; } .card { From a39501898b00eed7bb2783dbcd1f3d3e98c2a839 Mon Sep 17 00:00:00 2001 From: Valentyn Date: Sat, 7 Dec 2024 21:02:53 +0200 Subject: [PATCH 05/16] add 1200px/transform --- src/index.html | 16 ++++++++-------- src/styles/header.scss | 4 ++-- src/styles/index.scss | 15 +++++++++++++++ src/styles/main.scss | 10 +++++++++- 4 files changed, 34 insertions(+), 11 deletions(-) diff --git a/src/index.html b/src/index.html index eaba2e9efb..fb409a5962 100644 --- a/src/index.html +++ b/src/index.html @@ -138,7 +138,7 @@ alt="imac" /> -

    +

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

    Product code: 195434

    @@ -174,7 +174,7 @@

    alt="imac" /> -

    +

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

    Product code: 195434

    @@ -210,7 +210,7 @@

    alt="imac" /> -

    +

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

    Product code: 195434

    @@ -246,7 +246,7 @@

    alt="imac" /> -

    +

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

    Product code: 195434

    @@ -282,7 +282,7 @@

    alt="imac" /> -

    +

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

    Product code: 195434

    @@ -318,7 +318,7 @@

    alt="imac" /> -

    +

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

    Product code: 195434

    @@ -354,7 +354,7 @@

    alt="imac" /> -

    +

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

    Product code: 195434

    @@ -390,7 +390,7 @@

    alt="imac" /> -

    +

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

    Product code: 195434

    diff --git a/src/styles/header.scss b/src/styles/header.scss index fc6cdc34fb..cda124b892 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -31,7 +31,7 @@ header { text-decoration: none; color: #060b35; padding-top: 22.5px; - padding-bottom: 22.5px; + padding-bottom: 23px; } .nav__list { @@ -75,7 +75,7 @@ header { content: ''; left: 0; - bottom: 0; + bottom: -1px; margin-top: 56px; width: 37px; height: 4px; diff --git a/src/styles/index.scss b/src/styles/index.scss index b284f68507..6c760c589b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,18 @@ @import 'header'; @import 'main'; @import 'stars'; + +@media (min-width: 1200px) { + main { + margin-left: 128px; + } + + header { + display: flex; + justify-content: space-between; + align-items: center; + width: 1200px; + height: 60px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index b1a204f048..898172097d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -16,6 +16,10 @@ main { height: 406px; background-color: var(--white); justify-content: center; + + &:hover { + transform: scale(1.5); + } } .card__img { @@ -24,7 +28,7 @@ main { margin: 32px 19px 36px; } -.card__name { +.card__title { font-weight: 500; font-size: 12px; line-height: 150%; @@ -32,6 +36,10 @@ main { margin: 0 16px 4px; } +.card:hover .card__title { + color: #34568b; +} + .card__code { font-weight: 400; font-size: 10px; From f1554dc3d09b8f47fa2f6119a0ac1857e499f320 Mon Sep 17 00:00:00 2001 From: Valentyn Date: Sat, 7 Dec 2024 23:30:15 +0200 Subject: [PATCH 06/16] add solution all --- src/index.html | 2 +- src/styles/header.scss | 42 +++++++++++++++++------------------------- src/styles/index.scss | 15 --------------- src/styles/main.scss | 11 +++++------ src/styles/stars.scss | 1 - 5 files changed, 23 insertions(+), 48 deletions(-) diff --git a/src/index.html b/src/index.html index fb409a5962..11058bc509 100644 --- a/src/index.html +++ b/src/index.html @@ -80,7 +80,7 @@
  • LAPTOPS & COMPUTERS diff --git a/src/styles/header.scss b/src/styles/header.scss index cda124b892..86b210be7b 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -18,26 +18,27 @@ body { } header { - display: flex; justify-content: space-between; align-items: center; - width: 1024px; - height: 60px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); + display: flex; + box-shadow: 0 2px 4px #0000000d; + padding: 0 50px; } .nav__link { + color: #060b35; font-size: 12px; text-decoration: none; - color: #060b35; - padding-top: 22.5px; - padding-bottom: 23px; + display: block; + line-height: 60px; } .nav__list { + flex-wrap: nowrap; list-style-type: none; display: flex; - flex-wrap: nowrap; + margin: 0; + padding: 0; } .nav__item { @@ -49,38 +50,29 @@ header { margin-right: 20px; } -.nav { - padding-right: 30px; +.nav__item:last-child { + margin-right: 0; } .img { height: 40px; width: 40px; - margin-top: 10px; - margin-left: 50px; - margin-bottom: 10px; } .is-active { - position: relative; - border-radius: 8px; - width: 37px; - height: 4px; - margin-top: 57px; color: #00acdc; + position: relative; } .is-active::after { - position: absolute; content: ''; - left: 0; - - bottom: -1px; - margin-top: 56px; - width: 37px; - height: 4px; background-color: #00acdc; border-radius: 8px; + width: 100%; + height: 4px; + position: absolute; + bottom: 0; + left: 0; } .nav-hover { diff --git a/src/styles/index.scss b/src/styles/index.scss index 6c760c589b..b284f68507 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,18 +1,3 @@ @import 'header'; @import 'main'; @import 'stars'; - -@media (min-width: 1200px) { - main { - margin-left: 128px; - } - - header { - display: flex; - justify-content: space-between; - align-items: center; - width: 1200px; - height: 60px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); - } -} diff --git a/src/styles/main.scss b/src/styles/main.scss index 898172097d..3d7d81f455 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,12 +1,11 @@ main { - gap: 135px; - display: grid; - grid-template-columns: repeat(4, 113px); - row-gap: 46px; + grid-template-columns: repeat(4, 200px); + gap: 46px 48px; width: 944px; - margin: 40px; - margin-top: 50px; + padding: 50px 40px; transition-duration: 0.3s; + display: grid; + margin: 0 auto; } .card { diff --git a/src/styles/stars.scss b/src/styles/stars.scss index f4b88f6156..b37dd4ce71 100644 --- a/src/styles/stars.scss +++ b/src/styles/stars.scss @@ -15,7 +15,6 @@ &__reviews { font-family: var(--font-family); - margin-top: 1.7px; margin-left: 18px; margin-right: 16px; font-weight: 400; From 8db8114190ea1304d6ea9974b7459723b32790fd Mon Sep 17 00:00:00 2001 From: Valentyn Date: Sun, 8 Dec 2024 16:32:39 +0200 Subject: [PATCH 07/16] add

    class --- src/index.html | 16 ++++++++-------- src/styles/main.scss | 1 + 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index 11058bc509..0ecc4543a0 100644 --- a/src/index.html +++ b/src/index.html @@ -140,8 +140,8 @@

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

    Product code: 195434

    +

    Product code: 195434

    @@ -176,8 +176,8 @@

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

    Product code: 195434

    +

    Product code: 195434

    @@ -212,8 +212,8 @@

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

    Product code: 195434

    +

    Product code: 195434

    @@ -248,8 +248,8 @@

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

    Product code: 195434

    +

    Product code: 195434

    @@ -284,8 +284,8 @@

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

    Product code: 195434

    +

    Product code: 195434

    @@ -320,8 +320,8 @@

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

    Product code: 195434

    +

    Product code: 195434

    @@ -356,8 +356,8 @@

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

    Product code: 195434

    +

    Product code: 195434

    @@ -392,8 +392,8 @@

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

    Product code: 195434

    +

    Product code: 195434

    diff --git a/src/styles/main.scss b/src/styles/main.scss index 3d7d81f455..7c6fe53bf4 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -45,6 +45,7 @@ main { line-height: 140%; color: #616070; margin-top: 4px; + margin-left: 16px; } .card__price { From 9801ab238f3565383735a807235e0b0d1917e978 Mon Sep 17 00:00:00 2001 From: Valentyn Date: Mon, 9 Dec 2024 16:28:46 +0200 Subject: [PATCH 08/16] add transform/transition --- src/styles/main.scss | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 7c6fe53bf4..914f526d94 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -3,7 +3,7 @@ main { gap: 46px 48px; width: 944px; padding: 50px 40px; - transition-duration: 0.3s; + display: grid; margin: 0 auto; } @@ -17,7 +17,8 @@ main { justify-content: center; &:hover { - transform: scale(1.5); + transition-duration: 0.3s; + transform: scale(1.2); } } @@ -36,11 +37,12 @@ main { } .card:hover .card__title { - color: #34568b; + color: var(--blue-accent); } .card__code { - font-weight: 400; + font-family: var(--font-family); + font-weight: 400px; font-size: 10px; line-height: 140%; color: #616070; @@ -77,9 +79,9 @@ button { height: 40px; margin: 0 16px 16px; border-radius: 5px; - border: 1px solid #00acdc; + border: 1px solid var(--blue-accent); color: #fff; - background-color: #00acdc; + background-color: var(--blue-accent); font-size: 14px; line-height: 16px; font-weight: 700; @@ -91,9 +93,9 @@ button { font-weight: 700; text-transform: uppercase; text-align: center; - border: 1px solid #00acdc; + border: 1px solid var(--blue-accent); color: var(--white); - background-color: #00acdc; + background-color: var(--blue-accent); } } From 35e3b6dfae3a60984ff757943ee753033560f53e Mon Sep 17 00:00:00 2001 From: Valentyn Date: Mon, 9 Dec 2024 16:34:37 +0200 Subject: [PATCH 09/16] add blank --- src/index.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/index.html b/src/index.html index 0ecc4543a0..15f3035942 100644 --- a/src/index.html +++ b/src/index.html @@ -164,6 +164,7 @@

    BUY

    +
    BUY
    +
    BUY
    +
    BUY
    +
    BUY
    +
    BUY
    +
    BUY
    +
    Date: Mon, 9 Dec 2024 16:56:30 +0200 Subject: [PATCH 10/16] add duration 300ms --- src/styles/main.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 914f526d94..ad72410e6c 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -17,7 +17,7 @@ main { justify-content: center; &:hover { - transition-duration: 0.3s; + transition-duration: 300ms; transform: scale(1.2); } } @@ -37,7 +37,7 @@ main { } .card:hover .card__title { - color: var(--blue-accent); + color: #34568b; } .card__code { From 85d7a585ccbb8b4e03cd704a15adadbde33488fc Mon Sep 17 00:00:00 2001 From: Valentyn Date: Mon, 9 Dec 2024 18:47:02 +0200 Subject: [PATCH 11/16] add size for reviews +

    --- src/index.html | 129 +++++++++++++++++++++++------------------- src/styles/main.scss | 21 ++++++- src/styles/stars.scss | 13 ++--- 3 files changed, 98 insertions(+), 65 deletions(-) diff --git a/src/index.html b/src/index.html index 15f3035942..4287194bb8 100644 --- a/src/index.html +++ b/src/index.html @@ -143,15 +143,16 @@

    Product code: 195434

    -
    -
    -
    -
    -
    -
    -
    Reviews: 5
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Reviews: 5

    -
    Price:
    $2,199
    @@ -180,13 +181,15 @@

    Product code: 195434

    -
    -
    -
    -
    -
    -
    -
    Reviews: 5
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Reviews: 5

    @@ -217,13 +220,15 @@

    Product code: 195434

    -
    -
    -
    -
    -
    -
    -
    Reviews: 5
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Reviews: 5

    @@ -254,13 +259,15 @@

    Product code: 195434

    -
    -
    -
    -
    -
    -
    -
    Reviews: 5
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Reviews: 5

    @@ -291,13 +298,15 @@

    Product code: 195434

    -
    -
    -
    -
    -
    -
    -
    Reviews: 5
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Reviews: 5

    @@ -328,13 +337,15 @@

    Product code: 195434

    -
    -
    -
    -
    -
    -
    -
    Reviews: 5
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Reviews: 5

    @@ -365,13 +376,15 @@

    Product code: 195434

    -
    -
    -
    -
    -
    -
    -
    Reviews: 5
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Reviews: 5

    @@ -402,13 +415,15 @@

    Product code: 195434

    -
    -
    -
    -
    -
    -
    -
    Reviews: 5
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Reviews: 5

    diff --git a/src/styles/main.scss b/src/styles/main.scss index ad72410e6c..e8f8895c0d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -37,7 +37,7 @@ main { } .card:hover .card__title { - color: #34568b; + color: var(--font-family); } .card__code { @@ -50,6 +50,25 @@ main { margin-left: 16px; } +.card__reviews { + display: flex; + justify-content: space-between; + margin-top: 16px; +} + +.card__reviews-text { + font-family: var(--font-family); + color: var(--main-accent); + text-align: right; + margin-top: 0; + margin-right: 16px; + font-size: 10px; + + font-weight: 400; + line-height: 140%; + margin-bottom: 26px; +} + .card__price { font-family: var(--font-family); display: flex; diff --git a/src/styles/stars.scss b/src/styles/stars.scss index b37dd4ce71..53876daedd 100644 --- a/src/styles/stars.scss +++ b/src/styles/stars.scss @@ -1,9 +1,7 @@ .stars { gap: 4px; - margin-top: 16px; display: flex; margin-left: 16px; - margin-bottom: 24px; &__star { background-image: url(/src/images/star.svg); @@ -13,15 +11,16 @@ height: 16px; } - &__reviews { + &__reviews-text { font-family: var(--font-family); - margin-left: 18px; + color: var(--main-accent); + text-align: right; + margin-top: 0; margin-right: 16px; - font-weight: 400; font-size: 10px; + margin-bottom: 0; + font-weight: 400; line-height: 140%; - color: var(--main-accent); - text-align: right; } } From b2384d2ea672ce781b68a82f733a48e44af7bf97 Mon Sep 17 00:00:00 2001 From: Valentyn Date: Mon, 9 Dec 2024 19:08:35 +0200 Subject: [PATCH 12/16] SOLUTION --- src/styles/main.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index e8f8895c0d..c16a0a8ece 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -15,9 +15,9 @@ main { height: 406px; background-color: var(--white); justify-content: center; + transition-duration: 300ms; &:hover { - transition-duration: 300ms; transform: scale(1.2); } } @@ -37,7 +37,7 @@ main { } .card:hover .card__title { - color: var(--font-family); + color: var(--blue-accent); } .card__code { From 03cfe83eaa8e0c3fb248b5460f81e5c27818c74b Mon Sep 17 00:00:00 2001 From: Valentyn Date: Mon, 9 Dec 2024 22:54:42 +0200 Subject: [PATCH 13/16] rework on recommendation etojeDenys --- src/styles/header.scss | 65 +++++++++--------- src/styles/main.scss | 146 ++++++++++++++++++++--------------------- 2 files changed, 106 insertions(+), 105 deletions(-) diff --git a/src/styles/header.scss b/src/styles/header.scss index 86b210be7b..f330b40b39 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -25,33 +25,42 @@ header { padding: 0 50px; } -.nav__link { - color: #060b35; - font-size: 12px; - text-decoration: none; - display: block; - line-height: 60px; -} +.nav { + &__link { + color: #060b35; + font-size: 12px; + text-decoration: none; + display: block; + line-height: 60px; + } -.nav__list { - flex-wrap: nowrap; - list-style-type: none; - display: flex; - margin: 0; - padding: 0; -} + &__list { + flex-wrap: nowrap; + list-style-type: none; + display: flex; + margin: 0; + padding: 0; + } -.nav__item { - justify-content: center; - align-items: center; - font-weight: 500; - font-size: 12px; - text-transform: uppercase; - margin-right: 20px; -} + &__item { + justify-content: center; + align-items: center; + font-weight: 500; + font-size: 12px; + text-transform: uppercase; + margin-right: 20px; + } + &__item:last-child { + margin-right: 0; + } + + &-hover { + color: #00acdc; + } -.nav__item:last-child { - margin-right: 0; + &__link:hover { + color: #00acdc; + } } .img { @@ -74,11 +83,3 @@ header { bottom: 0; left: 0; } - -.nav-hover { - color: #00acdc; -} - -.nav__link:hover { - color: #00acdc; -} diff --git a/src/styles/main.scss b/src/styles/main.scss index c16a0a8ece..b797aa7390 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -20,75 +20,88 @@ main { &:hover { transform: scale(1.2); } -} -.card__img { - width: 160px; - height: 134px; - margin: 32px 19px 36px; -} + &__img { + width: 160px; + height: 134px; + margin: 32px 19px 36px; + } -.card__title { - font-weight: 500; - font-size: 12px; - line-height: 150%; - color: #060b35; - margin: 0 16px 4px; -} + &__title { + font-weight: 500; + font-size: 12px; + line-height: 150%; + color: #060b35; + margin: 0 16px 4px; + } -.card:hover .card__title { - color: var(--blue-accent); -} + &:hover .card__title { + color: var(--blue-accent); + } -.card__code { - font-family: var(--font-family); - font-weight: 400px; - font-size: 10px; - line-height: 140%; - color: #616070; - margin-top: 4px; - margin-left: 16px; -} + &__code { + font-family: var(--font-family); + font-weight: 400px; + font-size: 10px; + line-height: 140%; + color: #616070; + margin-top: 4px; + margin-left: 16px; + } -.card__reviews { - display: flex; - justify-content: space-between; - margin-top: 16px; -} + &__reviews { + display: flex; + justify-content: space-between; + margin-top: 16px; + } -.card__reviews-text { - font-family: var(--font-family); - color: var(--main-accent); - text-align: right; - margin-top: 0; - margin-right: 16px; - font-size: 10px; + &__reviews-text { + font-family: var(--font-family); + color: var(--main-accent); + text-align: right; + margin-top: 0; + margin-right: 16px; + font-size: 10px; - font-weight: 400; - line-height: 140%; - margin-bottom: 26px; -} + font-weight: 400; + line-height: 140%; + margin-bottom: 26px; + } -.card__price { - font-family: var(--font-family); - display: flex; - font-weight: 400; - font-size: 12px; - line-height: 150%; - color: var(--secondary); - margin-left: 16px; - margin-bottom: 16px; -} + &__price { + font-family: var(--font-family); + display: flex; + font-weight: 400; + font-size: 12px; + line-height: 150%; + color: var(--secondary); + margin-left: 16px; + margin-bottom: 16px; + } -.card__price-value { - font-family: var(--font-family); - display: block; - font-weight: 700; - font-size: 16px; - line-height: 112%; - text-align: right; - margin-left: 85px; - color: var(--main-accent); + &__price-value { + font-family: var(--font-family); + display: block; + font-weight: 700; + font-size: 16px; + line-height: 112%; + text-align: right; + margin-left: 85px; + color: var(--main-accent); + } + + &__button-buy:hover { + font-family: var(--font-family); + font-size: 14px; + line-height: 16px; + font-weight: 700; + text-transform: uppercase; + text-align: center; + border-radius: 5px; + border: 1px solid var(--blue-accent); + color: var(--blue-accent); + background-color: var(--white); + } } button { @@ -117,16 +130,3 @@ button { background-color: var(--blue-accent); } } - -.card__button-buy:hover { - font-family: var(--font-family); - font-size: 14px; - line-height: 16px; - font-weight: 700; - text-transform: uppercase; - text-align: center; - border-radius: 5px; - border: 1px solid var(--blue-accent); - color: var(--blue-accent); - background-color: var(--white); -} From e5249a8dc8d26ae46c9bc687066d7c7612fdb4fb Mon Sep 17 00:00:00 2001 From: Valentyn Date: Mon, 9 Dec 2024 23:43:29 +0200 Subject: [PATCH 14/16] reworked & --- src/styles/stars.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/stars.scss b/src/styles/stars.scss index 53876daedd..99d19d1db4 100644 --- a/src/styles/stars.scss +++ b/src/styles/stars.scss @@ -22,9 +22,9 @@ font-weight: 400; line-height: 140%; } -} -.stars__star:nth-child(-n + 4) { - background-image: url(/src/images/star-active.svg); - background-repeat: no-repeat; + &__star:nth-child(-n + 4) { + background-image: url(/src/images/star-active.svg); + background-repeat: no-repeat; + } } From 066893cf0eabb4202b46b3a40e6cab79587ab9d6 Mon Sep 17 00:00:00 2001 From: Valentyn Date: Tue, 10 Dec 2024 17:45:48 +0200 Subject: [PATCH 15/16] requested a review from volodymyr-soltys97 --- src/index.html | 16 ++++++------- src/styles/colors.scss | 7 ++++++ src/styles/header.scss | 23 +++++-------------- src/styles/index.scss | 1 + src/styles/main.scss | 52 +++++++++++++++++++++--------------------- src/styles/stars.scss | 4 ++-- 6 files changed, 50 insertions(+), 53 deletions(-) create mode 100644 src/styles/colors.scss diff --git a/src/index.html b/src/index.html index 4287194bb8..a0342b9fdf 100644 --- a/src/index.html +++ b/src/index.html @@ -155,7 +155,7 @@

    Price: -
    $2,199
    +

    $2,199