diff --git a/readme.md b/readme.md index 874ca70d97..f0fb2307a1 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://OlehYavoriv.github.io/layout_catalog/) +- [TEST REPORT LINK](https://OlehYavoriv.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..c8e443ce98 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,321 @@ -

Catalog

+
+ + +
+
+
+
+ Product +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+ $2,199 +
+
+ +
+
+ Product +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+ $2,199 +
+
+ +
+
+ Product +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+ $2,199 +
+
+ +
+
+ Product +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+ $2,199 +
+
+ +
+
+ Product +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+ $2,199 +
+
+ +
+
+ Product +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+ $2,199 +
+
+ +
+
+ Product +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+

Price:

+ $2,199 +
+
+ +
+
+ Product +
+

+ 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..c50b87e36f 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,222 @@ +@import './utils/variables'; +@import './utils/mixins'; + +html, +body, +main, +div, +header, +ul, +li, +a, +h1, +p, +img { + margin: 0; + padding: 0; + box-sizing: border-box; +} + body { + @include font($size: 10px, $weight: 400, $color: $main-accent-color); + margin: 0; + font-family: Roboto, sans-serif; +} + +button { + background-color: transparent; + color: inherit; + border-width: 0; + padding: 0; + cursor: pointer; +} + +h1, +p { + font-size: inherit; + font-weight: inherit; +} + +ul, +li { + list-style: none; +} + +a { + text-decoration: none; +} + +.header { + @include flex(row, space-between, center); + + max-width: 1200px; + margin: 0 auto; + font-size: 12px; + font-weight: 500; + padding: 0 50px; + box-shadow: 0 2px 4px 0 #0000000d; + + &__logo { + img { + @include set-size(40px, 40px); + + display: block; + } + } + + .nav { + &__list { + display: flex; + } + &__item:not(:last-child) { + margin-right: 20px; + } + + &__link { + @include flex($direction: row, $items: center); + + position: relative; + height: 60px; + color: $main-accent-color; + text-transform: uppercase; + + &:hover { + color: $blue-accent-color; + } + } + .is-active { + color: $blue-accent-color; + } + + .is-active::after { + @include set-size(100%, 4px); + + content: ''; + position: absolute; + bottom: 0; + left: 0; + border-radius: 8px; + background-color: $blue-accent-color; + } + } +} + +.main { + --number-of-columns: 1; + + padding: 50px 40px; + &__container { + max-width: 944px; + display: grid; + grid-template-columns: repeat(var(--number-of-columns), 200px); + justify-content: center; + gap: 46px 48px; + position: relative; + margin: 0 auto; + + @media (min-width: 488px) { + --number-of-columns: 2; + } + + @media (min-width: 768px) { + --number-of-columns: 3; + } + + @media (min-width: 1024px) { + --number-of-columns: 4; + } + } +} + +.card { + @include flex($direction: column, $items: center); + + max-width: 200px; + width: 100%; + border: 1px solid $light-white-color; + border-radius: $default-border-radius; + background-color: $white-color; + padding: 32px 16px 16px; + + &__image { + @include set-size(160px, 134px); + + display: block; + } + + &__title { + @include font(12px, 500, 18px); + + margin-top: 40px; + } + + &__product-code { + @include font($line-height: 14px, $color: $secondary-color); + + margin-top: 4px; + } + + &__product-rating { + @include flex(row, space-between, center); + + margin-top: 16px; + } + + &__reviews { + line-height: 14px; + text-align: right; + } + + &__price-box { + @include flex(row, space-between, center); + + margin-top: 24px; + } + + &__price-label { + @include font($size: 12px, $line-height: 18px, $color: $secondary-color); + } + + &__price-value { + @include font($size: 16px, $weight: 700, $line-height: 18px); + } + + &__button { + @include font(14px, 700, 16px, $white-color); + + border: none; + text-transform: uppercase; + background-color: $blue-accent-color; + border-radius: $default-border-radius; + margin-top: 16px; + padding: 12px 70px; + height: 40px; + + &:hover { + color: $blue-accent-color; + background-color: $white-color; + border: 1px solid $blue-accent-color; + } + } +} + +.stars { + @include flex($direction: row, $items: center); + + &__star { + @include set-size(16px, 16px); + + background-image: url(../images/star.svg); + background-position: center; + background-repeat: no-repeat; + margin-right: 4px; + + &:last-child { + margin-right: 0; + } + &:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); + } + } } diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..26b6b68bf2 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,23 @@ +@mixin flex($direction: row, $content: flex-start, $items: stretch) { + display: flex; + flex-direction: $direction; + justify-content: $content; + align-items: $items; +} + +@mixin font( + $size: inherit, + $weight: inherit, + $line-height: inherit, + $color: inherit +) { + font-size: $size; + font-weight: $weight; + line-height: $line-height; + color: $color; +} + +@mixin set-size($width: auto, $height: auto) { + height: $height; + width: $width; +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..4adf507997 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,6 @@ +$main-accent-color: #060b35; +$secondary-color: #616070; +$blue-accent-color: #00acdc; +$white-color: #fff; +$light-white-color: #f3f3f3; +$default-border-radius: 5px;