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..bf3e4dac37 --- /dev/null +++ b/src/styles/_card.scss @@ -0,0 +1,137 @@ +.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); + z-index: 1; + position: relative; + } + + &__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: $color-title-hover; + } + + &__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: $blue; + background: $white; + } + } +} diff --git a/src/styles/_grid.scss b/src/styles/_grid.scss new file mode 100644 index 0000000000..3222a368e8 --- /dev/null +++ b/src/styles/_grid.scss @@ -0,0 +1,30 @@ +.catalog { + display: grid; + padding: 50px 40px; + gap: 46px 48px; + grid-template-columns: repeat(1, 200px); + justify-content: center; +} + +@media (min-width: 488px) { + .catalog { + grid-template-columns: repeat(2, 200px); + } +} + +@media (min-width: 768px) { + .catalog { + grid-template-columns: repeat(3, 200px); + } +} + +@media (min-width: 1024px) { + .catalog { + grid-template-columns: repeat(4, 200px); + } +} + +.card { + width: 200px; + justify-self: center; +} diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 0000000000..a1e12c7a56 --- /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: $dark; + font-family: $font-family; + font-weight: $font-medium; + font-size: 12px; + transition: color 300ms; + + &:hover { + 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; + } + } + } +} 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..ac046ceab9 --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,10 @@ +$white: #fff; +$dark: #060b35; +$gray: #f3f3f3; +$blue: #00acdc; +$second-color: #616070; +$color-title-hover: #34568b; +$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; }