diff --git a/readme.md b/readme.md index 874ca70d97..3a3e5d02ab 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://GuilhermeSant.github.io/layout_catalog/) +- [TEST REPORT LINK](https://GuilhermeSant.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/images/star-active.svg b/src/images/star-active.svg index c51c30cc8e..38207ebb6e 100644 --- a/src/images/star-active.svg +++ b/src/images/star-active.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/src/images/star.svg b/src/images/star.svg index 3dddf87dcc..4860725347 100644 --- a/src/images/star.svg +++ b/src/images/star.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/src/index.html b/src/index.html index 9cff78eeb7..1cb2b23329 100644 --- a/src/index.html +++ b/src/index.html @@ -17,11 +17,256 @@ /> - -

Catalog

+
+ + + + + +
+ +
+
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+ + +
+
+
+
+
+
+
Reviews: 5
+
+ + +
+
Price:
+
$2,199
+
+ + + +
+
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+ + +
+
+
+
+
+
+
Reviews: 5
+
+ + +
+
Price:
+
$2,199
+
+ + + +
+
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+ + +
+
+
+
+
+
+
Reviews: 5
+
+ + +
+
Price:
+
$2,199
+
+ + + +
+
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+ + +
+
+
+
+
+
+
Reviews: 5
+
+ + +
+
Price:
+
$2,199
+
+ + + +
+
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+ + +
+
+
+
+
+
+
Reviews: 5
+
+ + +
+
Price:
+
$2,199
+
+ + + +
+
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+ + +
+
+
+
+
+
+
Reviews: 5
+
+ + +
+
Price:
+
$2,199
+
+ + + +
+
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+ + +
+
+
+
+
+
+
Reviews: 5
+
+ + +
+
Price:
+
$2,199
+
+ + + +
+
+ +
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +
+
Product code: 195434
+ + +
+
+
+
+
+
+
Reviews: 5
+
+ + +
+
Price:
+
$2,199
+
+ + + +
+
diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..22bd22108f 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1 @@ -'use strict'; +'use strict'; diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..c90f03af69 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,98 @@ +.card { + @include smooth; + + border: solid 1px #f3f3f3; + width: $card-width; + height: $card-height; + + background-image: url($prod-img-source); + background-position-y: 32px; + background-position-x: 19px; + background-size: $prod-img-size; + background-repeat: no-repeat; + + &__text { + @include smooth; + + line-height: 18px; + font-size: $font-size-default; + font-weight: 500; + color: #060b35; + + margin-top: 206px; + padding: 0 16px; + } + + &__prod-code { + color: #616070; + font-size: 10px; + padding: 4px 16px; + } + + &__reviews { + display: flex; + flex-direction: row; + justify-content: space-between; + + margin-top: 16px; + padding: 0 16px; + + &-text { + font-size: 10px; + font-weight: 400; + line-height: 14px; + + margin-left: 17px; + } + } + + &__price { + font-size: $font-size-default; + font-weight: 400; + line-height: 18px; + color: #616070; + + margin-top: 24px; + padding: 0 16px; + display: flex; + flex-direction: row; + + &-value { + margin-left: 85px; + font-weight: 700; + font-size: 16px; + color: #000; + } + } + + &__button-buy { + @include smooth; + + width: $button-width; + height: $button-height; + + border-width: 0; + border-radius: 5px; + background-color: $button-color; + margin: 16px; + + color: $button-font-color; + font-size: 14px; + font-weight: 700; + text-align: center; + + &:hover { + background-color: $button-color--hover; + color: $button-font-color--hover; + border: solid 1px #00acdc; + } + } + + &:hover { + transform: scale(1.2); + } + + &:hover &__text { + color: #34568b; + } +} diff --git a/src/styles/blocks/catalog.scss b/src/styles/blocks/catalog.scss new file mode 100644 index 0000000000..a1c315c0bc --- /dev/null +++ b/src/styles/blocks/catalog.scss @@ -0,0 +1,40 @@ +.catalog { + padding: 50px 40px; + + display: grid; + grid-template-columns: repeat($column-count, $column-width); + justify-content: center; + gap: 46px 48px; + + @media (max-width: 487px) { + & { + $column-count: 1; + + grid-template-columns: repeat($column-count, $column-width); + } + } + + @media (min-width: 488px) { + & { + $column-count: 2; + + grid-template-columns: repeat($column-count, $column-width); + } + } + + @media (min-width: 768px) { + & { + $column-count: 3; + + grid-template-columns: repeat($column-count, $column-width); + } + } + + @media (min-width: 1024px) { + & { + $column-count: 4; + + grid-template-columns: repeat($column-count, 200px); + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..125009b558 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,68 @@ +.header { + display: flex; + align-items: center; + justify-content: end; + flex-direction: row; + background-color: #fff; + box-sizing: border-box; + width: 100%; + height: 60px; + + &__logo { + width: 40px; + height: 40px; + padding-top: 10px; + padding-left: 50px; + } + + &__nav { + display: flex; + flex-direction: row; + padding-right: 50px; + margin-left: 243px; + + @media (min-width: 1200px) { + & { + margin-left: 419px; + } + } + + &-link { + @include smooth; + + color: #060b35; + text-transform: uppercase; + font-size: 12px; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + position: relative; + padding: 22.5px 0; + margin-right: 20px; + + &:hover { + color: #00acdc; + } + + &:nth-child(4) { + color: #00acdc; + } + } + } +} + +.is-active { + color: #00acdc; + + &::after { + position: absolute; + content: ''; + display: block; + height: 4px; + width: 100%; + background-color: #00acdc; + bottom: 0; + border-radius: 8px; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..96c37e71a0 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,7 @@ +html { + font-family: Roboto, sans-serif; +} + +body { + margin: 0; +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..b21f81e84e --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,11 @@ +.card__reviews-star { + background-image: url(../images/star-active.svg); + width: 16px; + height: 16px; + background-position: initial; + background-repeat: no-repeat; +} + +.card__reviews-star:nth-child(n + 5) { + background-image: url(../images/star.svg); +} diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 293d3b1f13..0000000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -} diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 0000000000..a59bcb1dfb --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,189 @@ +.catalog { + padding: 50px 40px; + display: grid; + grid-template-columns: repeat(1, 200px); + justify-content: center; + gap: 46px 48px; +} +@media (max-width: 487px) { + .catalog { + grid-template-columns: repeat(1, 200px); + } +} +@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 { + transition: all 300ms ease-in-out; + border: solid 1px #f3f3f3; + width: 200px; + height: 408px; + background-image: url("../images/imac.jpeg"); + background-position-y: 32px; + background-position-x: 19px; + background-size: 160px, 134px; + background-repeat: no-repeat; +} +.card__text { + transition: all 300ms ease-in-out; + line-height: 18px; + font-size: 12px; + font-weight: 500; + color: #060b35; + margin-top: 206px; + padding: 0 16px; +} +.card__prod-code { + color: #616070; + font-size: 10px; + padding: 4px 16px; +} +.card__reviews { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 16px; + padding: 0 16px; +} +.card__reviews-text { + font-size: 10px; + font-weight: 400; + line-height: 14px; + margin-left: 17px; +} +.card__price { + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: #616070; + margin-top: 24px; + padding: 0 16px; + display: flex; + flex-direction: row; +} +.card__price-value { + margin-left: 85px; + font-weight: 700; + font-size: 16px; + color: #000; +} +.card__button-buy { + transition: all 300ms ease-in-out; + width: 166px; + height: 40px; + border-width: 0; + border-radius: 5px; + background-color: #00acdc; + margin: 16px; + color: #fff; + font-size: 14px; + font-weight: 700; + text-align: center; +} +.card__button-buy:hover { + background-color: #fff; + color: #00acdc; + border: solid 1px #00acdc; +} +.card:hover { + transform: scale(1.2); +} +.card:hover .card__text { + color: #34568b; +} + +.card__reviews-star { + background-image: url(../images/star-active.svg); + width: 16px; + height: 16px; + background-position: initial; + background-repeat: no-repeat; +} + +.card__reviews-star:nth-child(n+5) { + background-image: url(../images/star.svg); +} + +html { + font-family: Roboto, sans-serif; +} + +body { + margin: 0; +} + +.header { + display: flex; + align-items: center; + justify-content: end; + flex-direction: row; + background-color: #fff; + box-sizing: border-box; + width: 100%; + height: 60px; +} +.header__logo { + width: 40px; + height: 40px; + padding-top: 10px; + padding-left: 50px; +} +.header__nav { + display: flex; + flex-direction: row; + padding-right: 50px; + margin-left: 243px; +} +@media (min-width: 1200px) { + .header__nav { + margin-left: 419px; + } +} +.header__nav-link { + transition: all 300ms ease-in-out; + color: #060b35; + text-transform: uppercase; + font-size: 12px; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + position: relative; + padding: 22.5px 0; + margin-right: 20px; +} +.header__nav-link:hover { + color: #00acdc; +} +.header__nav-link:nth-child(4) { + color: #00acdc; +} + +.is-active { + color: #00acdc; +} +.is-active::after { + position: absolute; + content: ""; + display: block; + height: 4px; + width: 100%; + background-color: #00acdc; + bottom: 0; + border-radius: 8px; +} + +/*# sourceMappingURL=main.css.map */ diff --git a/src/styles/main.css.map b/src/styles/main.css.map new file mode 100644 index 0000000000..f34e415112 --- /dev/null +++ b/src/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["blocks/catalog.scss","blocks/card.scss","utils/mixin.scss","utils/variables.scss","blocks/stars.scss","blocks/page.scss","blocks/header.scss"],"names":[],"mappings":"AAAA;EACE;EAEA;EACA;EACA;EACA;;AAEA;EACE;IAGE;;;AAIJ;EACE;IAGE;;;AAIJ;EACE;IAGE;;;AAIJ;EACE;IAGE;;;;ACpCN;ECCE;EDEA;EACA,OEHW;EFIX,QEHY;EFKZ;EACA;EACA;EACA,iBENc;EFOd;;AAEA;ECZA;EDeE;EACA,WEZgB;EFahB;EACA;EAEA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAIJ;EACE,WE5CgB;EF6ChB;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EClEA;EDqEE,OEhEW;EFiEX,QEhEY;EFkEZ;EACA;EACA,kBEnEW;EFoEX;EAEA,OErEgB;EFsEhB;EACA;EACA;;AAEA;EACE,kBE1EgB;EF2EhB,OE1EqB;EF2ErB;;AAIJ;EACE;;AAGF;EACE;;;AG/FJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;ACTF;EACE;;;AAGF;EACE;;;ACLF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;IACE;;;AAIJ;EJ5BF;EI+BI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000000..b0a2e889b9 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,7 @@ +@import './utils/variables'; +@import './utils/mixin'; +@import './blocks/catalog'; +@import './blocks/card'; +@import './blocks/stars'; +@import './blocks/page'; +@import './blocks/header'; diff --git a/src/styles/utils/mixin.scss b/src/styles/utils/mixin.scss new file mode 100644 index 0000000000..d1aec9e1d1 --- /dev/null +++ b/src/styles/utils/mixin.scss @@ -0,0 +1,3 @@ +@mixin smooth { + transition: all 300ms ease-in-out; +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..df9672437c --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,16 @@ +// card block variables +$card-width: 200px; +$card-height: 408px; +$prod-img-source: '../images/imac.jpeg'; +$prod-img-size: 160px, 134px; +$font-size-default: 12px; +$button-width: 166px; +$button-height: 40px; +$button-color: #00acdc; +$button-font-color: #fff; +$button-color--hover: #fff; +$button-font-color--hover: #00acdc; + +// grid container variables +$column-count: 1; +$column-width: 200px;