diff --git a/readme.md b/readme.md index 874ca70d97..0da5a19330 100644 --- a/readme.md +++ b/readme.md @@ -33,14 +33,14 @@ 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://alla-vedmid.github.io/layout_catalog/) +- [TEST REPORT LINK](https://alla-vedmid.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. -- [ ] All components follow BEM and use SCSS -- [ ] Repeated sizes and special colors are put to variables -- [ ] Grid is used for the columns -- [ ] Cards are shown in 1, 2, 3, or 4 columns based on screen resolution -- [ ] All changes on `:hover` are smooth -- [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) +- [x] All components follow BEM and use SCSS +- [x] Repeated sizes and special colors are put to variables +- [x] Grid is used for the columns +- [x] Cards are shown in 1, 2, 3, or 4 columns based on screen resolution +- [x] All changes on `:hover` are smooth +- [x] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) diff --git a/src/index.html b/src/index.html index 9cff78eeb7..0194409201 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,350 @@ -

Catalog

+
+ + +
+
+
+
+ +
+ + APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) + + Product code: 195434 +
+ +
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + +
+ +
+
+ +
+ + APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) + + Product code: 195434 +
+ +
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + +
+ +
+
+ +
+ + APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) + + Product code: 195434 +
+ +
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + +
+ +
+
+ +
+ + APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) + + Product code: 195434 +
+ +
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + +
+ +
+
+ +
+ + APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) + + Product code: 195434 +
+ +
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + +
+ +
+
+ +
+ + APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) + + Product code: 195434 +
+ +
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + +
+ +
+
+ +
+ + APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) + + Product code: 195434 +
+ +
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + +
+ +
+
+ +
+ + APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) + + Product code: 195434 +
+ +
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + +
+
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..8d50187cd3 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,102 @@ +$base-color: #060b35; +$color-light-gray: #616070; +$color-blue: #00acdc; +$color-white: #fff; +$color-border-card: #f3f3f3; +$card-radius: 5px; +$card-width: 200px; +$card-height: 408px; +$card-font: Roboto, sans-serif; + +.card { + width: $card-width; + height: $card-height; + border: 1px solid $color-border-card; + font-family: $card-font; + border-radius: $card-radius; + padding: 17px; + display: flex; + flex-direction: column; + justify-content: space-between; + transition: $transition; + + &__image { + background-image: url('../images/imac.jpeg'); + width: 160px; + height: 134px; + display: block; + background-repeat: no-repeat; + background-size: cover; + margin: 16px auto 0; + } + + &__description { + margin-top: 33px; + } + &__title { + font-size: 12px; + font-weight: 500; + line-height: 18px; + color: $base-color; + display: block; + } + &__prod-code { + @include simple-text; + + display: block; + color: $color-light-gray; + } + + &__reviews { + @include elem-space-between; + + margin: 20px 0; + } + &__reviews-text { + @include simple-text; + + color: $base-color; + } + + &__price { + @include elem-space-between; + } + + &__label { + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: $color-light-gray; + } + &__value { + font-size: 16px; + font-weight: 700; + line-height: 18px; + } + + &__btn { + width: 166px; + height: 40px; + border-radius: 5px; + background-color: $color-blue; + border: 1px solid $color-blue; + font-size: 14px; + font-weight: 700; + line-height: 16px; + color: $color-white; + text-transform: uppercase; + align-self: center; + } + + &:hover { + cursor: pointer; + transform: scale(1.2); + .card__btn { + background-color: $color-white; + color: $color-blue; + } + .card__title { + color: #34568b; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..496fde11c4 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,57 @@ +$nav-link-color: #060b35; + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 40px; + border: 1px solid transparent; + box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.1); +} + +.navigation { + margin: 0; +} + +.navigation__list { + display: flex; + margin: 0; +} + +.navigation__item { + list-style: none; + line-height: 60px; + position: relative; + + &:not(:last-child) { + margin-right: 20px; + margin-left: 20px; + } + a { + text-decoration: none; + color: $nav-link-color; + text-transform: uppercase; + font-size: 12px; + font-family: Roboto, sans-serif; + font-weight: 500; + transition: $transition; + + &:hover, + &.is-active, + &:active { + color: $main-blue-color; + } + &:hover::after, + &.is-active::after, + &:active::after { + content: ''; + position: absolute; + bottom: 0; + border-bottom: 4px solid $main-blue-color; + border-radius: 8px; + display: block; + z-index: 1; + width: 100%; + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..c00c465b53 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,17 @@ +.main { + display: grid; + grid-template-columns: auto auto auto auto; + gap: 46px 48px; + justify-content: center; + padding: 50px 40px; + + @media screen and (max-width: 1024px) { + grid-template-columns: auto auto auto; + } + @media screen and (max-width: 768px) { + grid-template-columns: auto auto; + } + @media screen and (max-width: 488px) { + grid-template-columns: auto; + } +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..852f1eda2a --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,17 @@ +.stars { + display: flex; + + &__star { + background-image: url('../images/star.svg'); + width: 16px; + height: 16px; + display: block; + background-repeat: no-repeat; + } +} + +@for $i from 1 through 5 { + .stars--#{$i} .stars__star:nth-child(-n + #{$i}) { + background-image: url('../images/star-active.svg'); + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..ce9482f667 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,12 @@ body { margin: 0; } + +$main-blue-color: #00acdc; +$transition: all 0.3s linear; + +@import 'utils/mixins'; +@import 'blocks/header'; +@import 'blocks/main'; +@import 'blocks/card'; +@import 'blocks/stars'; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..64c06aa39a --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,11 @@ +@mixin simple-text() { + font-size: 10px; + font-weight: 400; + line-height: 14px; +} + +@mixin elem-space-between() { + display: flex; + justify-content: space-between; + align-items: center; +}