From dc50a8ab92836d9a1d52d38c4947aedc46fbefe2 Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 25 Jun 2026 16:39:07 -0300 Subject: [PATCH 1/3] Criando Creating the base files and adding HTML and CSS to them --- .github/workflows/test.yml-template | 29 +++ package-lock.json | 9 +- package.json | 2 +- src/index.html | 349 +++++++++++++++++++++++++++- src/styles/_card.scss | 135 +++++++++++ src/styles/_grid.scss | 29 +++ src/styles/_header.scss | 68 ++++++ src/styles/_stars.scss | 22 ++ src/styles/_variables.scss | 9 + src/styles/index.scss | 8 + 10 files changed, 654 insertions(+), 6 deletions(-) create mode 100644 .github/workflows/test.yml-template create mode 100644 src/styles/_card.scss create mode 100644 src/styles/_grid.scss create mode 100644 src/styles/_header.scss create mode 100644 src/styles/_stars.scss create mode 100644 src/styles/_variables.scss diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data 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..7bb50e5bbd 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,353 @@ -

Catalog

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

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

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

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

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

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

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

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

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

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

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

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

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

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ APPLE A1419 iMac 27 Retina 5K Monoblock + + 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..c7d1274e7f --- /dev/null +++ b/src/styles/_card.scss @@ -0,0 +1,135 @@ +.card { + display: flex; + flex-direction: column; + align-items: center; + + box-sizing: border-box; + margin: 0; + padding: 0 16px; + border: 1px solid $gray; + border-radius: 5px; + + font-family: $font-family; + + background: $white; + + transition: transform 300ms; + + &:hover { + transform: scale(1.2); + } + + &__title { + width: 100%; + margin-bottom: 4px; + + font-family: $font-family, 'Roboto', sans-serif; + font-size: 12px; + font-weight: $font-medium; + line-height: 18px; + color: $dark; + + transition: color 300ms; + } + + &:hover &__title { + color: #34568b; + } + + &__image { + width: 160px; + height: 134px; + margin-top: 32px; + margin-bottom: 40px; + } + + &__description { + display: flex; + align-self: self-start; + + margin-top: 0; + margin-bottom: 16px; + + font-family: $font-family, 'Roboto', sans-serif; + font-size: 10px; + font-weight: $font-normal; + color: $second-color; + } + + &__reviews { + display: flex; + justify-content: space-between; + width: 164px; + margin-bottom: 24px; + } + + &__reviews-count { + display: flex; + align-self: self-end; + + margin: 0; + + font-family: $font-family, 'Roboto', sans-serif; + font-size: 10px; + font-weight: $font-normal; + color: $dark; + } + + &__price { + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + margin-bottom: 16px; + } + + &__description-price { + margin: 0; + + font-family: $font-family, 'Roboto', sans-serif; + font-size: 12px; + font-weight: $font-normal; + color: $second-color; + } + + &__price-of-product { + margin: 0; + + font-family: $font-family, 'Roboto', sans-serif; + font-size: 16px; + font-weight: $font-bold; + color: $dark; + } + + &__buy-link { + display: flex; + align-items: center; + justify-content: center; + + box-sizing: border-box; + width: 100%; + height: 40px; + margin-bottom: 16px; + border: 1px solid transparent; + border-radius: 5px; + + font-size: 14px; + font-weight: $font-bold; + color: $white; + text-decoration: none; + + background-color: $blue; + + transition: + background-color 300ms, + color 300ms, + border-color 300ms; + + &:hover { + border: 1px solid $blue; + color: #00acdc; + background: #fff; + } + } +} diff --git a/src/styles/_grid.scss b/src/styles/_grid.scss new file mode 100644 index 0000000000..b71997bde5 --- /dev/null +++ b/src/styles/_grid.scss @@ -0,0 +1,29 @@ +.catalog { + display: grid; + padding: 50px 40px; + gap: 46px 48px; + grid-template-columns: repeat(1, 1fr); +} + +@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); + } +} + +.card { + width: 200px; + justify-self: center; +} diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 0000000000..998c3d28d8 --- /dev/null +++ b/src/styles/_header.scss @@ -0,0 +1,68 @@ +.header { + padding: 0 50px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: $white; + + &__logo { + display: flex; + align-items: center; + } +} + +.nav { + margin: 0; + padding: 0; + + &__list { + display: flex; + list-style: none; + margin: 0; + padding: 0; + } + + &__item { + display: flex; + margin-right: 20px; + &:last-child { + margin-right: 0; + } + } + + &__link { + display: flex; + justify-content: center; + align-items: center; + height: 60px; + margin: 0; + padding: 0; + text-transform: uppercase; + text-decoration: none; + color: #060b35; + font-family: $font-family; + font-weight: $font-medium; + font-size: 12px; + transition: all 300ms; + + &:hover { + color: #00acdc; + } + } + + .is-active { + position: relative; + color: $blue; + + &::after { + position: absolute; + content: ''; + bottom: 0; + left: 0; + width: 100%; + height: 4px; + border-radius: 8px; + background-color: $blue; + } + } +} diff --git a/src/styles/_stars.scss b/src/styles/_stars.scss new file mode 100644 index 0000000000..68639276ca --- /dev/null +++ b/src/styles/_stars.scss @@ -0,0 +1,22 @@ +.stars { + display: flex; + align-items: center; + margin: 0; + padding: 0; + + @for $i from 0 through 5 { + &--#{$i} .stars__star:nth-child(-n + #{$i}) { + background-image: url(../images/star-active.svg); + } + } +} + +.stars__star { + width: 16px; + height: 16px; + margin-right: 4px; + + background-image: url(../images/star.svg); + background-repeat: no-repeat; + background-position: center; +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 0000000000..fa6e050345 --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,9 @@ +$white: #fff; +$dark: #060b35; +$second-color: #616070; +$gray: #f3f3f3; +$blue: #00acdc; +$font-family: 'Roboto', Arial, sans-serif; +$font-normal: 400; +$font-medium: 500; +$font-bold: 700; diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..6189d1c52c 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,11 @@ +@import 'variables'; +@import 'header'; +@import 'card'; +@import 'stars'; +@import 'grid'; + body { + box-sizing: border-box; margin: 0; + padding: 0; } From 98d6209b6ce7a88d2ed6d281b2a6602bd0ab4357 Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 25 Jun 2026 17:38:36 -0300 Subject: [PATCH 2/3] Creating new variables and adding them to the Header and Card files --- src/styles/_card.scss | 6 +++--- src/styles/_header.scss | 32 ++++++++++++++++---------------- src/styles/_variables.scss | 3 ++- 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/styles/_card.scss b/src/styles/_card.scss index c7d1274e7f..4163669200 100644 --- a/src/styles/_card.scss +++ b/src/styles/_card.scss @@ -33,7 +33,7 @@ } &:hover &__title { - color: #34568b; + color: $color-title-hover; } &__image { @@ -128,8 +128,8 @@ &:hover { border: 1px solid $blue; - color: #00acdc; - background: #fff; + color: $blue; + background: $white; } } } diff --git a/src/styles/_header.scss b/src/styles/_header.scss index 998c3d28d8..a1e12c7a56 100644 --- a/src/styles/_header.scss +++ b/src/styles/_header.scss @@ -39,30 +39,30 @@ padding: 0; text-transform: uppercase; text-decoration: none; - color: #060b35; + color: $dark; font-family: $font-family; font-weight: $font-medium; font-size: 12px; - transition: all 300ms; + transition: color 300ms; &:hover { - color: #00acdc; + color: $blue; } - } - .is-active { - position: relative; - color: $blue; + &.is-active { + position: relative; + color: $blue; - &::after { - position: absolute; - content: ''; - bottom: 0; - left: 0; - width: 100%; - height: 4px; - border-radius: 8px; - background-color: $blue; + &::after { + position: absolute; + content: ''; + bottom: 0; + left: 0; + width: 100%; + height: 4px; + border-radius: 8px; + background-color: $blue; + } } } } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index fa6e050345..ac046ceab9 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,8 +1,9 @@ $white: #fff; $dark: #060b35; -$second-color: #616070; $gray: #f3f3f3; $blue: #00acdc; +$second-color: #616070; +$color-title-hover: #34568b; $font-family: 'Roboto', Arial, sans-serif; $font-normal: 400; $font-medium: 500; From 622ad3bf01938bcc03e7624f0370ff5fc2aa3be1 Mon Sep 17 00:00:00 2001 From: Samuel Date: Fri, 26 Jun 2026 10:26:48 -0300 Subject: [PATCH 3/3] Adjusting the grid layout --- src/styles/_card.scss | 2 ++ src/styles/_grid.scss | 9 +++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/styles/_card.scss b/src/styles/_card.scss index 4163669200..bf3e4dac37 100644 --- a/src/styles/_card.scss +++ b/src/styles/_card.scss @@ -17,6 +17,8 @@ &:hover { transform: scale(1.2); + z-index: 1; + position: relative; } &__title { diff --git a/src/styles/_grid.scss b/src/styles/_grid.scss index b71997bde5..3222a368e8 100644 --- a/src/styles/_grid.scss +++ b/src/styles/_grid.scss @@ -2,24 +2,25 @@ display: grid; padding: 50px 40px; gap: 46px 48px; - grid-template-columns: repeat(1, 1fr); + grid-template-columns: repeat(1, 200px); + justify-content: center; } @media (min-width: 488px) { .catalog { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(2, 200px); } } @media (min-width: 768px) { .catalog { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(3, 200px); } } @media (min-width: 1024px) { .catalog { - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(4, 200px); } }