diff --git a/readme.md b/readme.md index acd5174814..769770a4fd 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://OlyaFialkovska.github.io/MateAcademy_layout_catalog/) +- [TEST REPORT LINK](https://OlyaFialkovska.github.io/MateAcademy_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..f53985da01 100644 --- a/src/index.html +++ b/src/index.html @@ -20,8 +20,461 @@ href="styles/index.scss" /> - -

Catalog

+
+ + + +
+ +
+
+ Apple A1419 iMac + +
+

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

+
+ + + Buy + +
+
+ +
+ Apple A1419 iMac + +
+

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

+
+ + + Buy + +
+
+ +
+ Apple A1419 iMac + +
+

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

+
+ + + Buy + +
+
+ +
+ Apple A1419 iMac + +
+

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

+
+ + + Buy + +
+
+ +
+ Apple A1419 iMac + +
+

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

+
+ + + Buy + +
+
+ +
+ Apple A1419 iMac + +
+

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

+
+ + + Buy + +
+
+ +
+ Apple A1419 iMac + +
+

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

+
+ + + Buy + +
+
+ +
+ Apple A1419 iMac + +
+

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

+ +

+ Product code: 195434 +

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+

Price:

+ +

$2,199

+
+ + + Buy + +
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..b09e61e41d 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,263 @@ +$secondary: #616070; +$main-accent: #060b35; +$white: white; +$border-color: #f3f3f3; +$main-color: #00acdc; +$header-shadow: #0000000d; +$hover-card-title: #34568b; + +html { + font-family: Roboto, sans-serif; + font-style: normal; +} + body { margin: 0; } + +// #region header + +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 50px; + + box-shadow: 0 2px 4px 0 rgba($header-shadow, 0.05); + + &__link { + text-decoration: none; + } + + &__link--logo { + display: flex; + } + + &__logo-img { + width: 40px; + height: 40px; + } + + &__nav-list { + display: flex; + align-items: center; + margin: 0; + padding: 0; + list-style: none; + } + + &__nav-list &__nav-item:not(:last-child) { + margin-right: 20px; + } + + &__link--nav { + display: flex; + align-items: center; + + height: 60px; + + font-size: 12px; + font-weight: 500; + color: $main-accent; + text-transform: uppercase; + + transition: color 300ms; + + &:hover { + color: $main-color; + } + } +} + +.is-active { + position: relative; + color: $main-color; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 100%; + height: 4px; + border-radius: 8px; + + background-color: $main-color; + } +} + +// #endregion header + +// #region cards + +.catalog { + display: grid; + place-content: center; + gap: 46px 48px; + padding: 50px 40px; + grid-template-columns: 200px; + grid-template-rows: repeat(auto-fit, 1fr); + + @media (min-width: 488px) { + grid-template-columns: repeat(2, 200px); + } + + @media (min-width: 768px) { + grid-template-columns: repeat(3, 200px); + } + + @media (min-width: 1024px) { + grid-template-columns: repeat(4, 200px); + } +} + +.card { + box-sizing: border-box; + width: 200px; + padding: 32px 16px 16px; + border: 1px solid $border-color; + border-radius: 5px; + transition: transform 300ms; + + &:hover { + transform: scale(1.2); + } + + &__title { + margin: 0; + padding: 0; + color: $main-accent; + + font-weight: 500; + font-size: 12px; + line-height: 18px; + letter-spacing: 0; + + transition: color 300ms; + } + + &:hover &__title { + color: $hover-card-title; + } + + &__img { + display: block; + width: 160px; + height: 134px; + margin: 0 3px 40px; + } + + &__content { + box-sizing: border-box; + } + + &__text { + margin: 0; + padding: 0; + color: $main-accent; + + &--product-code { + font-weight: 400; + margin-top: 4px; + font-size: 10px; + line-height: 14px; + letter-spacing: 0; + color: $secondary; + } + + &--review-text { + font-weight: 400; + font-size: 10px; + line-height: 14px; + letter-spacing: 0; + } + + &--price-label { + font-weight: 400; + font-size: 12px; + line-height: 18px; + letter-spacing: 0; + color: $secondary; + } + + &--price-value { + font-weight: 700; + font-size: 16px; + line-height: 18px; + letter-spacing: 0; + } + } + + &__review { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: nowrap; + margin-top: 16px; + } + + &__price { + margin-top: 24px; + display: flex; + justify-content: space-between; + } + + &__button { + box-sizing: border-box; + margin-top: 16px; + display: flex; + width: 100%; + height: 40px; + justify-content: center; + align-items: center; + border-radius: 5px; + border: 1px solid $main-color; + + background-color: $main-color; + + color: $white; + font-weight: 700; + font-size: 14px; + line-height: 16px; + letter-spacing: 0; + text-transform: uppercase; + text-decoration: none; + + transition: + background-color 300ms, + color 300ms; + + &:hover { + background-color: $white; + color: $main-color; + } + } +} + +// #endregion cards + +// #region stars + +.stars { + display: flex; + + &__star { + width: 16px; + height: 16px; + background-image: url('../images/star.svg'); + background-repeat: no-repeat; + background-position: center; + } + + &__star:not(:last-child) { + margin-right: 4px; + } + + &--4 &__star:nth-child(-n + 4) { + background-image: url('../images/star-active.svg'); + } +} + +// #endregion stars