From a2207f609480eb2d0707e99ba5f50f83f268b5f2 Mon Sep 17 00:00:00 2001 From: Blervin Date: Mon, 4 Nov 2024 16:01:11 +0100 Subject: [PATCH] add solution --- readme.md | 12 +- src/index.html | 385 ++++++++++++++++++++++++++++++++++++- src/styles/_card.scss | 151 +++++++++++++++ src/styles/_fonts.scss | 5 + src/styles/_header.scss | 73 +++++++ src/styles/_reset.scss | 5 + src/styles/_stars.scss | 19 ++ src/styles/_variables.scss | 8 + src/styles/index.scss | 9 +- 9 files changed, 657 insertions(+), 10 deletions(-) create mode 100644 src/styles/_card.scss create mode 100644 src/styles/_fonts.scss create mode 100644 src/styles/_header.scss create mode 100644 src/styles/_reset.scss create mode 100644 src/styles/_stars.scss create mode 100644 src/styles/_variables.scss diff --git a/readme.md b/readme.md index cf0977c416..31ce7e02c8 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ # Frontend practice with catalog page -Create HTML page with 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 HTML page with 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 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` @@ -20,6 +20,7 @@ Create HTML page with catalog. Develop semantic page structure as shown on [the - cards container(catalog) have fixed paddings (`50px` vertically and `40px` horyzontally) 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,13 +28,14 @@ Make all the changes smooth on hover (during 300ms): > Here are the [Layout Tasks Instructions](https://mate-academy.github.io/layout_task-guideline) -*Note*: In this task, you can directly link `*.scss` files in HTML `` tags. This is possible because [we use the Parcel library](https://en.parceljs.org/scss.html) to bundle the source code. +_Note_: In this task, you can directly link `*.scss` files in HTML `` tags. This is possible because [we use the Parcel library](https://en.parceljs.org/scss.html) to bundle the source code. ## 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://Blervin1.github.io/layout_catalog/) +- [TEST REPORT LINK](https://Blervin1.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..64097a5f89 100644 --- a/src/index.html +++ b/src/index.html @@ -20,8 +20,389 @@ href="styles/index.scss" /> - -

Catalog

+
+ + logo + + + +
+ +
+
+ +
+ Product Image +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
+ Product code: 195434 +
+
+
    +
  • +
  • +
  • +
  • +
  • +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+
+ + BUY + +
+
+ +
+ Product Image +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
+ Product code: 195434 +
+
+
    +
  • +
  • +
  • +
  • +
  • +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+
+ + BUY + +
+
+ +
+ Product Image +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
+ Product code: 195434 +
+
+
    +
  • +
  • +
  • +
  • +
  • +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+
+ + BUY + +
+
+ +
+ Product Image +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
+ Product code: 195434 +
+
+
    +
  • +
  • +
  • +
  • +
  • +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+
+ + BUY + +
+
+ +
+ Product Image +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
+ Product code: 195434 +
+
+
    +
  • +
  • +
  • +
  • +
  • +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+
+ + BUY + +
+
+ +
+ Product Image +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
+ Product code: 195434 +
+
+
    +
  • +
  • +
  • +
  • +
  • +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+
+ + BUY + +
+
+ +
+ Product Image +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
+ Product code: 195434 +
+
+
    +
  • +
  • +
  • +
  • +
  • +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+
+ + BUY + +
+
+ +
+ Product Image +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
+ Product code: 195434 +
+
+
    +
  • +
  • +
  • +
  • +
  • +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+
+ + BUY + +
+
+
+
diff --git a/src/styles/_card.scss b/src/styles/_card.scss new file mode 100644 index 0000000000..bd4a2b03c9 --- /dev/null +++ b/src/styles/_card.scss @@ -0,0 +1,151 @@ +.main__catalog { + max-width: 944px; + margin: 0 auto; + display: grid; + gap: 46px 48px; + justify-items: center; + grid-template-columns: 1fr; + margin-bottom: 72px; + + @media (min-width: 488px) { + grid-template-columns: repeat(2, 1fr); + } + + @media (min-width: 768px) { + grid-template-columns: repeat(3, 1fr); + } + + @media (min-width: 1024px) { + grid-template-columns: repeat(4, 1fr); + } +} + +.card { + display: flex; + justify-content: center; + flex-direction: column; + width: 200px; + border: 1px solid #f3f3f3; + padding: 32px 16px 16px; + background-color: $four-color; + border-radius: 5px; + transition: + transform 300ms ease, + background-color 300ms ease; + + &:hover { + transform: scale(1.2); + } + + &__title { + color: $triple-color; + transition: color 300ms ease; + + .card:hover & { + color: #34568b; + } + } + + &__image { + display: block; + width: 160px; + height: 134px; + margin: 0 auto; + background-repeat: no-repeat; + background-size: contain; + } + + &__description { + font-weight: 500; + font-size: $font-size-md; + line-height: 18px; + color: $triple-color; + margin-top: 40px; + + &:hover { + color: #34568b; + } + } + + &__code { + font-weight: 400; + font-size: $font-size-sm; + line-height: 14px; + color: $secondary-color; + margin-top: 4px; + } + + &__rating { + width: 166px; + height: 16px; + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 16px; + } + + &__reviews { + height: 16px; + font-weight: 400; + font-size: $font-size-sm; + line-height: 20px; + color: $triple-color; + } + + &__price-block { + width: 166px; + height: 18px; + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 24px; + } + + &__txt { + font-weight: 400; + font-size: $font-size-md; + line-height: 18px; + color: $secondary-color; + } + + &__price { + font-weight: 700; + font-size: $font-size-lg; + line-height: 18px; + color: $triple-color; + } + + &__button { + color: $four-color; + background-color: $primary-color; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + width: 166px; + height: 40px; + font-size: 14px; + font-weight: 700; + line-height: 16px; + text-decoration: none; + border: 1px solid $primary-color; + margin-top: 16px; + transition: + background-color 300ms ease, + color 300ms ease; + + &:hover { + color: #00acdc; + background-color: #fff; + } + } +} + +a { + color: inherit; + transition: color 300ms ease; + + &:hover { + color: #00acdc; + } +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss new file mode 100644 index 0000000000..8576a9422b --- /dev/null +++ b/src/styles/_fonts.scss @@ -0,0 +1,5 @@ +@import 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'; + +body { + font-family: Roboto, sans-serif; +} diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 0000000000..f85f37d6cd --- /dev/null +++ b/src/styles/_header.scss @@ -0,0 +1,73 @@ +body, +ul, +ol, +li { + font-size: 12px; + margin: 0; + list-style: none; +} + +.moyo { + display: block; + cursor: pointer; +} + +ul, +ol { + padding: 0; +} + +.header { + display: flex; + padding: 0 50px; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #ccc; + margin-bottom: 50px; +} + +.nav__list { + display: flex; + margin: 0; +} + +.nav__link { + margin-right: 20px; +} + +.nav__link:last-child { + margin-right: 0; +} + +.nav__item { + display: flex; + color: #060b35; + height: 60px; + font-weight: 500; + font-size: 12px; + text-decoration: none; + text-align: center; + text-transform: uppercase; + justify-content: center; + align-items: center; +} + +.nav__item:hover { + color: #00acdc; +} + +.is-active { + color: #00acdc; + position: relative; +} + +.is-active::after { + position: absolute; + content: ''; + display: block; + bottom: 0; + width: 100%; + height: 4px; + border-radius: 8px; + background-color: #00acdc; +} diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss new file mode 100644 index 0000000000..96ba8a33d6 --- /dev/null +++ b/src/styles/_reset.scss @@ -0,0 +1,5 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} diff --git a/src/styles/_stars.scss b/src/styles/_stars.scss new file mode 100644 index 0000000000..3766522fc2 --- /dev/null +++ b/src/styles/_stars.scss @@ -0,0 +1,19 @@ +.stars { + padding: 0; + display: flex; + gap: 4px; + list-style: none; + + &__star { + width: 16px; + height: 16px; + background-repeat: no-repeat; + background-position: center; + background-image: url('../images/star.svg'); + background-size: contain; + + &--active { + background-image: url('../images/star-active.svg'); + } + } +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 0000000000..a3197d0fbf --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,8 @@ +// Variables +$primary-color: #00acdc; +$secondary-color: #616070; +$triple-color: #060b35; +$four-color: #fff; +$font-size-sm: 10px; +$font-size-md: 12px; +$font-size-lg: 16px; diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..72db042032 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,6 @@ -body { - margin: 0; -} +@import 'reset'; +@import 'fonts'; +@import 'variables'; +@import 'header'; +@import 'card'; +@import 'stars';