diff --git a/public/assets/flyer-background-mobile.png b/public/assets/flyer-background-mobile.png new file mode 100644 index 0000000000000000000000000000000000000000..7c2c87f46d84a24e1c2da3c1619be09f522a73d7 Binary files /dev/null and b/public/assets/flyer-background-mobile.png differ diff --git a/public/assets/flyer-background.png b/public/assets/flyer-background.png new file mode 100644 index 0000000000000000000000000000000000000000..42ec40abd9016df12f43641cc31061e655f8f82b Binary files /dev/null and b/public/assets/flyer-background.png differ diff --git a/public/assets/flyerEcolyoWeb2023.pdf b/public/assets/flyerEcolyoWeb2023.pdf new file mode 100644 index 0000000000000000000000000000000000000000..2228a9a87455459e01b4269e4a120faa0b220855 Binary files /dev/null and b/public/assets/flyerEcolyoWeb2023.pdf differ diff --git a/public/index.html b/public/index.html index 184a58ba3157db144cb78f532fe795364cd394e2..f6fc9d54424fda9bfef70f46f5780d1a7b934476 100644 --- a/public/index.html +++ b/public/index.html @@ -317,6 +317,23 @@ </a> </div> </section> + <section class="flyer"> + <div class="background"></div> + <div class="content"> + <h2>Envie de parler d’Ecolyo autour de vous ?</h2> + <p> + N’hésitez pas à parler d’Ecolyo à vos proches en téléchargeant le + flyer. <br />Il vous suffit de cliquer sur le bouton juste en dessous + ! + </p> + <a + href="assets/flyerEcolyoWeb2023.pdf" + download="flyerEcolyoWeb2023.pdf" + class="button robots-nocontent" + >Télécharger le flyer</a + > + </div> + </section> <footer> <div class="logos-footer"> <img class="gl" src="assets/legal/mglLogo.svg" alt="logo grandlyon" /> @@ -358,16 +375,16 @@ </footer> </body> <script> - const navBar = document.querySelector('nav'); + const navBar = document.querySelector("nav"); //smooth scroll document.querySelectorAll('a[href^="#"]').forEach((anchor) => { - anchor.addEventListener('click', function (e) { + anchor.addEventListener("click", function (e) { e.preventDefault(); - let item = document.querySelector(this.getAttribute('href')); + let item = document.querySelector(this.getAttribute("href")); window.scrollTo({ top: item.offsetTop - 50, - behavior: 'smooth', + behavior: "smooth", }); }); }); @@ -376,7 +393,7 @@ let scrollUp = true; let hideDistance = 200; - let headerHeight = '6.25rem'; + let headerHeight = "6.25rem"; let vw; let vh; let scrollHeightSent = false; @@ -399,23 +416,23 @@ }; onload = setDeviceWidth(); - window.addEventListener('resize', () => { + window.addEventListener("resize", () => { setDeviceWidth(); }); - window.addEventListener('load', () => { + window.addEventListener("load", () => { setDeviceHeight(); }); - window.addEventListener('scroll', (event) => { + window.addEventListener("scroll", (event) => { if (vw < 1200) { if (scrollY > hideDistance) { scrollUp = this.oldScroll > this.scrollY; if (scrollUp === false) { - navBar.style.marginTop = '-' + headerHeight; + navBar.style.marginTop = "-" + headerHeight; } if (scrollUp === true) { - navBar.style.marginTop = '0'; + navBar.style.marginTop = "0"; } this.oldScroll = this.scrollY; } @@ -424,7 +441,7 @@ // Send scroll event to matomo if user has scrolled 50% of page, then disable event if (scrollY > vh / 2 && !scrollHeightSent) { scrollHeightSent = true; - _paq.push(['trackEvent', 'Scroll_depth', '50%']); + _paq.push(["trackEvent", "Scroll_depth", "50%"]); } }); </script> diff --git a/scss/index.scss b/scss/index.scss index 85064c865fb201b9d76e606bec4be2d34609e4db..3b6fb594839e5a166e5b11e50b91f00c4f63a737 100644 --- a/scss/index.scss +++ b/scss/index.scss @@ -1,5 +1,5 @@ -@import './variables'; -@import './globals'; +@import "./variables"; +@import "./globals"; .gaz-color { color: $gaz-color; @@ -246,13 +246,13 @@ nav { position: relative; &:before, &::after { - content: ''; + content: ""; display: inline-block; position: absolute; width: 100%; height: 10px; left: 0; - background-image: url('assets/pattern-dot.svg'); + background-image: url("assets/pattern-dot.svg"); background-color: $dark-yellow; background-repeat: repeat-x; background-position: center; @@ -355,7 +355,7 @@ nav { position: relative; &:before, &:after { - content: ''; + content: ""; display: inline-block; height: 100px; width: 1px; @@ -392,6 +392,9 @@ nav { } } &.challenge { + span { + color: $light-blue; + } @media (min-width: $breakpoint) { margin-top: -4rem; } @@ -409,11 +412,6 @@ nav { color: $elec-color; } } - &.challenge { - span { - color: $light-blue; - } - } &.ecogesture { @media (min-width: $breakpoint) { margin-left: -5.5rem; @@ -441,15 +439,20 @@ nav { .create-account { background-color: $black; - padding: 2.5rem 0; + padding: 2.5rem 1rem; h2 { font-size: 2.25rem; + font-weight: 700; text-align: center; + @media (max-width: $large-device) { + font-weight: 900; + font-size: 1.85rem; + } } .containerSteps { - padding: 2rem 1rem 3rem; + padding: 2rem 0; max-width: 1000px; margin: auto; .step { @@ -479,6 +482,8 @@ nav { } } .content { + font-size: 1.2rem; + font-weight: 400; @media all and (max-width: $large-device) { font-size: 1rem; } @@ -491,10 +496,6 @@ nav { font-size: 1.2rem; } } - .content { - font-size: 1.2rem; - font-weight: 400; - } } .createAccountButton { @include button($black, $yellow); @@ -553,6 +554,69 @@ nav { } } +.flyer { + position: relative; + + .background { + height: 400px; + background-repeat: no-repeat; + background-image: linear-gradient( + 270deg, + #121212 67.5%, + rgba(18, 18, 18, 0) 100% + ), + url("assets/flyer-background.png"); + @media (max-width: $breakpoint) { + height: 300px; + background-image: linear-gradient( + 316deg, + #121212 47.44%, + rgba(18, 18, 18, 0.6) 100% + ), + url("assets/flyer-background-mobile.png"); + filter: blur(4px); + } + } + .content { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + margin: auto; + position: absolute; + top: 0; + width: 100%; + height: 100%; + padding: 2rem 1rem; + justify-content: space-around; + h2 { + font-size: 1.75rem; + font-weight: 900; + margin: 0; + } + p { + line-height: 120%; + margin: 0; + } + .button { + @include button($black, $yellow); + margin: 0; + font-size: 1.5rem; + text-align: center; + justify-content: center; + font-weight: 700; + padding: 2rem 3rem; + border-radius: 4px; + background: radial-gradient( + 105.25% 64.58% at 49.68% 70.83%, + rgba(226, 137, 4, 0.5) 0%, + rgba(255, 255, 255, 0) 100% + ), + $yellow; + } + } +} + footer { background-color: $black; display: flex;