From 8d2e007e44b4084a0554c04fb6e07c7fe0d87c8f Mon Sep 17 00:00:00 2001 From: Lucas Helfensteller Silva Date: Sat, 9 Nov 2024 15:40:43 +0100 Subject: [PATCH 1/3] add task solution --- readme.md | 18 +- src/index.html | 427 +++++++++++++++++++++++++++++++- src/styles/blocks/card.scss | 163 ++++++++++++ src/styles/blocks/header.scss | 73 ++++++ src/styles/blocks/stars.scss | 22 ++ src/styles/index.css | 228 +++++++++++++++++ src/styles/index.css.map | 1 + src/styles/index.scss | 8 + src/styles/utils/variables.scss | 15 ++ 9 files changed, 945 insertions(+), 10 deletions(-) create mode 100644 src/styles/blocks/card.scss create mode 100644 src/styles/blocks/header.scss create mode 100644 src/styles/blocks/stars.scss create mode 100644 src/styles/index.css create mode 100644 src/styles/index.css.map create mode 100644 src/styles/utils/variables.scss diff --git a/readme.md b/readme.md index 874ca70d97..4647faf357 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,14 +33,14 @@ 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://lucashel-design.github.io/layout_catalog/) +- [TEST REPORT LINK](https://lucashel-design.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. -- [ ] All components follow BEM and use SCSS -- [ ] Repeated sizes and special colors are put to variables -- [ ] Grid is used for the columns -- [ ] Cards are shown in 1, 2, 3, or 4 columns based on screen resolution -- [ ] All changes on `:hover` are smooth -- [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) +- [x] All components follow BEM and use SCSS +- [x] Repeated sizes and special colors are put to variables +- [x] Grid is used for the columns +- [x] Cards are shown in 1, 2, 3, or 4 columns based on screen resolution +- [x] All changes on `:hover` are smooth +- [x] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) diff --git a/src/index.html b/src/index.html index 9cff78eeb7..903dc69813 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,431 @@ -

Catalog

+
+
+ + + +
+
+ +
+
+
+ +
+ +
+ 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 (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ +
+ + Buy + +
+
+
+
+ +
+ +
+ 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 (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ +
+ + Buy + +
+
+
+
+ +
+ +
+ 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 (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ +
+ + Buy + +
+
+
+
+ +
+ +
+ 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 (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ +
+ + Buy + +
+
+
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..45526a69e6 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,163 @@ +@import '../utils/variables'; + +.cards-container { + padding: 40px 50px; + + --column-count: 1; + display: grid; + grid-template-columns: repeat(var(--column-count), 200px); + gap: 48px 46px; + justify-content: center; +} + +@media (min-width: 488px) { + .cards-container { + --column-count: 2; + } +} + +@media (min-width: 768px) { + .cards-container { + --column-count: 3; + } +} + +@media (min-width: 1024px) { + .cards-container { + --column-count: 4; + } +} + +.card { + display: flex; + flex-direction: column; + width: 200px; + border: 1px solid $light-gray; + border-radius: 5px; + margin: 16px; + height: auto; + transition: + transform 300ms, + color 300ms; + + &__image { + display: flex; + + .image { + width: 160px; + height: 134px; + margin: 32px 19px 0; + + background-image: url(../images/imac.jpeg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } + } + + &__title { + margin: 40px 16px 0; + line-height: 18px; + height: 36px; + width: 166px; + font-weight: 500; + font-size: $font-size-medium; + color: $secondary-color; + } + + &__product-code { + margin-top: 4px; + padding: 0 16px; + width: 100%; + justify-content: center; + font-weight: 400; + font-size: $font-size-small; + line-height: 14px; + color: $gray; + } + + &__reviews { + display: flex; + margin: 16px; + margin-bottom: 0; + width: 166px; + justify-content: space-between; + + .reviews { + font-weight: 400; + font-size: $font-size-small; + line-height: 16px; + color: $secondary-color; + text-align: right; + } + } + + &__price { + display: flex; + width: 166px; + line-height: 18px; + justify-content: space-between; + margin: 24px 16px 0; + + .price { + font-size: $font-size-medium; + font-weight: 400; + color: $gray; + } + + .amount { + font-size: $font-size-extra-large; + font-weight: 700; + color: $secondary-color; + } + } + + .button { + box-sizing: border-box; + justify-content: center; + align-items: center; + display: flex; + width: 166px; + height: 40px; + margin: 16px; + border-color: $primary-color; + border-radius: 5px; + background: $primary-color; + transition: + background-color 300ms, + border 300ms; + + &__buy { + box-sizing: border-box; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + display: flex; + + text-decoration: none; + text-transform: uppercase; + color: white; + font-size: $font-size-large; + font-weight: 700; + transition: color 300ms; + + &:hover { + color: $primary-color; + } + } + + &:hover { + background-color: white; + border: 1px solid $primary-color; + } + } + + &:hover { + transform: scale(1.2); + } + + &:hover .card__title { + color: $title-hover; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..c47db8e4b0 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,73 @@ +@import '../utils/variables'; + +.header { + width: 100vw; + font-size: $font-size-medium; + font-weight: 500; + text-transform: uppercase; + background-color: white; + display: flex; + align-items: center; + justify-content: space-between; + + &__container { + display: flex; + justify-content: space-between; + align-items: center; + padding-right: 50px; + width: 100%; + + .logo__img { + display: flex; + padding-left: 50px; + width: 40px; + height: 40px; + } + + .nav { + display: flex; + + &__list { + display: flex; + margin: 0; + padding: 0; + list-style: none; + align-items: center; + } + + &__link.is-active { + margin-left: 0; + } + + &__link { + margin-left: 20px; + text-align: center; + display: flex; + line-height: 60px; + color: $secondary-color; + text-decoration: none; + transition: color 300ms; + + &:hover { + color: $primary-color; + } + } + } + } +} + +.is-active { + position: relative; + color: $primary-color; + text-decoration: none; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 4px; + background-color: $primary-color; + } +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..27261275bf --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,22 @@ +.stars { + display: flex; + border-radius: 0.5px; + + &__star { + height: 16px; + width: 16px; + background-image: url(../images/Star.svg); + background-position: center; + background-repeat: no-repeat; + margin-right: 4px; + } + + &--4 .stars__star:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); + background-position: center; + } + + &--4 .stars__star:last-child { + margin-right: 0; + } +} diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000000..e95e0d799f --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,228 @@ +.cards-container { + padding: 40px 50px; + --column-count: 1; + display: grid; + grid-template-columns: repeat(var(--column-count), 200px); + gap: 48px 46px; + justify-content: center; +} + +@media (min-width: 488px) { + .cards-container { + --column-count: 2; + } +} +@media (min-width: 768px) { + .cards-container { + --column-count: 3; + } +} +@media (min-width: 1024px) { + .cards-container { + --column-count: 4; + } +} +.card { + display: flex; + flex-direction: column; + width: 200px; + border: 1px solid #f3f3f3; + border-radius: 5px; + margin: 16px; + height: auto; + transition: transform 300ms, color 300ms; +} +.card__image { + display: flex; +} +.card__image .image { + width: 160px; + height: 134px; + margin: 32px 19px 0; + background-image: url(../images/imac.jpeg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} +.card__title { + margin: 40px 16px 0; + line-height: 18px; + height: 36px; + width: 166px; + font-weight: 500; + font-size: 12px; + color: #060b35; +} +.card__product-code { + margin-top: 4px; + padding: 0 16px; + width: 100%; + justify-content: center; + font-weight: 400; + font-size: 10px; + line-height: 14px; + color: #616070; +} +.card__reviews { + display: flex; + margin: 16px; + margin-bottom: 0; + width: 166px; + justify-content: space-between; +} +.card__reviews .reviews { + font-weight: 400; + font-size: 10px; + line-height: 16px; + color: #060b35; + text-align: right; +} +.card__price { + display: flex; + width: 166px; + line-height: 18px; + justify-content: space-between; + margin: 24px 16px 0; +} +.card__price .price { + font-size: 12px; + font-weight: 400; + color: #616070; +} +.card__price .amount { + font-size: 16px; + font-weight: 700; + color: #060b35; +} +.card .button { + box-sizing: border-box; + justify-content: center; + align-items: center; + display: flex; + width: 166px; + height: 40px; + margin: 16px; + border-color: #00acdc; + border-radius: 5px; + background: #00acdc; + transition: background-color 300ms, border 300ms; +} +.card .button__buy { + box-sizing: border-box; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + display: flex; + text-decoration: none; + text-transform: uppercase; + color: white; + font-size: 14px; + font-weight: 700; + transition: color 300ms; +} +.card .button__buy:hover { + color: #00acdc; +} +.card .button:hover { + background-color: white; + border: 1px solid #00acdc; +} +.card:hover { + transform: scale(1.2); +} +.card:hover .card__title { + color: #34568b; +} + +.header { + width: 100vw; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + background-color: white; + display: flex; + align-items: center; + justify-content: space-between; +} +.header__container { + display: flex; + justify-content: space-between; + align-items: center; + padding-right: 50px; + width: 100%; +} +.header__container .logo__img { + display: flex; + padding-left: 50px; + width: 40px; + height: 40px; +} +.header__container .nav { + display: flex; +} +.header__container .nav__list { + display: flex; + margin: 0; + padding: 0; + list-style: none; + align-items: center; +} +.header__container .nav__link.is-active { + margin-left: 0; +} +.header__container .nav__link { + margin-left: 20px; + text-align: center; + display: flex; + line-height: 60px; + color: #060b35; + text-decoration: none; + transition: color 300ms; +} +.header__container .nav__link:hover { + color: #00acdc; +} + +.is-active { + position: relative; + color: #00acdc; + text-decoration: none; +} +.is-active::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 4px; + background-color: #00acdc; +} + +.stars { + display: flex; + border-radius: 0.5px; +} +.stars__star { + height: 16px; + width: 16px; + background-image: url(../images/Star.svg); + background-position: center; + background-repeat: no-repeat; + margin-right: 4px; +} +.stars--4 .stars__star:nth-child(-n+4) { + background-image: url(../images/star-active.svg); + background-position: center; +} +.stars--4 .stars__star:last-child { + margin-right: 0; +} + +body { + margin: 0; + padding: 0; + font-family: "Roboto", sans-serif; +} + +/*# sourceMappingURL=index.css.map */ diff --git a/src/styles/index.css.map b/src/styles/index.css.map new file mode 100644 index 0000000000..b8282555fb --- /dev/null +++ b/src/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["blocks/card.scss","utils/variables.scss","blocks/header.scss","blocks/stars.scss","index.scss"],"names":[],"mappings":"AAEA;EACE;EAEA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,WCtDe;EDuDf,OC9Dc;;ADiEhB;EACE;EACA;EACA;EACA;EACA;EACA,WCjEc;EDkEd;EACA,OCvEG;;AD0EL;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,WC/EY;EDgFZ;EACA,OCvFY;EDwFZ;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,WC7Fa;ED8Fb;EACA,OCpGC;;ADuGH;EACE,WCjGkB;EDkGlB;EACA,OC5GY;;ADgHhB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cCzHY;ED0HZ;EACA,YC3HY;ED4HZ,YACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,WClIY;EDmIZ;EACA;;AAEA;EACE,OChJQ;;ADoJZ;EACE;EACA;;AAIJ;EACE;;AAGF;EACE,OC3JU;;;ACHd;EACE;EACA,WDKiB;ECJjB;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA,OD5CU;EC6CV;EACA;;AAEA;EACE,ODlDM;;;ACyDhB;EACE;EACA,OD3Dc;EC4Dd;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBDrEY;;;AEDhB;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;ACdJ;EACE;EACA;EAEA,aHKY","file":"index.css"} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..5696290335 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,11 @@ +@import './utils/variables'; +@import './blocks/card'; +@import './blocks/header'; +@import './blocks/stars'; + body { margin: 0; + padding: 0; + + font-family: $font-family; } diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..d029c055f7 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,15 @@ +// Colors +$primary-color: #00acdc; +$secondary-color: #060b35; +$light-gray: #f3f3f3; +$gray: #616070; +$title-hover: #34568b; + +// Font Sizes +$font-size-small: 10px; +$font-size-medium: 12px; +$font-size-large: 14px; +$font-size-extra-large: 16px; + +// Font Family +$font-family: 'Roboto', sans-serif; From 902dfc449667b641c19267257346dc5d89135008 Mon Sep 17 00:00:00 2001 From: Lucas Helfensteller Silva Date: Sat, 9 Nov 2024 19:01:10 +0100 Subject: [PATCH 2/3] add task solution --- readme.md | 18 +- src/index.html | 427 +++++++++++++++++++++++++++++++- src/styles/blocks/card.scss | 167 +++++++++++++ src/styles/blocks/header.scss | 80 ++++++ src/styles/blocks/stars.scss | 22 ++ src/styles/index.css | 262 ++++++++++++++++++++ src/styles/index.css.map | 1 + src/styles/index.scss | 8 + src/styles/utils/variables.scss | 15 ++ 9 files changed, 990 insertions(+), 10 deletions(-) create mode 100644 src/styles/blocks/card.scss create mode 100644 src/styles/blocks/header.scss create mode 100644 src/styles/blocks/stars.scss create mode 100644 src/styles/index.css create mode 100644 src/styles/index.css.map create mode 100644 src/styles/utils/variables.scss diff --git a/readme.md b/readme.md index 874ca70d97..4647faf357 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,14 +33,14 @@ 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://lucashel-design.github.io/layout_catalog/) +- [TEST REPORT LINK](https://lucashel-design.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. -- [ ] All components follow BEM and use SCSS -- [ ] Repeated sizes and special colors are put to variables -- [ ] Grid is used for the columns -- [ ] Cards are shown in 1, 2, 3, or 4 columns based on screen resolution -- [ ] All changes on `:hover` are smooth -- [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) +- [x] All components follow BEM and use SCSS +- [x] Repeated sizes and special colors are put to variables +- [x] Grid is used for the columns +- [x] Cards are shown in 1, 2, 3, or 4 columns based on screen resolution +- [x] All changes on `:hover` are smooth +- [x] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) diff --git a/src/index.html b/src/index.html index 9cff78eeb7..903dc69813 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,431 @@ -

Catalog

+
+
+ + + +
+
+ +
+
+
+ +
+ +
+ 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 (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ +
+ + Buy + +
+
+
+
+ +
+ +
+ 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 (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ +
+ + Buy + +
+
+
+
+ +
+ +
+ 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 (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ +
+ + Buy + +
+
+
+
+ +
+ +
+ 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 (MNED2UA/A) +
+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+
+
+
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ +
+ + Buy + +
+
+
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..d01ff4a772 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,167 @@ +@import '../utils/variables'; + +.cards-container { + box-sizing: border-box; + padding: 40px 50px; + + --column-count: 1; + + display: grid; + grid-template-columns: repeat(var(--column-count), 200px); + gap: 48px 46px; + justify-content: center; + align-items: center; +} + +@media (min-width: 488px) { + .cards-container { + --column-count: 2; + } +} + +@media (min-width: 768px) { + .cards-container { + --column-count: 3; + } +} + +@media (min-width: 1024px) { + .cards-container { + --column-count: 4; + } +} + +.card { + box-sizing: border-box; + display: flex; + flex-direction: column; + width: 200px; + border: 1px solid $light-gray; + border-radius: 5px; + margin: 16px; + height: auto; + transition: + transform 300ms, + color 300ms; + + &__image { + display: flex; + + .image { + width: 160px; + height: 134px; + margin: 32px 19px 0; + + background-image: url(../images/imac.jpeg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } + } + + &__title { + margin: 40px 16px 0; + line-height: 18px; + height: 36px; + width: 166px; + font-weight: 500; + font-size: $font-size-medium; + color: $secondary-color; + } + + &__product-code { + margin-top: 4px; + padding: 0 16px; + width: 100%; + justify-content: center; + font-weight: 400; + font-size: $font-size-small; + line-height: 14px; + color: $gray; + } + + &__reviews { + display: flex; + margin: 16px; + margin-bottom: 0; + width: 166px; + justify-content: space-between; + + .reviews { + font-weight: 400; + font-size: $font-size-small; + line-height: 16px; + color: $secondary-color; + text-align: right; + } + } + + &__price { + display: flex; + width: 166px; + line-height: 18px; + justify-content: space-between; + margin: 24px 16px 0; + + .price { + font-size: $font-size-medium; + font-weight: 400; + color: $gray; + } + + .amount { + font-size: $font-size-extra-large; + font-weight: 700; + color: $secondary-color; + } + } + + .button { + box-sizing: border-box; + justify-content: center; + align-items: center; + display: flex; + width: 166px; + height: 40px; + margin: 16px; + border-color: $primary-color; + border-radius: 5px; + background: $primary-color; + transition: + background-color 300ms, + border 300ms; + + &__buy { + box-sizing: border-box; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + display: flex; + + text-decoration: none; + text-transform: uppercase; + color: white; + font-size: $font-size-large; + font-weight: 700; + transition: color 300ms; + + &:hover { + color: $primary-color; + } + } + + &:hover { + background-color: white; + border: 1px solid $primary-color; + } + } + + &:hover { + transform: scale(1.2); + } + + &:hover .card__title { + color: $title-hover; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..2978101cbb --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,80 @@ +@import '../utils/variables'; + +.header { + width: 100vw; + font-size: $font-size-medium; + font-weight: 500; + text-transform: uppercase; + background-color: white; + display: flex; + align-items: center; + justify-content: space-between; + + &__container { + display: flex; + justify-content: space-between; + align-items: center; + padding-right: 50px; + width: 100%; + box-shadow: 0 2px 4px 0 #0000000d; + + .logo__img { + display: flex; + padding-left: 50px; + width: 40px; + height: 40px; + } + + .nav { + display: flex; + + &__list { + display: flex; + margin: 0; + padding: 0; + list-style: none; + align-items: center; + } + + &__link.is-active { + margin-left: 0; + text-align: center; + display: flex; + line-height: 60px; + color: $primary-color; + text-decoration: none; + transition: color 300ms; + } + + &__link { + margin-left: 20px; + text-align: center; + display: flex; + line-height: 60px; + color: $secondary-color; + text-decoration: none; + transition: color 300ms; + + &:hover { + color: $primary-color; + } + } + } + } +} + +.is-active { + position: relative; + color: $primary-color; + text-decoration: none; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 4px; + background-color: $primary-color; + } +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..27261275bf --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,22 @@ +.stars { + display: flex; + border-radius: 0.5px; + + &__star { + height: 16px; + width: 16px; + background-image: url(../images/Star.svg); + background-position: center; + background-repeat: no-repeat; + margin-right: 4px; + } + + &--4 .stars__star:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); + background-position: center; + } + + &--4 .stars__star:last-child { + margin-right: 0; + } +} diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000000..6054fd4535 --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,262 @@ +.cards-container { + padding: 40px 50px; + + --column-count: 1; + + display: grid; + grid-template-columns: repeat(var(--column-count), 200px); + gap: 48px 46px; + justify-content: center; +} + +@media (min-width: 488px) { + .cards-container { + --column-count: 2; + } +} + +@media (min-width: 768px) { + .cards-container { + --column-count: 3; + } +} + +@media (min-width: 1024px) { + .cards-container { + --column-count: 4; + } +} + +.card { + box-sizing: border-box; + display: flex; + flex-direction: column; + width: 200px; + border: 1px solid #f3f3f3; + border-radius: 5px; + margin: 16px; + height: auto; + transition: + transform 300ms, + color 300ms; +} + +.card__image { + display: flex; +} + +.card__image .image { + width: 160px; + height: 134px; + margin: 32px 19px 0; + background-image: url(../images/imac.jpeg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} + +.card__title { + margin: 40px 16px 0; + line-height: 18px; + height: 36px; + width: 166px; + font-weight: 500; + font-size: 12px; + color: #060b35; +} + +.card__product-code { + margin-top: 4px; + padding: 0 16px; + width: 100%; + justify-content: center; + font-weight: 400; + font-size: 10px; + line-height: 14px; + color: #616070; +} + +.card__reviews { + display: flex; + margin: 16px; + margin-bottom: 0; + width: 166px; + justify-content: space-between; +} + +.card__reviews .reviews { + font-weight: 400; + font-size: 10px; + line-height: 16px; + color: #060b35; + text-align: right; +} + +.card__price { + display: flex; + width: 166px; + line-height: 18px; + justify-content: space-between; + margin: 24px 16px 0; +} + +.card__price .price { + font-size: 12px; + font-weight: 400; + color: #616070; +} + +.card__price .amount { + font-size: 16px; + font-weight: 700; + color: #060b35; +} + +.card .button { + box-sizing: border-box; + justify-content: center; + align-items: center; + display: flex; + width: 166px; + height: 40px; + margin: 16px; + border-color: #00acdc; + border-radius: 5px; + background: #00acdc; + transition: + background-color 300ms, + border 300ms; +} + +.card .button__buy { + box-sizing: border-box; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + display: flex; + text-decoration: none; + text-transform: uppercase; + color: white; + font-size: 14px; + font-weight: 700; + transition: color 300ms; +} + +.card .button__buy:hover { + color: #00acdc; +} + +.card .button:hover { + background-color: white; + border: 1px solid #00acdc; +} + +.card:hover { + transform: scale(1.2); +} + +.card:hover .card__title { + color: #34568b; +} + +.header { + width: 100vw; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + background-color: white; + display: flex; + align-items: center; + justify-content: space-between; +} + +.header__container { + display: flex; + justify-content: space-between; + align-items: center; + padding-right: 50px; + width: 100%; +} + +.header__container .logo__img { + display: flex; + padding-left: 50px; + width: 40px; + height: 40px; +} + +.header__container .nav { + display: flex; +} + +.header__container .nav__list { + display: flex; + margin: 0; + padding: 0; + list-style: none; + align-items: center; +} + +.header__container .nav__link.is-active { + margin-left: 0; +} + +.header__container .nav__link { + margin-left: 20px; + text-align: center; + display: flex; + line-height: 60px; + color: #060b35; + text-decoration: none; + transition: color 300ms; +} + +.header__container .nav__link:hover { + color: #00acdc; +} + +.is-active { + position: relative; + color: #00acdc; + text-decoration: none; +} + +.is-active::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 4px; + background-color: #00acdc; +} + +.stars { + display: flex; + border-radius: 0.5px; +} + +.stars__star { + height: 16px; + width: 16px; + background-image: url(../images/Star.svg); + background-position: center; + background-repeat: no-repeat; + margin-right: 4px; +} + +.stars--4 .stars__star:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); + background-position: center; +} + +.stars--4 .stars__star:last-child { + margin-right: 0; +} + +body { + margin: 0; + padding: 0; + font-family: Roboto, sans-serif; +} diff --git a/src/styles/index.css.map b/src/styles/index.css.map new file mode 100644 index 0000000000..32c61aff04 --- /dev/null +++ b/src/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["blocks/card.scss","utils/variables.scss","blocks/header.scss","blocks/stars.scss","index.scss"],"names":[],"mappings":"AAEA;EACE;EAEA;EAEA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,WCxDe;EDyDf,OChEc;;ADmEhB;EACE;EACA;EACA;EACA;EACA;EACA,WCnEc;EDoEd;EACA,OCzEG;;AD4EL;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,WCjFY;EDkFZ;EACA,OCzFY;ED0FZ;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,WC/Fa;EDgGb;EACA,OCtGC;;ADyGH;EACE,WCnGkB;EDoGlB;EACA,OC9GY;;ADkHhB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cC3HY;ED4HZ;EACA,YC7HY;ED8HZ,YACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,WCpIY;EDqIZ;EACA;;AAEA;EACE,OClJQ;;ADsJZ;EACE;EACA;;AAIJ;EACE;;AAGF;EACE,OC7JU;;;ACHd;EACE;EACA,WDKiB;ECJjB;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA,OD5CU;EC6CV;EACA;;AAEA;EACE,ODlDM;;;ACyDhB;EACE;EACA,OD3Dc;EC4Dd;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBDrEY;;;AEDhB;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;ACdJ;EACE;EACA;EAEA,aHKY","file":"index.css"} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..5696290335 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,11 @@ +@import './utils/variables'; +@import './blocks/card'; +@import './blocks/header'; +@import './blocks/stars'; + body { margin: 0; + padding: 0; + + font-family: $font-family; } diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..d029c055f7 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,15 @@ +// Colors +$primary-color: #00acdc; +$secondary-color: #060b35; +$light-gray: #f3f3f3; +$gray: #616070; +$title-hover: #34568b; + +// Font Sizes +$font-size-small: 10px; +$font-size-medium: 12px; +$font-size-large: 14px; +$font-size-extra-large: 16px; + +// Font Family +$font-family: 'Roboto', sans-serif; From c490fe33643da18cb93c0d4883601743be1a7a97 Mon Sep 17 00:00:00 2001 From: Lucas Helfensteller Silva Date: Sat, 9 Nov 2024 19:03:27 +0100 Subject: [PATCH 3/3] Resolve merge conflicts --- .github/workflows/test.yml-template | 29 ++++ package-lock.json | 197 ++++++++++++++++++---------- package.json | 2 +- 3 files changed, 161 insertions(+), 67 deletions(-) create mode 100644 .github/workflows/test.yml-template 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..85d34d3009 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": "^1.9.12", "@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": "1.9.12", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", + "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", @@ -4877,10 +4878,11 @@ } }, "node_modules/body-parser": { - "version": "1.20.2", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz", - "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==", + "version": "1.20.3", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", + "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==", "dev": true, + "license": "MIT", "dependencies": { "bytes": "3.1.2", "content-type": "~1.0.5", @@ -4890,7 +4892,7 @@ "http-errors": "2.0.0", "iconv-lite": "0.4.24", "on-finished": "2.4.1", - "qs": "6.11.0", + "qs": "6.13.0", "raw-body": "2.5.2", "type-is": "~1.6.18", "unpipe": "1.0.0" @@ -4905,6 +4907,7 @@ "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "dev": true, + "license": "MIT", "dependencies": { "ms": "2.0.0" } @@ -4913,7 +4916,8 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/boolbase": { "version": "1.0.0", @@ -5037,6 +5041,7 @@ "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -5046,6 +5051,7 @@ "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", "dev": true, + "license": "MIT", "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", @@ -5368,6 +5374,7 @@ "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz", "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -5379,10 +5386,11 @@ "dev": true }, "node_modules/cookie": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", - "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz", + "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -5755,6 +5763,7 @@ "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", "dev": true, + "license": "MIT", "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", @@ -5786,6 +5795,7 @@ "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -5801,6 +5811,7 @@ "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.8", "npm": "1.2.8000 || >= 1.4.16" @@ -5967,7 +5978,8 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/electron-to-chromium": { "version": "1.4.832", @@ -5994,10 +6006,11 @@ "dev": true }, "node_modules/encodeurl": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", + "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -6046,6 +6059,7 @@ "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", "dev": true, + "license": "MIT", "dependencies": { "get-intrinsic": "^1.2.4" }, @@ -6058,6 +6072,7 @@ "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.4" } @@ -6075,7 +6090,8 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/escape-string-regexp": { "version": "1.0.5", @@ -6143,6 +6159,7 @@ "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -6196,37 +6213,38 @@ } }, "node_modules/express": { - "version": "4.19.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", - "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==", + "version": "4.21.1", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz", + "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==", "dev": true, + "license": "MIT", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.2", + "body-parser": "1.20.3", "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.6.0", + "cookie": "0.7.1", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "finalhandler": "1.2.0", + "finalhandler": "1.3.1", "fresh": "0.5.2", "http-errors": "2.0.0", - "merge-descriptors": "1.0.1", + "merge-descriptors": "1.0.3", "methods": "~1.1.2", "on-finished": "2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.7", + "path-to-regexp": "0.1.10", "proxy-addr": "~2.0.7", - "qs": "6.11.0", + "qs": "6.13.0", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", - "send": "0.18.0", - "serve-static": "1.15.0", + "send": "0.19.0", + "serve-static": "1.16.2", "setprototypeof": "1.2.0", "statuses": "2.0.1", "type-is": "~1.6.18", @@ -6253,10 +6271,11 @@ "dev": true }, "node_modules/express/node_modules/path-to-regexp": { - "version": "0.1.7", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", - "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==", - "dev": true + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", + "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==", + "dev": true, + "license": "MIT" }, "node_modules/external-editor": { "version": "3.1.0", @@ -6423,13 +6442,14 @@ } }, "node_modules/finalhandler": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", - "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz", + "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==", "dev": true, + "license": "MIT", "dependencies": { "debug": "2.6.9", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "on-finished": "2.4.1", "parseurl": "~1.3.3", @@ -6445,6 +6465,7 @@ "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "dev": true, + "license": "MIT", "dependencies": { "ms": "2.0.0" } @@ -6453,7 +6474,8 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/find-up": { "version": "4.1.0", @@ -6501,6 +6523,7 @@ "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -6572,6 +6595,7 @@ "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", "dev": true, + "license": "MIT", "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2", @@ -6759,6 +6783,7 @@ "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", "dev": true, + "license": "MIT", "dependencies": { "get-intrinsic": "^1.1.3" }, @@ -6795,6 +6820,7 @@ "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", "dev": true, + "license": "MIT", "dependencies": { "es-define-property": "^1.0.0" }, @@ -6807,6 +6833,7 @@ "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.4" }, @@ -6819,6 +6846,7 @@ "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.4" }, @@ -7001,6 +7029,7 @@ "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", "dev": true, + "license": "MIT", "dependencies": { "depd": "2.0.0", "inherits": "2.0.4", @@ -8632,6 +8661,7 @@ "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -8675,10 +8705,14 @@ } }, "node_modules/merge-descriptors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", - "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==", - "dev": true + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz", + "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } }, "node_modules/merge-stream": { "version": "2.0.0", @@ -8705,10 +8739,11 @@ } }, "node_modules/micromatch": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz", - "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, + "license": "MIT", "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" @@ -8722,6 +8757,7 @@ "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", "dev": true, + "license": "MIT", "bin": { "mime": "cli.js" }, @@ -9105,10 +9141,11 @@ } }, "node_modules/object-inspect": { - "version": "1.13.2", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz", - "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==", + "version": "1.13.3", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz", + "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.4" }, @@ -9121,6 +9158,7 @@ "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", "dev": true, + "license": "MIT", "dependencies": { "ee-first": "1.1.1" }, @@ -9436,6 +9474,7 @@ "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -9484,10 +9523,11 @@ "dev": true }, "node_modules/path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz", + "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==", "dev": true, + "license": "MIT", "dependencies": { "isarray": "0.0.1" } @@ -10028,12 +10068,13 @@ ] }, "node_modules/qs": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", - "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", + "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", "dev": true, + "license": "BSD-3-Clause", "dependencies": { - "side-channel": "^1.0.4" + "side-channel": "^1.0.6" }, "engines": { "node": ">=0.6" @@ -10082,6 +10123,7 @@ "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -10091,6 +10133,7 @@ "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz", "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==", "dev": true, + "license": "MIT", "dependencies": { "bytes": "3.1.2", "http-errors": "2.0.0", @@ -10448,10 +10491,11 @@ } }, "node_modules/send": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", - "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==", + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz", + "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==", "dev": true, + "license": "MIT", "dependencies": { "debug": "2.6.9", "depd": "2.0.0", @@ -10476,6 +10520,7 @@ "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "dev": true, + "license": "MIT", "dependencies": { "ms": "2.0.0" } @@ -10484,24 +10529,37 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", - "dev": true + "dev": true, + "license": "MIT" + }, + "node_modules/send/node_modules/encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } }, "node_modules/send/node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/serve-static": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz", - "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==", + "version": "1.16.2", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz", + "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==", "dev": true, + "license": "MIT", "dependencies": { - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", - "send": "0.18.0" + "send": "0.19.0" }, "engines": { "node": ">= 0.8.0" @@ -10512,6 +10570,7 @@ "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", "dev": true, + "license": "MIT", "dependencies": { "define-data-property": "^1.1.4", "es-errors": "^1.3.0", @@ -10528,7 +10587,8 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", - "dev": true + "dev": true, + "license": "ISC" }, "node_modules/shebang-command": { "version": "2.0.0", @@ -10556,6 +10616,7 @@ "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz", "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==", "dev": true, + "license": "MIT", "dependencies": { "call-bind": "^1.0.7", "es-errors": "^1.3.0", @@ -10804,6 +10865,7 @@ "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -11363,6 +11425,7 @@ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", "dev": true, + "license": "MIT", "engines": { "node": ">=0.6" } @@ -11423,6 +11486,7 @@ "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", "dev": true, + "license": "MIT", "dependencies": { "media-typer": "0.3.0", "mime-types": "~2.1.24" @@ -11477,6 +11541,7 @@ "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.8" } diff --git a/package.json b/package.json index 34398805fa..e25ee5cdde 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": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "backstopjs": "6.3.23",