From 8361100c7a74d82f30db2f3d3152df6950fef512 Mon Sep 17 00:00:00 2001 From: Daryna Kopytko Date: Tue, 21 Jan 2025 17:14:48 +0200 Subject: [PATCH] add fixed task solution --- src/images/benefits/design.png | Bin 2226 -> 0 bytes src/images/benefits/design.svg | 3 + src/images/benefits/lighting.png | Bin 1792 -> 0 bytes src/images/benefits/lighting.svg | 11 +++ src/images/benefits/multiroom.png | Bin 1768 -> 0 bytes src/images/benefits/multiroom.svg | 3 + src/images/benefits/speacer.png | Bin 1598 -> 0 bytes src/images/benefits/speacer.svg | 3 + src/index.html | 127 +++++++++++------------------- src/scripts/main.js | 53 ++++++++++++- src/styles/blocks/footer.scss | 29 +++++-- src/styles/blocks/header.scss | 2 +- src/styles/blocks/nav.scss | 86 +------------------- 13 files changed, 142 insertions(+), 175 deletions(-) delete mode 100644 src/images/benefits/design.png create mode 100644 src/images/benefits/design.svg delete mode 100644 src/images/benefits/lighting.png create mode 100644 src/images/benefits/lighting.svg delete mode 100644 src/images/benefits/multiroom.png create mode 100644 src/images/benefits/multiroom.svg delete mode 100644 src/images/benefits/speacer.png create mode 100644 src/images/benefits/speacer.svg diff --git a/src/images/benefits/design.png b/src/images/benefits/design.png deleted file mode 100644 index 2e257552baff928e5f7b36ed9d7764e3b8cf92bb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2226 zcmV;j2u=5iP)SIw zw>u<-)My3x^5sjDu7$xg@w`P!SqXvEYPF;IbF7enl(O^!dHC>Q3%`Q+*yZJAmz1*f z0x?$yh~B(;(<7xUwLoCZLo!we)YUUm%u)*ks;OlRMewdVq?n}@2v$dc)$lkzhUYIx zIZG=Ltd6#2SgkQ1vy=jn)v;#`cc88!QqC4FFg)>}KYwmu^6UH@yYV4bMud%D1Kw3V z{#xzEe9XcLgu@`1^rx8M5CRA{H#aB#Za!!5x>FF*0SxgTdfmQqBe~04xlwj5d{{4}sp(8s#0M-phh84k{1^ z)4=;YC*`PCS?on&691$EYRW-ldwcui`T6;Pl%jft$mTAW0Z#*7nCexc)`rOH_(UGS zKINX)h_Bief=LU>6IdmWNhxXt0*|Ok{_y$UrO+&p@5mo@R*9q#%|^XJeyP-1sEU;+ zafYsqE;Z-gY?KB(YkUmCy3Dcyn=hAl$Eq0oLMBLs0^J* z*yICwbWITn*hlz8UD1Qe6#`+rBhUK;gilU1ZVuI@a3vWPkbk&E;RL_$QAu#lUvn+e z>JU*uRILy$jJ71BqACj9@V|-L^@c|aj>FMcBo>WmmE-rXQ;pZlf zIX2#-i(^d{7!=L7n-!8N=av3`G-t#helUh3sSt@$j^(Sm0T(vl=eW{Y9rd#uC!ZO_ z$8ohEzJC2Wa}5`(E7N9_%|^~uAhO@!FBHVb#cp)SBXS{_?lr5pyIH-YM~@zLj0*dR zS1^@et}0847=rj1tCLyuaNslg7Dr*+t(%Ii-GQA4D#_dgB9(|{ZaaeADD8%3MeIw@ z7;fOoPqinub_aND9V*FO1R|=cZ43{^i<&9;%zZLEH;f%5xx%*9K^3(-%v>O1P^UIe ztUl(^zrpUX!xet%3a!{yM^)_(GZzTH47<32G2AiT(^M>Lx-f3DJbg&VObCkuNi4EVJx4W`)?3sn80$$o$yh6;`ThXI5-| z`}S?#h5!~4dc?&JK~kpFCqvsbuJ6*3cnNN8jt=EETd zjxmukAe8r*{BJP%Kg5RX#`6)piDV&Cg?Lw4(uUSHh9jtg7AXbi)~1voX4R@{jMvaf zLTF^4gM6eIM~rO*dt|;guwGY)xQ&514&(SeDMuy>+!w8119WBP&dwYAI%H+0-!WR%e`yD2D z%J~rZrkQsgS;kDE`aD!>Ls<9X*RRGfySP8Gt-wzYcH<+)*rzwIt~$HIur1;C_V&g3 z`FTVhVYPbe)~(<0(CTRmXP664FkBuSWjz5hiD%k3@PCdC~*<$z*uh=@3Em(q3!H zrStK}P;ZA+lF|a3B};z5EO09de`&e1DBm@%Y`BGma4Lle{VMdm!=7+4 zU*Xz-!UD0~GD$+}A$dUZ+YJba4fDu2$8H%u?rFb}^B5J((X|lzReEYByoVvfW8-nM$faB%L``rS3DYyy%G66&Yg(S@J!J z`w*9pZ40TdnWSiFC2@t=8u)$HBP|zc>R*M%#2! zmeIOGG*_uF8m`{>aRIl07*qoM6N<$g2WCm AkN^Mx diff --git a/src/images/benefits/design.svg b/src/images/benefits/design.svg new file mode 100644 index 000000000..6927abc6c --- /dev/null +++ b/src/images/benefits/design.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefits/lighting.png b/src/images/benefits/lighting.png deleted file mode 100644 index 5ced8abcabdb469f698e424c346c42b7837d0dd5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1792 zcmaKti#rnv1I9PuP{b(L)G$+q6uIOwml?AVn_{(DE;+7Yox>$x#dnG zLgH*}t??3RSU37DjJ*ajN0079MoDrV;^xii? zN^(ETdWTQ#LpsvghXep9>HOC~lqY0me*}^|o$LWM{l~uS7x5rFS33Zp{^6mWYZ3r} zWHt(6hm8d;J#NRSJE^4lcAjyl;Nd+TO{4}>b|e_BGTPrfN}r9lGO@ZGd*q5;eYL^R@j&!7q%SqH?TW zU;@KIzymFOkK3A?n>%{L7mv5LvanFiI8c?LZ5v{DLm1s6WEN9GlQq3u&5;cwuQD^U2|5=2dS~ z{;(kW55`7@A9Ehsqx;N2weS=zOb#WL8J&aGRx4FB9@tvZemMI;ip6tZ(A3U;it#iP zGs32+F&rYjE_^O}GC6Z`({-$i`LYlst&E#bKd4NO7S}PuMLU(&AhZoEUIpM;Rf2`{ z?W|CUjH-s$y?0QBZM2};t#&m2g7h@J|MTa-oL|g6tbgQ+T-Z=f%Ot_qS1uW>0+B^E z;^@O4-*1~w`5&uvxMyS&R)9Q<=FUec+J}BHz*tFU+)h#JCQhQS;6$5`Ag_x9!r+S= z+e`7U3R3gSc*F;y2v+d?wD*8W5np|&pz9je)YVi z9o^XKO!8WW_vF}Eh?a(R{?B9;`o^SIxVrO4P5Te-5CjxchLt-y)e=5(wps7*jF2be zsoxK8Ad6Oc&#qn{x1S|t23E0%UeWHS9I%VMI8+lf)+O^ijAoJ~8lumR1Lm`jBxyzWkw9Q;O zk4`Gd6&G2IuJ@K92tHU!SA@$IBZ(XrqX=+dw75u1N0TF7gniEkHDjnL8Ao;uEGPju zNAXIF(0-XX3MX^h<{no1cT^2BK&vQ=D7=nGUS{S(rr+i)R#F`bFk-O*Y+bHnd|9N` zaaS*QIQGJB4m&8s^EDI|2*?y}PMXRmL`877dBWc`pjn$k?Ad>}b`CdTD z>EdrRu|K%XCXd9q>ui=xN}FjHM?OMfs*aqFeBu|BDnmhQ-!zaU4 zZhch&rP8KJ)M>C(mE6NJiQvO1K>cF#rOI7bk%@U1q4tHH7V8l0tPJ zh!)54IU#m_6t9uK?7YYE6mklnWRt2?kS>T*7-Z!ON`mgsn_Q7bNE8LgIIpZ3+d9P^ z%#QUHA2?PfLFW#Yut9l=)t}M^N<6=4n06FNP=XqZM6iV4d=`yt|4i2XnH>yF93S0H z=(wO%_ZOZIi=B@MC$Uy4wxB*;>*8Pejjx+Pc(k?b;_dsYE=`7Peh7#b&d=cmB0@p( zEx!6nt$BHQ%Z7%Ad+(MjbGabM9aVfS6xbg{eY9;Y*gMB)QW{!UCoBqu!djHnnNEG> zoKSy~hC+uelz@b%3ht~D*rSz$+t(6?@p-c)SDxN)pC-8`NY%qSjit%ST<+RTSGQoM=cM^mQ1QYXlc}SW?Ea=b=J8tA)agpHnw4*r zk+7C-$!cD9I5!})zO3F6V+nsWOnQISN$=6g)lHmdR-?_#+I>P)f_~ej zk*F@FP;Y~Ugqn@5IZ8?s4_Gm>0IYdb7FVFI)zj01e2JrTh>ce3cPE8!k46_{XoJ`H z(pB0DLrt9T+>Vd8M98>XXJz3cOFYZ9uXQZk)_H+S?>wg_%`g9=A(&>B^oHlaRLGuo#$0|Y zOX?bMdEj>1)mZ(TKjOGX`Q6euo1m~xA6_G!ISxJ`XGb^iHZatGI?;RHqc~^%RzKtr z%>Pg~ooKrZ`+dbaAf{y{59?#gUfpyD2`QttjAMIj>v g9UZh-NY1fOaCNC9MU5ym)&0W)pd8&0HTFcxzod6ig#Z8m diff --git a/src/images/benefits/lighting.svg b/src/images/benefits/lighting.svg new file mode 100644 index 000000000..634f3af0d --- /dev/null +++ b/src/images/benefits/lighting.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/benefits/multiroom.png b/src/images/benefits/multiroom.png deleted file mode 100644 index b7a362cd8ea924607f55f51202410c4a0acdfafa..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1768 zcmVP)9i~gS<_TgO4rjZFE?qN9SiZ-m29_0Biok+Lyr42J zQ4t}Q==}UVq&Z?#aE@9;Y-4F@={>~t>8rRV;fe@R2^Xk<;Oy)yAcIscIE#!3ZbRfI z%|~Dr0*HUIyu2JB6-87bl?Xm1vQLXerQ(+=_{PSDj{`lR{374rr_MPxLS;p$v=P29 zqNg-4z6ef>z}EnIxe{AEh{oH;zbK@yA1NPwe9z$Y^t4AMQCM(}W*pQm#2%Qojr)k!h0D-$2nf*;#!-v zL+tDmWw$ya2z^2?Na!S>MH^ah3(U(X#`%3eE6vn0cCaTqNJ}3h`SKpUB2_g?PDbNjR4TU%R4(gI0>^YrebwmPatvceyf67ABG+2_|aDf~M<-3BKWc2TW} zq?v=1x5p`_)@(MpX8eQ#E~;}dBie%{N)Vgx4k7kCC$>I(k!0;y!-Ti}Zz5cpdR=l9 zMw-?~u}$If`uh3>Hm>528|3PrxzmFjrEqn1^(XY@4!d>yc?o@Ytu>L;i1mMusoJ3_ z8><8t&y%}LJwyZdSM&YAr1j*@`1r&$<_@JxcJtZHsMqVEO)ads3NDU)OT_g_ty?q? z5f*ms2PS;WEQ|}zHk`QjZK_V-S%lJs+%+w}5y34tl{xZ{O}S8&3SPkPWH=Y!kmO}q zKaaGU5F3d#HjnA6X{@`y2uo1JK2xExVG=p~PX37pB>A@JNy|_m6tOHYbwBlQ~#5(h46xX)TR47ew8I!{O=w3!KYfNQ`&(Xi9U>fuInBB65 z#FaHJurWafb?BNNk7CZ7>-8!2WK0JI-4>rD*4H+`!lp>?pSdoCr+2>^LygBNB@I z$3ECRCWSH5JzE6vK$VauJ6ny_5iX|lKRTa5dRet`rrZSEBfLTScw{lwrxab#Y&12f zC>OR19+4*XdfnP|!dTx*f#c6PTs3OPb8*OGtWPO2W<`mVN7q@!BIIy({6mFu(Qr8I zkmXn}I5+Y55u%ix&qEpZU_Fc0dDV{npN8?%+vHIox#qpkgZ}{Ea^#HoYLCtU0000< KMNUMnLSTabm|g<_ diff --git a/src/images/benefits/multiroom.svg b/src/images/benefits/multiroom.svg new file mode 100644 index 000000000..621302af1 --- /dev/null +++ b/src/images/benefits/multiroom.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefits/speacer.png b/src/images/benefits/speacer.png deleted file mode 100644 index 1e10f5d48661d3532998288e85604f7d5d0a7a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1598 zcmV-E2EqA>P)FE^z{>A2$0%Mm31ZVa0 z^Ygczot+O9D1#9kVt-(<@iM1?iQZDQg+T0Jv${&uf-4KTg@xo43DH_gEEXb(F2iH9 z5J^;m$7msvXe=dG3y}n$;jvqYBxu1yw2*^?gMxqF+}tdv1HoEKh!%2mbab}2w|C3` zCX>mxF5@-93CY@Ep(6+HARWHcH*7{YlM(Q%ec@uPM; z{N3+mmha#+dZqya(LP;WT}{{h9t4@O^%q3g)IMgeSLkdw+A&%q6?~- z;fg{E%bEU_{5Y4#LFP|t+mv|m;1}RhUFN1mMp3m<0qwc4raT1kQ%V8IL{frXE)AfxX@C}p?}WMsn@d~Ai9 z@I61-=U;Opr;wSzlL5qe01uP3i=m`c4i&^XC2D+z8x zwedC4d<4gxAGz;+65LLst8AG(#E#L)Z9)98q)2^J+{_n@EBSRCdcrKc(lx z3{2B07X07fo?G~%@ahK{Yg>VAImUajeK()aOMaa)yaKYDS1;ru%on>$as0O`j#Z1v>Slz47PLVutHibr`z=0OF5{ep(8X)1V@q}~ zWp%T04_B+icpO>wYA2FGXOR2E8n&`1b7Kx%cDq2!?13Rt#_J% zS1~p8qe%Eck<^^8!WZ5BHY?Et(b~siG5lzymPe5|iOmEvmJ+(fs5vU8VORZ_52yQ` z!3|!;)F|-<(lxU+L5>!NXfbL@_&YUK;$AgLg^$=w?~RWyT^l8z#-~q$9}kbIig6)| z8xTWilr+)Y@rk)nsuJBTw%9Eu%6pnITTHY!kz=)(=gY*n88g1(iVep>5>BEKZPwCnwSY&9RL6T07*qoM6N<$f{tzZuK)l5 diff --git a/src/images/benefits/speacer.svg b/src/images/benefits/speacer.svg new file mode 100644 index 000000000..e6aad8bc2 --- /dev/null +++ b/src/images/benefits/speacer.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index be6b678d1..319ee583e 100644 --- a/src/index.html +++ b/src/index.html @@ -27,7 +27,7 @@
@@ -156,15 +118,17 @@
-
+
@@ -196,7 +160,7 @@

@@ -574,61 +546,50 @@

DO YOU HAVE ANY QUESTIONS?

- + scrollTop
-
+
  • - facebook link - + aria-label="Visit our Facebook page" + class="footer__link footer__link--facebook external-link" + >
  • - twitter link - + href="https://x.com/kickstarter/" + aria-label="Visit our Twitter page" + class="footer__link footer__link--twitter external-link" + >
  • - instagram link - + aria-label="Visit our Instagram page" + class="footer__link footer__link--instagram external-link" + >

© 2024 All rights reserved. Terms of Use & Privacy Policy

-
+ diff --git a/src/scripts/main.js b/src/scripts/main.js index 075397b36..10b5b522a 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -23,7 +23,7 @@ function getChangeLanguage(language) { } document - .querySelector('.actions__buttons-en') + .querySelector('.actions-desk__buttons-en') .addEventListener('click', () => getChangeLanguage('en')); document @@ -31,7 +31,7 @@ document .addEventListener('click', () => getChangeLanguage('en')); document - .querySelector('.actions__buttons-ua') + .querySelector('.actions-desk__buttons-ua') .addEventListener('click', () => getChangeLanguage('ua')); document @@ -71,3 +71,52 @@ nextButton.addEventListener('click', () => { previousButton.addEventListener('click', () => { changeSlide(currentSlide - 1); }); + +// відкривання та закривання меню +const openButton = document.querySelector('.burger-menu__open'); +const closeButton = document.querySelector('.burger-menu__close'); +const menu = document.querySelector('.menu'); +const body = document.body; +const menuLinks = document.querySelectorAll('.nav__link'); + +function toggleButtons(isOpen) { + openButton.classList.toggle('rotated', isOpen); + openButton.style.display = isOpen ? 'none' : 'block'; + closeButton.style.display = isOpen ? 'block' : 'none'; +} + +function openMenu() { + toggleButtons(true); + menu.classList.add('menu--active'); + body.classList.add('no-scroll'); +} + +function closeMenu() { + toggleButtons(false); + menu.classList.remove('menu--active'); + body.classList.remove('no-scroll'); +} + +menuLinks.forEach((link) => { + link.addEventListener('click', (e) => { + e.preventDefault(); + closeMenu(); + + const targetId = link.getAttribute('href').substring(1); + const targetElement = document.getElementById(targetId); + if (targetElement) { + window.scrollTo({ + top: targetElement.offsetTop, + behavior: 'smooth', + }); + } + }); +}); + +openButton.addEventListener('click', openMenu); +closeButton.addEventListener('click', closeMenu); + +document.querySelector('a.external-link').forEach((link) => { + link.setAttribute('target', '_blank'); + link.setAttribute('rel', 'noopener noreferrer'); +}); diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss index 6420e6541..f8a03b063 100644 --- a/src/styles/blocks/footer.scss +++ b/src/styles/blocks/footer.scss @@ -1,6 +1,28 @@ .footer { padding: 0 30px 30px; + &__link { + display: block; + width: 24px; + height: 24px; + + @include hover(transform, scale(1.4)); + + &--facebook { + background: url('/src/images/footer-img/facebook-icon.svg') no-repeat + center; + } + + &--twitter { + background: url('/src/images/footer-img/twitter-icon.svg') no-repeat + center; + } + + &--instagram { + background: url('/src/images/footer-img/instagram-icon.svg') no-repeat + center; + } + } &__desk { display: none; @@ -29,13 +51,6 @@ gap: 40px; } - &__icon { - width: 24px; - height: 24px; - - @include hover(transform, scale(1.4)); - } - &__rights { font-size: 14px; font-weight: 400; diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss index 7ae543afd..ed7a5d776 100644 --- a/src/styles/blocks/header.scss +++ b/src/styles/blocks/header.scss @@ -15,7 +15,7 @@ } } -.burger { +.burger-menu { @include on-desktop { display: none; } diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss index 154c19f34..b8091442b 100644 --- a/src/styles/blocks/nav.scss +++ b/src/styles/blocks/nav.scss @@ -74,8 +74,7 @@ text-align: left; color: $main-color; - @include hover(color, #110d0d); - @include hover(font-weight, 600); + @include hover(color, $link-color); @include on-tablet { font-size: 22px; @@ -89,78 +88,6 @@ } } -.actions { - height: 260px; - - display: flex; - flex-direction: column; - justify-content: space-between; - - @include on-tablet { - display: none; - } - - &__controll { - display: flex; - align-items: center; - gap: 20px; - } - - &__specs { - font-size: 14px; - font-weight: 300; - line-height: 16.93px; - text-align: left; - color: #4f4f4f; - - @include hover(color, $main-color-hover); - @include hover(font-weight, 200); - } - - &__buttons { - display: flex; - gap: 4px; - - &-en { - font-size: 14px; - font-weight: 300; - line-height: 18px; - text-align: left; - color: #4f4f4f; - cursor: pointer; - - @include hover(color, $main-color-hover); - @include hover(font-weight, 200); - } - - &-ua { - font-size: 14px; - font-weight: 300; - line-height: 18px; - text-align: left; - color: #4f4f4f; - cursor: pointer; - - @include hover(color, $main-color-hover); - @include hover(font-weight, 200); - } - } - - &__buy { - display: flex; - justify-content: center; - align-items: center; - - width: 100%; - height: 48px; - background-color: $main-color; - color: white; - cursor: pointer; - - @include hover(background-color, $main-color-hover); - } -} - .actions-desk { width: 100%; display: flex; @@ -189,8 +116,7 @@ text-align: left; color: #4f4f4f; - @include hover(color, $main-color-hover); - @include hover(font-weight, 200); + @include hover(color, $link-color); } &__buttons { @@ -208,8 +134,7 @@ background-color: $background-color; - @include hover(color, $main-color-hover); - @include hover(font-weight, 300); + @include hover(color, $link-color); } &-ua { @@ -222,8 +147,7 @@ background-color: $background-color; - @include hover(color, $main-color-hover); - @include hover(font-weight, 300); + @include hover(color, $link-color); } } @@ -254,6 +178,4 @@ .active-language { color: #110d0d; font-weight: 300; - border: 1px solid #999292; - border-radius: 1px; }