diff --git a/dist/imac.202c52ff.jpeg b/dist/imac.202c52ff.jpeg new file mode 100644 index 0000000000..c282f7c494 Binary files /dev/null and b/dist/imac.202c52ff.jpeg differ diff --git a/dist/index.05cfb865.css b/dist/index.05cfb865.css new file mode 100644 index 0000000000..12e61c2331 --- /dev/null +++ b/dist/index.05cfb865.css @@ -0,0 +1,2 @@ +.header{box-sizing:border-box;background-color:#fff;justify-content:space-between;align-items:center;padding:0 50px;font-weight:500;display:flex}.logo{width:40px;height:40px}.nav__list{margin:0;padding:0;list-style:none;display:flex}.nav__item{margin-right:20px}.nav__link{color:#060b35;text-transform:uppercase;text-align:center;font-family:Roboto,sans-serif;font-size:12px;font-weight:500;line-height:60px;text-decoration:none;display:block}.nav__link.is-active{color:#00acdc;position:relative}.nav__list:first-child{margin-left:0}.nav__list:last-child{margin-right:0}.nav__link:hover{color:#00acdc}.is-active:after{content:"";background-color:#00acdc;border-radius:8px;width:100%;height:4px;position:absolute;bottom:0;left:0}.stars{display:flex}.stars__star{background-image:url(star.822d561e.svg);background-position:50%;background-repeat:no-repeat;border-radius:.5px;gap:4px;width:16px;height:16px;margin-right:4px}.stars__star:nth-child(-n+4){background-image:url(star-active.edda4c43.svg)}.catalog{justify-content:center;align-items:center;gap:46px 48px;padding:50px 40px;display:grid}@media (width>=488px){.catalog{grid-template-columns:repeat(2,200px)}}@media (width>=768px){.catalog{grid-template-columns:repeat(3,200px)}}@media (width>=1024px){.catalog{grid-template-columns:repeat(4,200px)}}body{margin:0;font-family:Roboto,sans-serif}.product-card{box-sizing:border-box;background-color:#fff;background-position:50%;border:1px solid #f3f3f3;border-radius:5px;width:200px;padding:32px 16px 16px;transition:transform .3s ease-in-out}.product-card:hover{z-index:10;transform:scale(1.2)}.product-card__image{background-position:50%;background-size:cover;width:160px;height:134px;margin:0 auto 40px;display:block}.product-card__title{color:#060b35;margin-bottom:4px;font-size:12px;font-weight:500;line-height:18px;display:flex}.product-card__title:hover{color:#34568b}.product-card__description{color:#616070;margin:0 0 16px;font-size:10px;line-height:14px}.mark{justify-content:space-between;align-items:center;height:16px;margin-bottom:24px;display:flex}.mark__reviews{text-align:right;color:#060b35;font-size:10px;font-weight:400;line-height:14px}.price{justify-content:space-between;margin-bottom:16px;display:flex}.price__word{text-align:left;color:#616070;margin:0;font-size:12px;font-weight:400;line-height:18px}.price__numeric{text-align:right;color:#060b35;margin:0;font-size:16px;font-weight:700;line-height:18px}.bottom{text-align:center;color:#fff;background-color:#00acdc;border-radius:5px;padding:12px;font-size:14px;font-weight:700;line-height:16px;text-decoration:none;display:block}.bottom:hover{text-align:center;color:#00acdc;box-sizing:border-box;background-color:#fff;border:1px solid #00acdc;border-radius:5px;padding:12px;font-size:14px;font-weight:700;line-height:16px;text-decoration:none;display:block;position:relative} +/*# sourceMappingURL=index.05cfb865.css.map */ diff --git a/dist/index.05cfb865.css.map b/dist/index.05cfb865.css.map new file mode 100644 index 0000000000..f3c98afe87 --- /dev/null +++ b/dist/index.05cfb865.css.map @@ -0,0 +1 @@ +{"mappings":"ACAA,iJAUA,6BAKA,2DAOA,6BAIA,qLAYA,qDAKA,qCAIA,qCAIA,+BAIA,+HCvDA,oBAGE,6LAUE,6FCbJ,gGAOE,sBAPF,gDAWE,sBAXF,gDAeE,uBAfF,gDCKA,4CAKA,qMAUE,oDAKA,6HASA,kHAQE,yCAKF,yFAQF,mGAOE,8FASF,qEAKE,oGASA,wGAUF,gLAYE","sources":["index.05cfb865.css","src/styles/header.scss","src/styles/stars.scss","src/styles/grid.scss","src/styles/index.scss"],"sourcesContent":[".header {\n box-sizing: border-box;\n background-color: #fff;\n justify-content: space-between;\n align-items: center;\n padding: 0 50px;\n font-weight: 500;\n display: flex;\n}\n\n.logo {\n width: 40px;\n height: 40px;\n}\n\n.nav__list {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n}\n\n.nav__item {\n margin-right: 20px;\n}\n\n.nav__link {\n color: #060b35;\n text-transform: uppercase;\n text-align: center;\n font-family: Roboto, sans-serif;\n font-size: 12px;\n font-weight: 500;\n line-height: 60px;\n text-decoration: none;\n display: block;\n}\n\n.nav__link.is-active {\n color: #00acdc;\n position: relative;\n}\n\n.nav__list:first-child {\n margin-left: 0;\n}\n\n.nav__list:last-child {\n margin-right: 0;\n}\n\n.nav__link:hover {\n color: #00acdc;\n}\n\n.is-active:after {\n content: \"\";\n background-color: #00acdc;\n border-radius: 8px;\n width: 100%;\n height: 4px;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n\n.stars {\n display: flex;\n}\n\n.stars__star {\n background-image: url(\"star.822d561e.svg\");\n background-position: 50%;\n background-repeat: no-repeat;\n border-radius: .5px;\n gap: 4px;\n width: 16px;\n height: 16px;\n margin-right: 4px;\n}\n\n.stars__star:nth-child(-n+4) {\n background-image: url(\"star-active.edda4c43.svg\");\n}\n\n.catalog {\n justify-content: center;\n align-items: center;\n gap: 46px 48px;\n padding: 50px 40px;\n display: grid;\n}\n\n@media (width >= 488px) {\n .catalog {\n grid-template-columns: repeat(2, 200px);\n }\n}\n\n@media (width >= 768px) {\n .catalog {\n grid-template-columns: repeat(3, 200px);\n }\n}\n\n@media (width >= 1024px) {\n .catalog {\n grid-template-columns: repeat(4, 200px);\n }\n}\n\nbody {\n margin: 0;\n font-family: Roboto, sans-serif;\n}\n\n.product-card {\n box-sizing: border-box;\n background-color: #fff;\n background-position: center;\n border: 1px solid #f3f3f3;\n border-radius: 5px;\n width: 200px;\n padding: 32px 16px 16px;\n transition: transform .3s ease-in-out;\n}\n\n.product-card:hover {\n z-index: 10;\n transform: scale(1.2);\n}\n\n.product-card__image {\n background-position: center;\n background-size: cover;\n width: 160px;\n height: 134px;\n margin: 0 auto 40px;\n display: block;\n}\n\n.product-card__title {\n color: #060b35;\n margin-bottom: 4px;\n font-size: 12px;\n font-weight: 500;\n line-height: 18px;\n display: flex;\n}\n\n.product-card__title:hover {\n color: #34568b;\n}\n\n.product-card__description {\n color: #616070;\n margin: 0 0 16px;\n font-size: 10px;\n line-height: 14px;\n}\n\n.mark {\n justify-content: space-between;\n align-items: center;\n height: 16px;\n margin-bottom: 24px;\n display: flex;\n}\n\n.mark__reviews {\n text-align: right;\n color: #060b35;\n font-size: 10px;\n font-weight: 400;\n line-height: 14px;\n}\n\n.price {\n justify-content: space-between;\n margin-bottom: 16px;\n display: flex;\n}\n\n.price__word {\n text-align: left;\n color: #616070;\n margin: 0;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n}\n\n.price__numeric {\n text-align: right;\n color: #060b35;\n margin: 0;\n font-size: 16px;\n font-weight: 700;\n line-height: 18px;\n}\n\n.bottom {\n text-align: center;\n color: #fff;\n background-color: #00acdc;\n border-radius: 5px;\n padding: 12px;\n font-size: 14px;\n font-weight: 700;\n line-height: 16px;\n text-decoration: none;\n display: block;\n}\n\n.bottom:hover {\n text-align: center;\n color: #00acdc;\n box-sizing: border-box;\n background-color: #fff;\n border: 1px solid #00acdc;\n border-radius: 5px;\n padding: 12px;\n font-size: 14px;\n font-weight: 700;\n line-height: 16px;\n text-decoration: none;\n display: block;\n position: relative;\n}\n/*# sourceMappingURL=index.05cfb865.css.map */\n",".header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: $white;\n font-weight: 500;\n padding: 0 50px;\n box-sizing: border-box;\n}\n\n.logo {\n height: 40px;\n width: 40px;\n}\n\n.nav__list {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.nav__item {\n margin-right: 20px;\n}\n\n.nav__link {\n text-decoration: none;\n color: $text-color;\n line-height: 60px;\n font-family: Roboto, sans-serif;\n font-weight: 500;\n text-transform: uppercase;\n display: block;\n text-align: center;\n font-size: 12px;\n}\n\n.nav__link.is-active {\n color: $main-color;\n position: relative;\n}\n\n.nav__list:first-child {\n margin-left: 0;\n}\n\n.nav__list:last-child {\n margin-right: 0;\n}\n\n.nav__link:hover {\n color: $main-color;\n}\n\n.is-active::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 4px;\n border-radius: 8px;\n background-color: $main-color;\n}\n",".stars {\n display: flex;\n\n &__star {\n background-image: url(../images/star.svg);\n background-position: 50%;\n background-repeat: no-repeat;\n width: 16px;\n height: 16px;\n border-radius: 0.5px;\n gap: 4px;\n margin-right: 4px;\n\n &:nth-child(-n + 4) {\n background-image: url(../images/star-active.svg);\n }\n }\n}\n",".catalog {\n display: grid;\n gap: 46px 48px;\n padding: 50px 40px;\n align-items: center;\n justify-content: center;\n\n @media (min-width: 488px) {\n grid-template-columns: repeat(2, 200px);\n }\n\n @media (min-width: 768px) {\n grid-template-columns: repeat(3, 200px);\n }\n\n @media (min-width: 1024px) {\n grid-template-columns: repeat(4, 200px);\n }\n}\n","@import './variables';\n@import './header';\n@import './stars';\n@import './grid';\n\nbody {\n margin: 0;\n font-family: Roboto, sans-serif;\n}\n\n.product-card {\n transition: transform 300ms ease-in-out;\n box-sizing: border-box;\n width: 200px;\n background-color: $white;\n border-radius: 5px;\n border: 1px solid $grey;\n padding: 32px 16px 16px;\n background-position: center;\n\n &:hover {\n transform: scale(1.2);\n z-index: 10;\n }\n\n &__image {\n display: block;\n margin: 0 auto 40px;\n width: 160px;\n height: 134px;\n background-size: cover;\n background-position: center;\n }\n\n &__title {\n display: flex;\n font-size: 12px;\n line-height: 18px;\n font-weight: 500;\n margin-bottom: 4px;\n color: $text-color;\n\n &:hover {\n color: $hover-text-color;\n }\n }\n\n &__description {\n font-size: 10px;\n line-height: 14px;\n color: $dark-gray;\n margin: 0 0 16px;\n }\n}\n\n.mark {\n display: flex;\n height: 16px;\n margin-bottom: 24px;\n justify-content: space-between;\n align-items: center;\n\n &__reviews {\n font-size: 10px;\n line-height: 14px;\n text-align: right;\n font-weight: 400;\n color: $text-color;\n }\n}\n\n.price {\n display: flex;\n justify-content: space-between;\n margin-bottom: 16px;\n\n &__word {\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n text-align: left;\n color: $dark-gray;\n margin: 0;\n }\n\n &__numeric {\n font-size: 16px;\n font-weight: 700;\n line-height: 18px;\n text-align: right;\n color: $text-color;\n margin: 0;\n }\n}\n\n.bottom {\n display: block;\n text-align: center;\n padding: 12px;\n font-size: 14px;\n line-height: 16px;\n color: $white;\n text-decoration: none;\n border-radius: 5px;\n font-weight: 700;\n background-color: $main-color;\n\n &:hover {\n display: block;\n text-align: center;\n padding: 12px;\n font-size: 14px;\n line-height: 16px;\n text-decoration: none;\n border-radius: 5px;\n font-weight: 700;\n position: relative;\n background-color: $white;\n color: $main-color;\n box-sizing: border-box;\n border: 1px solid $main-color;\n }\n}\n"],"names":[],"version":3,"file":"index.05cfb865.css.map"} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000000..b12a386b6f --- /dev/null +++ b/dist/index.html @@ -0,0 +1 @@ +Catalog
imac

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

Product code: 195434

Reviews: 5

Price:

$2,199

BUY
imac

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

Product code: 195434

Reviews: 5

Price:

$2,199

BUY
imac

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

Product code: 195434

Reviews: 5

Price:

$2,199

BUY
imac

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

Product code: 195434

Reviews: 5

Price:

$2,199

BUY
imac

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

Product code: 195434

Reviews: 5

Price:

$2,199

BUY
imac

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

Product code: 195434

Reviews: 5

Price:

$2,199

BUY
imac

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

Product code: 195434

Reviews: 5

Price:

$2,199

BUY
imac

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

Product code: 195434

Reviews: 5

Price:

$2,199

BUY
\ No newline at end of file diff --git a/dist/logo.eddae0ff.png b/dist/logo.eddae0ff.png new file mode 100644 index 0000000000..ce1498e05a Binary files /dev/null and b/dist/logo.eddae0ff.png differ diff --git a/dist/report/engine_scripts/cookies.json b/dist/report/engine_scripts/cookies.json new file mode 100644 index 0000000000..b59400d7e6 --- /dev/null +++ b/dist/report/engine_scripts/cookies.json @@ -0,0 +1,14 @@ +[ + { + "domain": ".www.yourdomain.com", + "path": "/", + "name": "yourCookieName", + "value": "yourCookieValue", + "expirationDate": 1798790400, + "hostOnly": false, + "httpOnly": false, + "secure": false, + "session": false, + "sameSite": "no_restriction" + } +] diff --git a/dist/report/engine_scripts/puppet/clickAndHoverHelper.js b/dist/report/engine_scripts/puppet/clickAndHoverHelper.js new file mode 100644 index 0000000000..6c1e1b8841 --- /dev/null +++ b/dist/report/engine_scripts/puppet/clickAndHoverHelper.js @@ -0,0 +1,39 @@ +module.exports = async (page, scenario) => { + var hoverSelector = scenario.hoverSelectors || scenario.hoverSelector; + var clickSelector = scenario.clickSelectors || scenario.clickSelector; + var keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector; + var scrollToSelector = scenario.scrollToSelector; + var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int] + + if (keyPressSelector) { + for (const keyPressSelectorItem of [].concat(keyPressSelector)) { + await page.waitForSelector(keyPressSelectorItem.selector); + await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress); + } + } + + if (hoverSelector) { + for (const hoverSelectorIndex of [].concat(hoverSelector)) { + await page.waitForSelector(hoverSelectorIndex); + await page.hover(hoverSelectorIndex); + } + } + + if (clickSelector) { + for (const clickSelectorIndex of [].concat(clickSelector)) { + await page.waitForSelector(clickSelectorIndex); + await page.click(clickSelectorIndex); + } + } + + if (postInteractionWait) { + await new Promise(resolve => setTimeout(resolve, postInteractionWait)); + } + + if (scrollToSelector) { + await page.waitForSelector(scrollToSelector); + await page.evaluate(scrollToSelector => { + document.querySelector(scrollToSelector).scrollIntoView(); + }, scrollToSelector); + } +}; diff --git a/dist/report/engine_scripts/puppet/loadCookies.js b/dist/report/engine_scripts/puppet/loadCookies.js new file mode 100644 index 0000000000..db848a7cc7 --- /dev/null +++ b/dist/report/engine_scripts/puppet/loadCookies.js @@ -0,0 +1,29 @@ +var fs = require('fs'); + +module.exports = async (page, scenario) => { + var cookies = []; + var cookiePath = scenario.cookiePath; + + // READ COOKIES FROM FILE IF EXISTS + if (fs.existsSync(cookiePath)) { + cookies = JSON.parse(fs.readFileSync(cookiePath)); + } + + // MUNGE COOKIE DOMAIN + cookies = cookies.map(cookie => { + cookie.url = 'https://' + cookie.domain; + delete cookie.domain; + return cookie; + }); + + // SET COOKIES + const setCookies = async () => { + return Promise.all( + cookies.map(async (cookie) => { + await page.setCookie(cookie); + }) + ); + }; + await setCookies(); + console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2)); +}; diff --git a/dist/report/engine_scripts/puppet/onBefore.js b/dist/report/engine_scripts/puppet/onBefore.js new file mode 100644 index 0000000000..a1c374c371 --- /dev/null +++ b/dist/report/engine_scripts/puppet/onBefore.js @@ -0,0 +1,3 @@ +module.exports = async (page, scenario, vp) => { + await require('./loadCookies')(page, scenario); +}; diff --git a/dist/report/engine_scripts/puppet/onReady.js b/dist/report/engine_scripts/puppet/onReady.js new file mode 100644 index 0000000000..517c0e41b6 --- /dev/null +++ b/dist/report/engine_scripts/puppet/onReady.js @@ -0,0 +1,6 @@ +module.exports = async (page, scenario, vp) => { + console.log('SCENARIO > ' + scenario.label); + await require('./clickAndHoverHelper')(page, scenario); + + // add more ready handlers here... +}; diff --git a/dist/star-active.edda4c43.svg b/dist/star-active.edda4c43.svg new file mode 100644 index 0000000000..8f3953268a --- /dev/null +++ b/dist/star-active.edda4c43.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/star.822d561e.svg b/dist/star.822d561e.svg new file mode 100644 index 0000000000..a51ac8dcc7 --- /dev/null +++ b/dist/star.822d561e.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/readme.md b/readme.md index 874ca70d97..c4a19ce627 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,8 +33,8 @@ 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://IvanIlnytskyy.github.io/layout_catalog/) +- [TEST REPORT LINK](IvanIlnytskyy.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. diff --git a/src/index.html b/src/index.html index 9cff78eeb7..af8eaa6acb 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,383 @@ -

Catalog

+
+ + + +
+
+
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
+ imac +

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

+

Product code: 195434

+
+
+ + + + + +
+

Reviews: 5

+
+
+

Price:

+

$2,199

+
+ + BUY + +
+ +
diff --git a/src/styles/grid.scss b/src/styles/grid.scss new file mode 100644 index 0000000000..61fa73c391 --- /dev/null +++ b/src/styles/grid.scss @@ -0,0 +1,19 @@ +.catalog { + display: grid; + gap: 46px 48px; + padding: 50px 40px; + align-items: center; + justify-content: center; + + @media (min-width: 488px) { + grid-template-columns: repeat(2, 200px); + } + + @media (min-width: 768px) { + grid-template-columns: repeat(3, 200px); + } + + @media (min-width: 1024px) { + grid-template-columns: repeat(4, 200px); + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 0000000000..5109d25691 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,65 @@ +.header { + display: flex; + align-items: center; + justify-content: space-between; + background-color: $backround-color; + font-weight: 500; + padding: 0 50px; + box-sizing: border-box; +} + +.logo { + height: 40px; + width: 40px; +} + +.nav__list { + display: flex; + margin: 0; + padding: 0; + list-style: none; +} + +.nav__item { + margin-right: 20px; +} + +.nav__link { + text-decoration: none; + color: $text-color; + line-height: 60px; + font-family: Roboto, sans-serif; + font-weight: 500; + text-transform: uppercase; + display: block; + text-align: center; + font-size: 12px; +} + +.nav__link.is-active { + color: $main-color; + position: relative; +} + +.nav__list:first-child { + margin-left: 0; +} + +.nav__list:last-child { + margin-right: 0; +} + +.nav__link:hover { + color: $main-color; +} + +.is-active::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 4px; + border-radius: 8px; + background-color: $main-color; +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..483ffcf08b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,135 @@ +@import './variables'; +@import './header'; +@import './stars'; +@import './grid'; + body { margin: 0; + font-family: Roboto, sans-serif; } + +.card { + transition: transform 300ms ease-in-out; + box-sizing: border-box; + width: 200px; + background-color: $backround-color; + border-radius: 5px; + border: 1px solid $border-color; + padding: 32px 16px 16px; + background-position: center; + + &:hover { + transform: scale(1.2); + z-index: 10; + } + + &__image { + display: block; + margin: 0 auto 40px; + width: 160px; + height: 134px; + background-size: cover; + background-position: center; + } + + &__title { + display: flex; + font-size: 12px; + line-height: 18px; + font-weight: 500; + margin-bottom: 4px; + color: $text-color; + + &:hover { + color: $hover-text-color; + } + } + + &__description { + font-size: 10px; + line-height: 14px; + color: $small-text-color; + margin: 0 0 16px; + } + + &__review { + display: flex; + height: 16px; + margin-bottom: 24px; + justify-content: space-between; + align-items: center; + } + + &__reviews { + font-size: 10px; + line-height: 14px; + text-align: right; + font-weight: 400; + color: $text-color; + } + + &__price { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + + &-label { + font-size: 12px; + font-weight: 400; + line-height: 18px; + text-align: left; + color: $small-text-color; + margin: 0; + } + + &-value { + font-size: 16px; + font-weight: 700; + line-height: 18px; + text-align: right; + color: $text-color; + margin: 0; + } + } + + &__button { + display: block; + text-align: center; + padding: 12px; + font-size: 14px; + line-height: 16px; + color: $backround-color; + text-decoration: none; + border-radius: 5px; + font-weight: 700; + background-color: $main-color; + + &:hover { + display: block; + text-align: center; + padding: 12px; + font-size: 14px; + line-height: 16px; + text-decoration: none; + border-radius: 5px; + font-weight: 700; + position: relative; + background-color: $backround-color; + color: $main-color; + box-sizing: border-box; + border: 1px solid $main-color; + } + } +} + + + + + + + + + + + + diff --git a/src/styles/stars.scss b/src/styles/stars.scss new file mode 100644 index 0000000000..1b60b59774 --- /dev/null +++ b/src/styles/stars.scss @@ -0,0 +1,18 @@ +.stars { + display: flex; + + &__star { + background-image: url(../images/star.svg); + background-position: 50%; + background-repeat: no-repeat; + width: 16px; + height: 16px; + border-radius: 0.5px; + gap: 4px; + margin-right: 4px; + + &:nth-child(-n + 4) { + background-image: url(../images/star-active.svg); + } + } +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000000..3d2890f000 --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,6 @@ +$hover-text-color: #34568b; +$main-color: #00acdc; +$text-color: #060b35; +$small-text-color: #616070; +$backround-color: #fff; +$border-color: #f3f3f3;