From bbac8a7cd184e34c6842393516bfd6c851757da7 Mon Sep 17 00:00:00 2001 From: Vladislav Obukhov Date: Thu, 4 Jun 2026 12:34:36 +0300 Subject: [PATCH] Implement catalog page --- package-lock.json | 9 +- package.json | 2 +- src/index.html | 351 +++++++++++++++++++++++++++++++++++++++++- src/styles/index.scss | 220 ++++++++++++++++++++++++++ 4 files changed, 576 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6dd164c6e0..664cd93eb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "backstopjs": "6.3.23", @@ -1212,10 +1212,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 34398805fa..f538e623d5 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "backstopjs": "6.3.23", diff --git a/src/index.html b/src/index.html index 9cff78eeb7..889d0b910a 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,355 @@ -

Catalog

+
+ + + +
+ +
+
+ Apple iMac + +

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

+ +

Product code: 195434

+ +
+
+
+
+
+
+
+
+ +

Reviews: 5

+
+ +
+ Price: + $2,199 +
+ + + Buy + +
+ +
+ Apple iMac +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+ Price: + $2,199 +
+ + Buy + +
+ +
+ Apple iMac +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+ Price: + $2,199 +
+ + Buy + +
+ +
+ Apple iMac +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+ Price: + $2,199 +
+ + Buy + +
+ +
+ Apple iMac +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+ Price: + $2,199 +
+ + Buy + +
+ +
+ Apple iMac +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+ Price: + $2,199 +
+ + Buy + +
+ +
+ Apple iMac +

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

+

Product code: 195434

+
+
+
+
+
+
+
+
+

Reviews: 5

+
+
+ Price: + $2,199 +
+ + Buy + +
+ +
+ Apple 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..d9f47a3201 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,223 @@ +$main-color: #00acdc; +$text-color: #060b35; +$secondary-color: #616070; +$title-hover-color: #34568b; +$border-color: #f3f3f3; +$card-width: 200px; +$header-height: 60px; +$transition-duration: 300ms; + +* { + box-sizing: border-box; +} + body { margin: 0; + font-family: Roboto, sans-serif; + color: $text-color; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + height: $header-height; + padding: 0 50px; +} + +.logo { + display: flex; +} + +.logo__img { + width: 40px; + height: 40px; +} + +.nav__list { + display: flex; + align-items: center; + gap: 20px; + margin: 0; + padding: 0; + list-style: none; +} + +.nav__link { + position: relative; + display: flex; + align-items: center; + height: $header-height; + color: $text-color; + font-size: 12px; + font-weight: 500; + line-height: $header-height; + text-decoration: none; + text-transform: uppercase; + transition: color $transition-duration; +} + +.nav__link:hover { + color: $main-color; +} + +.nav__link.is-active { + color: $main-color; +} + +.nav__link.is-active::after { + content: ''; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 4px; + border-radius: 8px; + background-color: $main-color; +} + +.catalog { + display: grid; + grid-template-columns: repeat(1, $card-width); + gap: 46px 48px; + justify-content: center; + padding: 50px 40px; +} + +.card { + width: $card-width; + padding: 32px 16px 16px; + border: 1px solid $border-color; + border-radius: 5px; + background-color: #fff; + transition: transform $transition-duration; +} + +.card:hover { + transform: scale(1.2); +} + +.card__image { + display: block; + width: 160px; + height: 134px; + margin: 0 auto 40px; + object-fit: contain; +} + +.card__title { + margin: 0 0 4px; + color: $text-color; + font-size: 12px; + font-weight: 500; + line-height: 18px; + transition: color $transition-duration; +} + +.card__code { + margin: 0 0 16px; + color: $secondary-color; + font-size: 10px; + line-height: 14px; +} + +.card__rating { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; +} + +.card__reviews { + margin: 0; + color: $text-color; + font-size: 10px; + line-height: 14px; +} + +.card__price { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} + +.card__price-label { + color: $secondary-color; + font-size: 12px; + line-height: 18px; +} + +.card__price-value { + color: $text-color; + font-size: 16px; + font-weight: 700; + line-height: 18px; +} + +.card__buy { + display: flex; + justify-content: center; + align-items: center; + height: 40px; + border: 1px solid $main-color; + border-radius: 5px; + background-color: $main-color; + color: #fff; + font-size: 14px; + font-weight: 700; + line-height: 16px; + text-decoration: none; + text-transform: uppercase; + transition: + background-color $transition-duration, + color $transition-duration; +} + +.card__buy:hover { + background-color: #fff; + color: $main-color; +} + +.card:hover .card__title { + color: $title-hover-color; +} + +.stars { + display: flex; + gap: 4px; +} + +.stars__star { + width: 16px; + height: 16px; + background-image: url('../images/star.svg'); + background-repeat: no-repeat; + background-position: center; +} + +.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'); +} + +@media (min-width: 488px) { + .catalog { + grid-template-columns: repeat(2, $card-width); + } +} + +@media (min-width: 768px) { + .catalog { + grid-template-columns: repeat(3, $card-width); + } +} + +@media (min-width: 1024px) { + .catalog { + grid-template-columns: repeat(4, $card-width); + } }