From 53884f09c242097138c573e200b49640970f498b Mon Sep 17 00:00:00 2001 From: Nadiia Bulmak Date: Fri, 27 Dec 2024 20:39:54 +0200 Subject: [PATCH] add task solution --- readme.md | 6 +- src/index.html | 407 +++++++++++++++++++++++++++++++- src/styles/body.scss | 10 + src/styles/container.scss | 27 +++ src/styles/header.scss | 71 ++++++ src/styles/index.scss | 10 +- src/styles/product-card.scss | 104 ++++++++ src/styles/stars.scss | 28 +++ src/styles/utils/mixins.scss | 45 ++++ src/styles/utils/variables.scss | 11 + 10 files changed, 712 insertions(+), 7 deletions(-) create mode 100644 src/styles/body.scss create mode 100644 src/styles/container.scss create mode 100644 src/styles/header.scss create mode 100644 src/styles/product-card.scss create mode 100644 src/styles/stars.scss create mode 100644 src/styles/utils/mixins.scss create mode 100644 src/styles/utils/variables.scss diff --git a/readme.md b/readme.md index 874ca70d97..c7b016857d 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://NadiiaBulmak.github.io/layout_catalog/) +- [TEST REPORT LINK](https://NadiiaBulmak.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..895db58013 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,411 @@ -

Catalog

+
+ + logo__image + + + +
+ +
+
+ IMac Image +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+ + + + + +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + + Buy + +
+
+ IMac Image +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+ + + + + +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + + Buy + +
+
+ IMac Image +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+ + + + + +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + + Buy + +
+
+ IMac Image +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+ + + + + +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + + Buy + +
+
+ IMac Image +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+ + + + + +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + + Buy + +
+
+ IMac Image +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+ + + + + +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + + Buy + +
+
+ IMac Image +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+ + + + + +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + + Buy + +
+
+ IMac Image +
+ APPLE A1419 iMac 27" Retina +
+ 5K Monoblock (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+ + + + + +
+
Reviews: 5
+
+
+
Price:
+
$2,199
+
+ + + Buy + +
+
diff --git a/src/styles/body.scss b/src/styles/body.scss new file mode 100644 index 0000000000..4e0cf77318 --- /dev/null +++ b/src/styles/body.scss @@ -0,0 +1,10 @@ +body { + margin: 0; +} + +html { + font-family: Roboto, sans-serif; + font-weight: 500; + font-style: normal; + font-size: 12px; +} diff --git a/src/styles/container.scss b/src/styles/container.scss new file mode 100644 index 0000000000..3d04552391 --- /dev/null +++ b/src/styles/container.scss @@ -0,0 +1,27 @@ +.catalog { + margin: 0 auto; + padding: 40px 50px; + max-width: 944px; + display: grid; + grid-template-columns: repeat(auto-fill, minmax($card-width, 1fr)); + gap: 46px 48px; + justify-items: center; +} + +@media (min-width: 488px) { + .catalog { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 768px) { + .catalog { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (min-width: 1024px) { + .catalog { + grid-template-columns: repeat(4, 1fr); + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 0000000000..9758dd981e --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,71 @@ +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 50px; + margin: 0 auto; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); + transition: all 300ms; + + &__logo-img { + height: $logo-img-size; + width: $logo-img-size; + display: block; + } + + &__link { + text-decoration: none; + line-height: 0; + } +} + +.nav { + &__list { + list-style: none; + display: flex; + align-items: center; + align-content: center; + margin: 0; + padding-inline-start: 0; + } + + &__item { + position: relative; + + &:not(:last-child) { + margin-right: 20px; + } + } + + &__link { + text-decoration: none; + color: $nav-link-color; + height: 60px; + display: flex; + justify-content: space-around; + align-items: center; + text-transform: uppercase; + padding-bottom: 0; + transition: all 300ms; + + &:hover, + &:active { + color: $main-color; + } + } +} + +.is-active { + color: $main-color; + + &::after { + content: ''; + width: 100%; + height: 4px; + background-color: $main-color; + position: absolute; + bottom: 0; + left: 0; + border-radius: 8px; + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..9a76a1f52e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,7 @@ -body { - margin: 0; -} +@import './utils/variables'; +@import './utils/mixins'; +@import './body'; +@import './header'; +@import './stars'; +@import './product-card'; +@import './container'; diff --git a/src/styles/product-card.scss b/src/styles/product-card.scss new file mode 100644 index 0000000000..8917143cd6 --- /dev/null +++ b/src/styles/product-card.scss @@ -0,0 +1,104 @@ +.card { + width: $card-width; + box-sizing: border-box; + background-color: $background-color; + padding: 32px 16px 16px; + + @include display-items(flex, column, center, center); + @include border-radius; + @include border(1px, solid, $border-color); + + transition: transform 300ms; + + &__image { + width: 160px; + height: 134px; + margin-bottom: 40px; + display: block; + object-fit: cover; + object-position: center; + } + + &__title { + width: 100%; + margin-bottom: 4px; + transition: all 300ms; + + @include text-values(normal, 500, 12px, 18px, $primary-text-color, left); + } + + &__product-code { + width: 100%; + margin-bottom: 16px; + + @include text-values(normal, 400, 10px, 14px, $secondary-text-color, left); + } + + &__rate { + width: 100%; + margin-bottom: 24px; + + @include display-items(flex, row, flex-end, space-between); + + &-number-review { + height: 100%; + + @include text-values(normal, 400, 10px, 14px, $primary-text-color, right); + } + } + + &__price { + width: 100%; + margin-bottom: 16px; + + @include display-items(flex, row, end, space-between); + + &-title { + @include text-values( + normal, + 400, + 12px, + 18px, + $secondary-text-color, + left + ); + } + &-number { + @include text-values(normal, 700, 16px, 18px, $primary-text-color, right); + } + } + + &__button { + width: 166px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + background-color: $primary-color; + text-decoration: none; + text-transform: uppercase; + color: $white-text-color; + transition: all 300ms; + + @include border-radius; + @include text-values(normal, 700, 14px, 16px, $white-text-color, center); + + &:hover { + background-color: $background-color; + color: $primary-color; + text-decoration: none; + text-transform: uppercase; + + @include border(1px, solid, $primary-color); + } + } + + &:hover &__title { + color: #34568b; + } + + &:hover { + transform: scale(120%); + } +} diff --git a/src/styles/stars.scss b/src/styles/stars.scss new file mode 100644 index 0000000000..939879364d --- /dev/null +++ b/src/styles/stars.scss @@ -0,0 +1,28 @@ +.stars { + display: flex; + flex-direction: row; + + &__star { + background-image: url(/src/images/star.svg); + background-repeat: no-repeat; + width: $star-size; + height: $star-size; + background-position: center; + + &:not(:last-child) { + margin-right: 4px; + } + + &:nth-child(-n + 4) { + background-image: url(/src/images/star-active.svg); + } + } + .stars--0 .stars__star:nth-child(-n + 0), + .stars--1 .stars__star:nth-child(-n + 1), + .stars--2 .stars__star:nth-child(-n + 2), + .stars--3 .stars__star:nth-child(-n + 3), + .stars--4 .stars__star:nth-child(-n + 4), + .stars--5 .stars__star:nth-child(-n + 5) { + 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..eea46e5d62 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,45 @@ +@mixin text-values( + $fStyle: normal, + $fWeight, + $fSize, + $Lheight, + $color, + $tAlign +) { + font-style: $fStyle; + font-weight: $fWeight; + font-size: $fSize; + line-height: $Lheight; + color: $color; + text-align: $tAlign; +} + +@mixin display-items( + $display, + $flex-direction, + $align-items, + $justify-content +) { + display: $display; + flex-direction: $flex-direction; + align-items: $align-items; + justify-content: $justify-content; +} + +@mixin border-radius() { + border-radius: 5px; +} + +@mixin border($bWidth, $bStyle, $bColor) { + border: $bWidth $bStyle $bColor; +} + +@mixin bg-image-prop( + $background-image, + $background-repeat, + $background-position +) { + background-image: $background-image; + background-repeat: $background-repeat; + background-position: $background-position; +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..da368d4c22 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,11 @@ +$main-color: #00acdc; +$nav-link-color: #060b35; +$primary-color: rgba(0, 172, 220, 1); +$primary-text-color: rgba(6, 11, 53, 1); +$secondary-text-color: rgba(97, 96, 112, 1); +$white-text-color: rgba(255, 255, 255, 1); +$background-color: rgba(255, 255, 255, 1); +$border-color: rgba(243, 243, 243, 1); +$card-width: 200px; +$logo-img-size: 40px; +$star-size: 16px;