diff --git a/backstop_data/engine_scripts/cookies.json b/backstop_data/engine_scripts/cookies.json deleted file mode 100644 index b59400d7e6..0000000000 --- a/backstop_data/engine_scripts/cookies.json +++ /dev/null @@ -1,14 +0,0 @@ -[ - { - "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/backstop_data/engine_scripts/imageStub.jpg b/backstop_data/engine_scripts/imageStub.jpg deleted file mode 100644 index 3e526b4bbb..0000000000 Binary files a/backstop_data/engine_scripts/imageStub.jpg and /dev/null differ diff --git a/backstop_data/engine_scripts/puppet/clickAndHoverHelper.js b/backstop_data/engine_scripts/puppet/clickAndHoverHelper.js deleted file mode 100644 index 6c1e1b8841..0000000000 --- a/backstop_data/engine_scripts/puppet/clickAndHoverHelper.js +++ /dev/null @@ -1,39 +0,0 @@ -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/backstop_data/engine_scripts/puppet/loadCookies.js b/backstop_data/engine_scripts/puppet/loadCookies.js deleted file mode 100644 index db848a7cc7..0000000000 --- a/backstop_data/engine_scripts/puppet/loadCookies.js +++ /dev/null @@ -1,29 +0,0 @@ -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/backstop_data/engine_scripts/puppet/onBefore.js b/backstop_data/engine_scripts/puppet/onBefore.js deleted file mode 100644 index a1c374c371..0000000000 --- a/backstop_data/engine_scripts/puppet/onBefore.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = async (page, scenario, vp) => { - await require('./loadCookies')(page, scenario); -}; diff --git a/backstop_data/engine_scripts/puppet/onReady.js b/backstop_data/engine_scripts/puppet/onReady.js deleted file mode 100644 index 517c0e41b6..0000000000 --- a/backstop_data/engine_scripts/puppet/onReady.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = async (page, scenario, vp) => { - console.log('SCENARIO > ' + scenario.label); - await require('./clickAndHoverHelper')(page, scenario); - - // add more ready handlers here... -}; diff --git a/package.json b/package.json index 431baa9059..ba53b32302 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.7.3", + "@mate-academy/scripts": "^1.8.1", "@mate-academy/stylelint-config": "latest", "backstopjs": "6.2.2", "jest": "^29.7.0", diff --git a/readme.md b/readme.md index 878beb2f85..1b568ca47b 100644 --- a/readme.md +++ b/readme.md @@ -27,8 +27,8 @@ The page should match the design Pixel Perfect: all the sizes, colors and distan ❗️ Replace `` with your Github username and copy the links to `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_moyo-header/) -- [TEST REPORT LINK](https://.github.io/layout_moyo-header/report/html_report/) +- [DEMO LINK](https://denis-denis718.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://denis-denis718.github.io/layout_moyo-header/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 b39fe97123..f08e5de5cf 100644 --- a/src/index.html +++ b/src/index.html @@ -4,19 +4,109 @@ - + + - Moyo header + MOYO -

Moyo header

+
+ + + +
diff --git a/src/style.css b/src/style.css index 293d3b1f13..8b9cd0887f 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,76 @@ +:root { + --main-color: #00acdc; +} + body { margin: 0; } + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 50px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); +} + +.logo { + display: block; + height: 40px; + width: 40px; +} + +.logo__image { + height: 100%; + width: 100%; +} + +.nav__list { + display: flex; + padding: 0; + margin: 0; + list-style: none; +} + +.nav__item { + margin-left: 20px; +} + +.nav__item:first-child { + margin-left: 0; +} + +.nav__link { + position: relative; + display: flex; + align-items: center; + height: 60px; + font-family: Roboto, sans-serif; + font-size: 12px; + font-weight: 500; + white-space: nowrap; + text-decoration: none; + text-transform: uppercase; + color: #000; + + transition: color 0.3s; +} + +.nav__link:hover { + color: var(--main-color); +} + +.nav__link.is-active { + color: var(--main-color); +} + +.nav__link.is-active::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 4px; + border-radius: 2px; + background-color: var(--main-color); +}