From 36896d642a1e87468527c5fc277b6230e1b3e080 Mon Sep 17 00:00:00 2001 From: Katarzyna Olkowska Date: Thu, 28 Nov 2024 14:56:11 +0100 Subject: [PATCH 1/3] add task solution --- src/style.css | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 80 insertions(+), 1 deletion(-) diff --git a/src/style.css b/src/style.css index 293d3b1f13..04acc6f82c 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,82 @@ -body { +:root { + --blue-color: #00acdc; +} + +* { margin: 0; + padding: 0; + background-color: #fff; +} + +body { + font-family: Roboto, sans-serif; + font-weight: 500; + font-size: 12px; + line-height: 14px; +} + +.logo { + width: 40px; + height: 40px; +} + +header { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 0 50px; +} + +.nav { + display: flex; + position: relative; + align-items: center; + margin-left: auto; + height: 60px; +} + +.list { + display: flex; + align-items: center; + list-style-type: none; +} + +.link { + display: flex; + align-items: center; + justify-content: center; + height: 60px; + margin: 0 10px; + color: #000; + text-decoration: none; + text-transform: uppercase; +} + +.link:hover { + color: var(--blue-color); +} + +.list-item:first-child .link { + margin-left: 0; +} + +.list-item:last-child .link { + margin-right: 0; +} + +.is-active { + position: relative; + color: var(--blue-color); +} + +.is-active::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + border-bottom: 4px solid var(--blue-color); + border-radius: 2px; } From a4e4fd3bfb564fdf46b04c51f3a056faec64fe2a Mon Sep 17 00:00:00 2001 From: Katarzyna Olkowska Date: Thu, 28 Nov 2024 15:12:04 +0100 Subject: [PATCH 2/3] add task solution1 --- src/index.html | 104 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 102 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index b39fe97123..5c2b84e87d 100644 --- a/src/index.html +++ b/src/index.html @@ -12,11 +12,111 @@ /> Moyo header + -

Moyo header

+
+ + + +
+ From 4f1b3067f70fcee79fbd6cfc52b4f077053cc0a4 Mon Sep 17 00:00:00 2001 From: Katarzyna Olkowska Date: Thu, 28 Nov 2024 15:38:12 +0100 Subject: [PATCH 3/3] add task solution2 --- backstop_data/engine_scripts/cookies.json | 14 ------- backstop_data/engine_scripts/imageStub.jpg | Bin 2900 -> 0 bytes .../puppet/clickAndHoverHelper.js | 39 ------------------ .../engine_scripts/puppet/loadCookies.js | 29 ------------- .../engine_scripts/puppet/onBefore.js | 3 -- .../engine_scripts/puppet/onReady.js | 6 --- readme.md | 5 ++- 7 files changed, 3 insertions(+), 93 deletions(-) delete mode 100644 backstop_data/engine_scripts/cookies.json delete mode 100644 backstop_data/engine_scripts/imageStub.jpg delete mode 100644 backstop_data/engine_scripts/puppet/clickAndHoverHelper.js delete mode 100644 backstop_data/engine_scripts/puppet/loadCookies.js delete mode 100644 backstop_data/engine_scripts/puppet/onBefore.js delete mode 100644 backstop_data/engine_scripts/puppet/onReady.js 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 3e526b4bbbc74ef5125cb58f7c8849497ef4fa83..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2900 zcmcIlX*3(?8csxzq9yjys3n$asUT`8Q(MLo#@bS?(O4Q=8>Mz#RNGi45oa_YifWe%c;6vQpTs(Y-`1p7a@$&K?h6?Z>7Cg+$DOk7l094ag#d;kIjvDa{dAz&~>n4gzl_>S*Qq_R8DHH~mACV-F4m_raG2rvW;gVs)O z{Ps`k|C)7Pt-8e3!0!4}l?X&=o#d)OtX~v&*`qf5S8E9O73Ewz!sB?~J=wG~^cZiv zPVAx1pt19L^>AfrTWy9UYISWNu`R8;vZi}_mR|bv)41<;&Kd|s31?-6DC$Yo?9s4Y zz3eG9g^F8?`I=jluHy!`xpke)?ZF#mvhO61$Zcl?uft85W*9lAcipr@9r@(!{SDE< zb-Njn##b$$gQcgmSbzdlzvYH?&+e}*K>Q!gY^SwOk@ep`49iKK$5lc}*;~Y<)?wF$ zjFRR)*S_(NzCq%&;OzsEpyN0LlknW-8{Ti|c0nQIzJqEQ{n-^yA=oI#Eyk-6E3TNr295F5b~l>m4>GbC-;qCN^7Y4OuydL z#otg+>27!THP0C!TUgXLSw3nDnw{?pFleC{%)M?`EQpjwURlC+SD5@*L*p9Dhm=;l zEG)W3d(ljnS++@>2~U4iSc?CNVgAE`HolnVZ!Q7fkdb`Bil}IAY1g_0q+6)t$|}w0 zCJW%5i4~Qb*{qX%M{+D%hqa#7!Cbn=yeDaz)lwn_m&bold2rcV^UDZ^fmkY(vP;5W zchD(FsGKh46Ou_BXy@E8&n_;nH}sRa#$o!oAH5Ld*tF(^_$TP2ek6wJ zoY7K=8Va6Yxc*VB`emcilzB0!`91}%f^AJ8Cx4nnNHzW%QB#FL)}t#Xt!)FtwZtfh zV9%*M`PqgW<)1CxTac4zUh_q)t)GYf!fpi4KSjHx6*t~D-nVBt*N#>;T_B8KOgV7K z1Exsp3#oZEj>*^6`+8<)X3@R;`&;D94mgh)e?3IJRpMHhQ*LjMWvtY|aIs-m=03dU z@atH3Vuvx251=VJG^@@vnQsafH?>7C zq(}>`-xLZ?9h;S*tyy3bQ|~RIcI6Ybb#fwD0Ir_9S#R8?pQ)C2_yx8zzgsGO_13DU zy3edSWp)OR*7C)QOuG3we2&2;cPxzWl&2;v^)(WcoL;%Rbj&t|CX7UpW@J22Ws6bN zE6g?;bwZ0`Qs(1Z3{%?Se`Y%tPkCKyBZGeZFxSF}X89%0Up%uJeNioT^{mwcyuV8G z(yaZccYknI(kPN@LR2D6S*nur>RJ&e@+%8WpLaSLJEux7$6>pM9lQ2VhT#|;{{7NM zr07*C<$63l^p*Xt-@5*htx6VPVoNi7m+dO(_{!OVjJobD&@uC#k9X*QTq&`S5N6?n z$)jeBr~#Cl^O+Y06LiuFJTe(Ew7E+!pB&*iPfahHanu7aF z&HI9A!2*<@GDr-W@RTSx&lpz4BAN;?8WU&kw;w4ju@m+n$qlgpa!0FzD0-vW8?O9W zhoG?#^Q&FpW`$JGZCLTxkmFR9(6idPI>|+Zk5Ls?K0+ERK6=wBKsG0i=xzbZ4STJ=T@!;qNKobcQV z1E*;1XDzf!8sBI9P}Z(8(d}MhS){uHO^Qfg^xSLphVD>I9H^D2C4w%h%qX?YMYc^| zG+irV0WPmSiI-|Qxs+E_lqP%Z9+KbRV3_DfE&Slx6jE0U65QoolaZjuSi9QGTyQ?+ zQ|R@1;sYsK`}vmVB`WIY3oS2=ueC<$r&MKY%p$&tPoDbPLD3G?K&a>DK+qL~3Ju0# zZ|^-P@U&m;J$deh*lqU4NO0qqD#n)lw!{~#f7v~3P!l2USN}C1l`HBUPFXVlqRzRU zj3WBDS0~9}7BzQsnb*n1y_8S$qDbo#E=bS3#&%kz?l@CVF~vcCQ)iL5`ADsz(zLF! z15aCY(Tolsw%Lj?+`Lj!xGKvKd5VVTr}e=+J*F%#&)Wt`t3#$51?s&@drL}iOLJN3 zZMA(V(@LQ;_it5LKrR#--Pa@I&A7q6$( z9<7hTZ+D$-#TjhHk^3KGVB`o!im` zhY+sr>w(A4EmD{3o2VPg)4pF$EPR43;n$?_bq3lg3tm@Bn&8Hc@PE)j91$AB){YK; zRqxL{wj~u6xOsXwYQm0Sb+R37IBL&~mW8ar39_9nh&W~k64Ms>+XC7QJ1w!E^>Y>Z zVkBg;*QAPX)-OBTBzTp1`MZjL^`{}TfhQ7*8bi`RThIO8_uEfRROQ<4yLNs8FczJX zd0*T?G&56RIx@}SB2Ve>mu01vtE*9dUSF&d9xD$(ld+#+ZZ%0Ib7l~vix!et@)`5~ z{->OH8L6tlvecO&Oy}x~e^Y(vV6mbY#VtSRF^K^isxY|CR`Va<*`^%WBj@DE^CD%H zF9J-wNL7gzvKr1}=i+_k$@mG;p1}?1)IR5}IU@s_%0hWW!Vlr)Bz-JIp7x8=G^)Wo z{h`N(N8w%F?Bw~ssc8orB+h78;{0UZV%y3EtdW!`d9O?NG3c(3#|SY*ecweNT)1KR zN9ctQ;lM%(*5g7(ty2+FV5TWF9tEAemCv4|q(?hW~Wkr#L`lhjCSNuCe&85{WjhJ1@P{5z{dH?#l% 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/readme.md b/readme.md index e72b8051e7..4d9e613a65 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,5 @@ # Moyo header + Create HTML page with the header using `flexbox` based on the [Figma Mockup](https://www.figma.com/file/1sog2rmfyCjnVxkeZ3ptnc/MOYO-%2F-Header?node-id=0%3A1&mode=dev). The page should match the design Pixel Perfect: all the sizes, colors and distanced MUST be the same as on the design. @@ -27,8 +28,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://olkowskak.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://olkowskak.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.