A Pen by Francesco Pongiluppi on CodePen.
Last active
December 27, 2017 09:47
-
-
Save willywongi/386277620a52cde8d823ffa1fef0f5bb to your computer and use it in GitHub Desktop.
This is actually a test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html class="ynap-fe-exercise" lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet"> | |
| <link href="index.css" rel="stylesheet"> | |
| <script src="index.js"></script> | |
| <script id="ynap-news-story-tmpl" type="text/x-template"> | |
| <article class="ynap-news-story" id="news-story-$id"> | |
| <h1 class="ynap-news-story-title">$title</h1> | |
| <div class="ynap-news-story-body"> | |
| <p>$body</p> | |
| <p>$body</p> | |
| <p>$body</p> | |
| <p>$body</p> | |
| <p>$body</p> | |
| </div> | |
| </article> | |
| </script> | |
| <title>This is actually a test</title> | |
| </head> | |
| <body> | |
| <header id="ynap-front"></header> | |
| <section id="ynap-logo"> | |
| <h1><img src="http://www.ynap.com/wp-content/themes/yoox/img/logo-ynap.svg" alt="YOOX NET-A-PORTER GROUP"></h1> | |
| </section> | |
| <section id="ynap-front-mobile"> | |
| <img srcset=" | |
| https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-320w.jpg 320w, | |
| https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-412w.jpg 412w, | |
| https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-640w.jpg 640w, | |
| https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-750w.jpg 750w, | |
| https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-768w.jpg 768w, | |
| https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-824w.jpg 824w" | |
| sizes=" | |
| (max-width: 320px) 320px, | |
| (max-width: 412px) 412px, | |
| (max-width: 640px) 640px, | |
| (max-width: 750px) 750px, | |
| (max-width: 768px) 768px, | |
| 824px" | |
| src="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-768w.jpg" | |
| alt="A man in a yellow jacket"> | |
| </section> | |
| <section> | |
| <p> | |
| YOOX NET-A-PORTER GROUP is the <b>world's leading online luxury fashion retailer</b>. The Group is a Global company with Anglo-italian roots, the results of a game-changing merger, which in October 2015 brought together YOOX GROUP and NET-A-PORTER | |
| GROUP, two companies that have <b>revolutionized the luxury fashion industry</b> since their birth in 2000.</p> | |
| </section> | |
| <section id="ynap-news-stories"> | |
| <nav id="ynap-news-stories-selector"> | |
| <a href="#news-story-1" class="ynap-active">1</a> | |
| <a href="#news-story-2">2</a> | |
| <a href="#news-story-3">3</a> | |
| <a href="#news-story-4">4</a> | |
| <a href="#news-story-5">5</a> | |
| </nav> | |
| <div id="ynap-news-stories-container"> | |
| <article class="ynap-news-story in" id="news-story-1"> | |
| <h1 class="ynap-news-story-title">sunt aut facere repellat provident occaecati excepturi optio reprehenderit</h1> | |
| <div class="ynap-news-story-body"> | |
| <p>Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p> | |
| <p>Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p> | |
| <p>Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p> | |
| <p>Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p> | |
| <p>Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p> | |
| </div> | |
| </article> | |
| </div> | |
| </section> | |
| <section id="ynap-newsletter"> | |
| <h1 class="ynap-news-story-title">Newsletter</h1> | |
| <form id="ynap-form" action="#"> | |
| <input type="email" placeholder="[email protected]" required pattern='(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$)'> | |
| <button type="submit">Subscribe</button> | |
| <div id="ynap-form-message"> | |
| <p>You are now subscribed to our newsletter.</p> | |
| </div> | |
| </form> | |
| </section> | |
| <footer> | |
| COPYRIGHT © 2000-2017 YOOX NET-A-PORTER GROUP | |
| </footer> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(win, doc) { | |
| const EMAIL_ADDRESS_RE = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; | |
| /** | |
| * Shortcut to `document.getElementById` | |
| * @param {String} id | |
| */ | |
| function byId(id) { | |
| return doc.getElementById(id); | |
| } | |
| /** | |
| * Shortcut to `document.querySelectorAll` | |
| * @param {String} selector | |
| */ | |
| function $(selector) { | |
| return doc.querySelectorAll(selector); | |
| } | |
| let NewsStory = { | |
| url: "https://jsonplaceholder.typicode.com/posts/", | |
| /** | |
| * Shows a single news story identified by its name/id | |
| * @param {String} name | |
| */ | |
| show: function(name) { | |
| let prev = $('.ynap-news-story.in')[0], | |
| next = byId(name); | |
| prev.classList.remove('in'); | |
| prev.classList.add('out'); | |
| next.classList.remove('out') | |
| next.classList.add('in'); | |
| }, | |
| /** | |
| * Loads all news stories from the configured URL | |
| * @returns {Promise} with parsed json data. | |
| */ | |
| load: function() { | |
| return new Promise(function(resolve, reject) { | |
| let xhr = new XMLHttpRequest(); | |
| xhr.onload = () => resolve(JSON.parse(xhr.responseText)); | |
| xhr.onerror = () => reject(xhr.status, xhr.statusText); | |
| xhr.open("get", NewsStory.url, true); | |
| xhr.send(); | |
| }); | |
| } | |
| }; | |
| let Newsletter = { | |
| validation: function(e) { | |
| let form = e.target, | |
| emailField = form.elements.item(0); | |
| if (! EMAIL_ADDRESS_RE.test(emailField.value)) { | |
| emailField.classList.add("invalid"); | |
| e.stopImmediatePropagation(); | |
| e.preventDefault(); | |
| } | |
| }, | |
| onSubmit: function(e) { | |
| let form = e.currentTarget; | |
| e.preventDefault(); | |
| form.querySelector("button").disabled = true; | |
| form.querySelector("input").blur(); | |
| byId("ynap-form-message").classList.add("subscribed"); | |
| } | |
| } | |
| doc.addEventListener("DOMContentLoaded", function() { | |
| let tmpl = byId("ynap-news-story-tmpl").textContent, | |
| nlForm = byId("ynap-form"); | |
| // while user is reading the first story, load all the news | |
| NewsStory.load().then(function(stories) { | |
| let frag = doc.createRange().createContextualFragment( | |
| stories | |
| // the first story comes with the rendered HTML, skip it. | |
| .filter(sty => sty.id > 1 && sty.id < 6) | |
| .map(sty => tmpl.replace(/\$([a-z]+)/ig, (m, n) => sty[n])) | |
| .join("") | |
| ); | |
| byId('ynap-news-stories-container').appendChild(frag); | |
| }); | |
| byId("ynap-news-stories-selector").addEventListener("click", function(e) { | |
| let target = e.target, | |
| story = target.getAttribute('href').replace("#", ""); | |
| e.preventDefault(); | |
| e.currentTarget.querySelectorAll("a").forEach(node => node.classList.remove("ynap-active")); | |
| target.classList.add("ynap-active"); | |
| NewsStory.show(story); | |
| }) | |
| // Newsletter subscription | |
| if (typeof nlForm.reportValidity === "undefined") { | |
| // No native HTML5 validation, provide one | |
| nlForm.elements.item(0).addEventListener("keyup", e => e.target.classList.remove("invalid")); | |
| nlForm.addEventListener("submit", Newsletter.validation); | |
| } | |
| nlForm.addEventListener("submit", Newsletter.onSubmit); | |
| }); | |
| })(window, document); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html.ynap-fe-exercise { | |
| background-color: #666; | |
| } | |
| .ynap-fe-exercise body { | |
| padding: 0; | |
| width: 100%; | |
| max-width: 1024px; | |
| margin: 0 auto; | |
| background-color: #fff; | |
| font-family: "Open Sans", sans-serif; | |
| color: #7c7c7c; | |
| font-size: 14px; | |
| font-weight: 300; | |
| } | |
| .ynap-fe-exercise section { | |
| margin: 0.3em 1.4em; | |
| } | |
| .ynap-fe-exercise p b { | |
| font-weight: 600; | |
| } | |
| #ynap-logo { | |
| padding-top: 1.4em; | |
| margin-top: 0; | |
| } | |
| #ynap-logo h1 { | |
| margin: 0; | |
| } | |
| #ynap-logo img { | |
| width: 100%; | |
| max-width: 310px; | |
| } | |
| #ynap-front { | |
| background-image: url(https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-1024w.jpg); | |
| height: 485px; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| } | |
| #ynap-front-mobile { | |
| display: none; | |
| margin: 1.2em 0 0; | |
| } | |
| #ynap-front-mobile img { | |
| width: 100%; | |
| } | |
| #ynap-news-stories { | |
| background-color: #f2f2f2; | |
| padding: 1.4em 1em 0; | |
| } | |
| #ynap-news-stories-selector a { | |
| border: 1px solid #000; | |
| text-decoration: none; | |
| padding: 0.25em 0.7em; | |
| margin: 0.2em; | |
| display: inline-block; | |
| color: #000; | |
| background-image: linear-gradient(#fff, #ccc); | |
| } | |
| #ynap-news-stories-selector a.ynap-active { | |
| background-image: linear-gradient(#ccc, #fff); | |
| } | |
| #ynap-news-stories-container { | |
| position: relative; | |
| height: 22em; | |
| } | |
| article.ynap-news-story { | |
| display: flex; | |
| margin: 1em 0.25em; | |
| position: absolute; | |
| box-sizing: border-box; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: translate3d(10px, 0, 0); | |
| transition-property: visibility, opacity, transform; | |
| transition-duration: 0s, .35s, .35s; | |
| transition-timing-function: linear, cubic-bezier(.78,.33,.3,.71), cubic-bezier(.78,.33,.3,.71); | |
| } | |
| .ynap-news-story.in { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translate3d(0, 0, 0); | |
| transition-delay: 0s, 0s, 0s; | |
| } | |
| .ynap-news-story.out { | |
| transform: translate3d(10px, 0, 0); | |
| transition-delay: .35s, 0s, 0s; | |
| } | |
| .ynap-news-story-title { | |
| flex: 1; | |
| font-weight: normal; | |
| text-transform: uppercase; | |
| font-size: 24px; | |
| color: #262626; | |
| margin: 0; | |
| padding: 0; | |
| line-height: 28px; | |
| } | |
| .ynap-news-story-body { | |
| flex: 2; | |
| column-count: 2; | |
| } | |
| .ynap-news-story-body p { | |
| margin-top: 0; | |
| } | |
| #ynap-newsletter { | |
| display: flex; | |
| margin: 1.2em 1.4em; | |
| } | |
| #ynap-newsletter > h1 { | |
| flex: 1; | |
| } | |
| #ynap-form { | |
| flex: 2; | |
| display: flex; | |
| position: relative; | |
| } | |
| #ynap-form input, | |
| #ynap-form button { | |
| border: 1px solid #535353; | |
| border-radius: 0; | |
| margin: 0; | |
| font-size: 15px; | |
| } | |
| #ynap-form input { | |
| flex: auto; | |
| padding: 0.25em 0.5em; | |
| border-right-width: 0; | |
| } | |
| #ynap-form input.invalid { | |
| outline: 1px solid rgb(255, 46, 46); | |
| } | |
| #ynap-form button { | |
| flex: initial; | |
| font-weight: lighter; | |
| background-image: linear-gradient(#fff, #ccc); | |
| } | |
| #ynap-form-message { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity .5s ease-out; | |
| text-align: center; | |
| background-color: rgba(255,255,255,.95); | |
| } | |
| #ynap-form-message p { | |
| margin: 0; | |
| padding: .3em; | |
| } | |
| #ynap-form-message.subscribed { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .ynap-fe-exercise footer { | |
| text-align: center; | |
| background: #262626; | |
| font-size: 10px; | |
| padding: 2em; | |
| color: #fff; | |
| font-weight: 600; | |
| } | |
| @media (min-width: 768px) and (max-width: 820px) { | |
| /* tight screens */ | |
| #ynap-news-stories-container { | |
| height: 30em; | |
| } | |
| } | |
| @media screen and (max-width: 768px), (orientation: portrait) { | |
| /* mobile device */ | |
| #ynap-front { | |
| display: none; | |
| } | |
| #ynap-front-mobile { | |
| display: block; | |
| } | |
| #ynap-news-stories { | |
| margin-left: 0; | |
| margin-right: 0; | |
| } | |
| #ynap-news-stories-container { | |
| height: 44em; | |
| } | |
| article.ynap-news-story { | |
| display: block; | |
| } | |
| .ynap-news-story-body { | |
| column-count: auto; | |
| } | |
| #ynap-newsletter { | |
| display: block; | |
| margin-bottom: .6em; | |
| } | |
| #ynap-form { | |
| margin-top: 1em; | |
| } | |
| h1.ynap-news-story-title { | |
| margin-bottom: .6em; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment