diff --git a/readme.md b/readme.md index 705275c4af..7790092cb3 100644 --- a/readme.md +++ b/readme.md @@ -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` @@ -30,8 +30,8 @@ Make all the changes smooth on hover (during 300ms): ## 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://raccoon1Andrew.github.io/layout_catalog/) +- [TEST REPORT LINK](https://raccoon1Andrew.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..66ce0c28c8 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,364 @@ -

Catalog

+
+ + + + +
+
+
+
+ imac +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+

Price:

+

$2,199

+
+
+ + BUY + +
+
+
+
+ imac +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+

Price:

+

$2,199

+
+
+ + BUY + +
+
+
+
+ imac +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+

Price:

+

$2,199

+
+
+ + BUY + +
+
+
+
+ imac +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+

Price:

+

$2,199

+
+
+ + BUY + +
+
+
+
+ imac +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+

Price:

+

$2,199

+
+
+ + BUY + +
+
+
+
+ imac +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+

Price:

+

$2,199

+
+
+ + BUY + +
+
+
+
+ imac +
+

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+
Reviews: 5
+
+
+

Price:

+

$2,199

+
+
+ + BUY + +
+
+
+
+ imac +
+

+ 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..8a1c4694ca --- /dev/null +++ b/src/styles/card.scss @@ -0,0 +1,115 @@ +.main { + margin: 0; + + @include page-grid; + + padding: 50px 40px; + justify-content: center; + grid-gap: 46px 48px; +} + +.product { + width: 200px; + height: 408px; + box-sizing: border-box; + grid-column: span 1; + border: 1px solid #f3f3f3; + border-radius: 4px; + padding: 32px 16px; + background-color: $bg-color; + + @include hover(transform, scale(1.2)); + + &__image { + display: flex; + width: 160px; + height: 134px; + margin: auto; + align-items: center; + } + + &__name { + margin-top: 40px; + margin-bottom: 0; + font-size: 12px; + font-weight: 500; + line-height: 18px; + color: $text-color-primary; + } + + &__code { + margin-top: 4px; + margin-bottom: 17px; + font-size: 10px; + font-weight: 400; + color: $text-color-secondary; + } + + &__raiting { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__reviews { + color: $text-color-primary; + font-size: 10px; + font-weight: 400; + line-height: 14px; + } + + &__price { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 24px; + } + + &__text { + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: $text-color-secondary; + } + + &__money { + font-size: 16px; + font-weight: bold; + line-height: 18px; + color: $text-color-primary; + } + + &__button { + box-sizing: border-box; + display: flex; + margin-top: 16px; + margin-bottom: 16px; + } + + &__link { + text-transform: uppercase; + text-decoration: none; + background-color: $bg-button-color; + width: 166px; + height: 40px; + border: 1px solid $bg-button-color; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + color: $bg-color; + font-size: 14px; + font-weight: 700; + line-height: 16px; + cursor: pointer; + + &:hover { + background-color: $bg-color; + color: $bg-button-color; + } + } +} + +img { + width: 100%; +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 0000000000..b31ce82be2 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,34 @@ +ul { + margin: 0; + padding: 0; +} + +.header { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 50px; + box-shadow: $shadow; + + &__sylka { + height: 40px; + width: 40px; + } +} + +.is-active { + position: relative; + color: $bg-button-color; + + &::after { + content: ''; + left: 0; + position: absolute; + background: $bg-button-color; + border-radius: 10px; + width: 100%; + height: 4px; + bottom: 0; + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..5beb240a8e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,12 @@ -body { +@import 'variables'; +@import 'mixin'; +@import 'header'; +@import 'nav'; +@import 'card'; +@import 'stars'; + +* { margin: 0; + font-family: Roboto, sans-serif; + box-sizing: border-box; } diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss new file mode 100644 index 0000000000..13475fc248 --- /dev/null +++ b/src/styles/mixin.scss @@ -0,0 +1,45 @@ +@mixin on-tablet { + @media (min-width: 567px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-tv { + @media (min-width: $tv-min-width) { + @content; + } +} + +@mixin hover($property, $toValue) { + transition: #{$property} $effectDuration; + &:hover { + #{$property}: $toValue; + } +} + +@mixin page-grid { + --columns: 1; + + display: grid; + grid-gap: 46px 48px; + + grid-template-columns: repeat(var(--columns), 200px); + + @include on-tablet { + --columns: 2; + } + + @include on-desktop { + --columns: 3; + } + + @include on-tv { + --columns: 4; + } +} diff --git a/src/styles/nav.scss b/src/styles/nav.scss new file mode 100644 index 0000000000..9e558feca1 --- /dev/null +++ b/src/styles/nav.scss @@ -0,0 +1,33 @@ +.nav { + &__link { + font-size: 12px; + text-decoration: none; + display: block; + padding: 23px 0; + color: $nav-color; + text-transform: uppercase; + font-weight: 500; + + &--blue { + color: $bg-button-color !important; + } + + &:hover { + color: $bg-button-color; + } + } + + &__list { + list-style: none; + display: flex; + flex-wrap: nowrap; + } + + &__item { + margin-right: 20px; + + &:last-child { + margin-right: 0; + } + } +} diff --git a/src/styles/stars.scss b/src/styles/stars.scss new file mode 100644 index 0000000000..f66ebe7b09 --- /dev/null +++ b/src/styles/stars.scss @@ -0,0 +1,25 @@ +.stars { + display: flex; + + &__star { + width: 16px; + height: 16px; + background-image: url('/src/images/star.svg'); + background-position: center; + background-repeat: no-repeat; + background-color: $bg-color; + margin-left: 4px; + + &:first-child { + margin: 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('/src/images/star-active.svg'); +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000000..3517267177 --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,10 @@ +$text-color-primary: #060b35; +$text-color-secondary: #616070; +$bg-color: #fff; +$bg-button-color: #00acdc; +$nav-color: #060b35; +$shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); +$tablet-min-width: 488px; +$desktop-min-width: 768px; +$tv-min-width: 1024px; +$effectDuration: 0.3s;