Created
July 8, 2018 16:18
-
-
Save alexrah/dcd5e761e5f5e50a0434e8befc9a701c to your computer and use it in GitHub Desktop.
MXNZqW
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
| <div id="page-wrapper"> | |
| <section> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="main-logo mobile"> | |
| <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 308.969 89.688"> | |
| <defs> | |
| <style>.cls-1 { | |
| fill: #000; | |
| fill-rule: evenodd; | |
| }</style> | |
| </defs> | |
| <path d="M297.568 44.924c5.084.523 6.172 2.45 6.698 6.238l.21 1.507c.56 3.29 1.16 3.99 4.487 3.99v.28c-1.158.21-2.455.31-3.61.31-3.087 0-3.716-1.51-4.105-4.66l-.383-3.16c-.422-3.51-1.474-4.31-5.646-4.31h-3.44v9.25c0 1.71.45 2.27 3.96 2.38v.32h-11.08v-.32c3.57-.11 4.14-.7 4.14-2.42V35.35c0-1.685-.56-2.313-4.14-2.42v-.28h10.2c6.45 0 10.06 2.314 10.06 5.96 0 3.155-2.18 5.396-7.37 6.204v.105zm3.96-6.275c0-3.69-1.678-5.47-6.835-5.47h-2.91V44.6h3.33c5.262 0 6.416-2.033 6.416-5.957zm-31.577-5.47h-5.92v10.93h3.34c2.56 0 3.47-.95 4.38-4.8h.32v10.17h-.32c-.91-3.86-1.82-4.84-4.38-4.84h-3.33v11.92h6.53c3.68 0 4.98-1.76 6.9-7.12l.32.03-.17 7.6h-20.7v-.32c3.575-.1 4.14-.7 4.14-2.42V35.35c0-1.68-.565-2.31-4.14-2.42v-.276h19.677l.1 7.185-.316.04c-1.86-5.04-3.05-6.69-6.42-6.69zm-24.73 0h-2.8v21.16c0 1.75.77 2.31 4.42 2.42v.31h-11.82v-.32c3.65-.11 4.42-.67 4.42-2.42V33.18h-2.8c-2.53 0-4 1.436-6.17 6.556l-.31-.037.21-7.05h21.14l.217 7.04-.315.03c-2.137-4.98-3.61-6.56-6.17-6.56zM215 44.92c5.088.523 6.174 2.45 6.697 6.238l.21 1.508c.56 3.293 1.16 3.992 4.486 3.992v.28c-1.156.213-2.453.315-3.61.315-3.085 0-3.716-1.506-4.104-4.658l-.39-3.156c-.42-3.5-1.48-4.31-5.65-4.31h-3.44v9.25c0 1.71.45 2.27 3.96 2.38v.32H202.1v-.32c3.576-.11 4.136-.7 4.136-2.42V35.35c0-1.686-.56-2.314-4.136-2.42v-.28h10.203c6.45 0 10.064 2.313 10.064 5.958 0 3.156-2.176 5.397-7.365 6.205v.104zm3.96-6.275c0-3.682-1.68-5.47-6.833-5.47h-2.913V44.6h3.332c5.26 0 6.413-2.032 6.413-5.956zm-33.25 19.03c-6.032 0-11.57-4.975-11.57-12.756 0-7.75 5.786-12.87 11.604-12.87 5.996 0 11.54 4.94 11.54 12.75 0 7.71-5.79 12.86-11.573 12.86zm-.103-25.13c-4.563 0-8 2.77-8 12.304 0 9.53 3.613 12.33 8.206 12.33 4.56 0 7.994-2.81 7.994-12.3 0-9.57-3.61-12.34-8.2-12.34zM158.284 46.11h-2.562v8.235c0 1.792.662 2.318 4.35 2.42v.315h-11.47v-.315c3.58-.102 4.143-.7 4.143-2.42V35.352c0-1.68-.563-2.31-4.143-2.418v-.278h9.928c6.8 0 9.678 2.838 9.678 6.59 0 3.54-2.876 6.866-9.923 6.866zm6.52-6.833c0-3.504-1.16-6.1-6.24-6.1h-2.842v12.406h2.736c5.265 0 6.347-2.38 6.347-6.307zm-33.042 7.746h8.976v.56h-8.975v-.56zm-8.126 5.957c1.12 3.016 1.542 3.54 4.31 3.784v.32h-10.413v-.32c3.61-.137 3.893-.873 3.086-3.118l-2.21-6.064h-8.73l-1.44 3.75c-1.62 4.17-1.23 5.08 2.31 5.43v.32h-8.03v-.32c2.41-.42 3.32-1.366 4.98-5.502l7.71-19.38h.49l7.92 21.1zm-9.365-16.926h-.1l-4.27 10.97h8.35l-3.96-10.97zM95.1 24.71c3.573-.176 3.647-1.122 2.485-2.944l-5.046-8.06-4.63 6.693c-2.04 2.94-1.41 4.06 1.78 4.31v.31h-8.76v-.32c2.73-.35 3.5-.77 6.41-4.88l4.76-6.72-5.92-9.11C84.7 1.68 84.14 1.26 81.16.87V.59h10.8v.28c-3.4.14-3.65 1.192-2.49 3.048l4.53 7.15 4.064-5.85c2.07-2.975 1.403-4.1-1.788-4.343v-.28h8.766v.28c-2.8.387-3.54.877-6.42 4.907l-4.21 5.923 6.456 9.885c1.51 2.35 2.073 2.74 4.98 3.12v.318H95.1v-.314zm-27.84.91c-6.032 0-11.57-4.975-11.57-12.757C55.688 5.115 61.468 0 67.298 0 73.29 0 78.83 4.94 78.83 12.76c0 7.71-5.787 12.86-11.574 12.86zm8.1-12.793C75.358 3.26 71.748.49 67.15.49c-4.556 0-7.994 2.77-7.994 12.304 0 9.535 3.612 12.337 8.205 12.337 4.56 0 8-2.8 8-12.3zM45.338 33.18h-5.93v10.936h3.33c2.56 0 3.47-.947 4.383-4.8h.32V49.48h-.31c-.91-3.857-1.82-4.837-4.38-4.837h-3.33V56.56h6.52c3.68 0 4.98-1.756 6.91-7.116l.32.036-.17 7.602H32.3v-.315c3.578-.102 4.137-.7 4.137-2.42V35.352c0-1.68-.56-2.31-4.137-2.418v-.278h19.67l.1 7.185-.32.04c-1.86-5.04-3.05-6.69-6.41-6.69zm-7.645-7.56c-6.027 0-11.566-4.975-11.566-12.757C26.127 5.115 31.912 0 37.732 0 43.73 0 49.27 4.94 49.27 12.76c0 7.71-5.788 12.86-11.577 12.86zM45.8 12.828C45.8 3.26 42.184.49 37.593.49c-4.56 0-7.994 2.77-7.994 12.304 0 9.535 3.6 12.337 8.2 12.337 4.55 0 7.99-2.8 7.99-12.3zm-32.45 1.09v8.372c0 1.754.914 2.28 4.244 2.384v.35H6.16v-.314c3.65-.105 4.244-.666 4.244-2.42v-7.745L4.27 3.925c-1.3-2.207-2-2.768-4.28-3.05V.6h10.377v.278c-3.717.14-3.89.983-2.627 3.155l5.225 9.326 4.805-8.28c1.753-3.02 1.61-3.82-1.897-4.21V.59h8.102v.28c-2.63.318-3.54 1.123-5.543 4.45l-5.08 8.59zM5.714 36.37c0-1.892-.95-3.224-4.246-3.436v-.28h6.59l14.52 19.66h.036V37.002c0-2.698-.773-3.576-4.453-4.066v-.28h9.12v.28c-3.47.528-4.03 1.405-4.03 4.067v20.68h-.49L6.42 35.633h-.07v17.073c0 2.695.597 3.572 4.347 4.066v.316h-9.23v-.315c3.544-.493 4.247-1.37 4.247-4.065V36.37zm8.87 27.68c2.63 0 4.526.49 6.524 1.437l1.47-1.647h.245v7.71h-.316c-2.418-5.467-4.56-7.01-8.17-7.01-4.348 0-8.59 3.156-8.59 12.233 0 9.042 4.803 12.408 9.152 12.408 2.21 0 4.03-.63 5.22-1.54v-6.69c0-1.71-.6-2.42-4.14-2.52v-.31h10.07v.32c-2.63.14-2.99.67-2.99 2.49v6.45c-2.38 1.46-5.54 2.3-8.06 2.3-6.56 0-12.73-4.38-12.73-12.83 0-7.64 6.07-12.79 12.31-12.79zm36.442 6.556c0 3.152-2.174 5.395-7.365 6.2v.108c5.09.524 6.18 2.452 6.7 6.238l.21 1.506c.57 3.296 1.16 3.995 4.49 3.995v.28c-1.16.212-2.45.315-3.61.315-3.08 0-3.71-1.504-4.1-4.66l-.38-3.155c-.42-3.503-1.47-4.31-5.64-4.31h-3.44v9.252c0 1.718.46 2.278 3.97 2.385v.315h-11.1v-.315c3.58-.107 4.14-.7 4.14-2.42V67.344c0-1.682-.56-2.312-4.14-2.42v-.28h10.2c6.455 0 10.068 2.315 10.068 5.962zm-13.15-5.436V76.6h3.33c5.262 0 6.42-2.036 6.42-5.96 0-3.68-1.684-5.47-6.838-5.47h-2.912zm33.428-1.12c5.994 0 11.537 4.944 11.537 12.757 0 7.712-5.78 12.866-11.57 12.866-6.03 0-11.57-4.98-11.57-12.76 0-7.746 5.79-12.864 11.61-12.864zm-8.138 12.79c0 9.533 3.61 12.34 8.207 12.34 4.56 0 7.994-2.807 7.994-12.304 0-9.566-3.613-12.336-8.207-12.336-4.56 0-7.994 2.77-7.994 12.3zm34.467-29.256h-8.977v-.56h8.977v.56zm-24.84 6.76c0 1.756.773 2.32 4.416 2.42v.316H65.39v-.315c3.647-.102 4.42-.665 4.42-2.42V33.18h-2.806c-2.528 0-3.998 1.436-6.172 6.556l-.317-.037.21-7.05H81.87l.214 7.04-.315.03c-2.14-4.98-3.62-6.56-6.17-6.56h-2.81v21.17zm25.93 10.58c-3.51.106-3.86.702-3.86 2.384v13.774c0 5.678 3.053 7.57 7.4 7.57 1.997 0 3.544-.526 4.7-1.647 1.295-1.296 2.103-3.05 2.103-5.888V68.993c0-2.7-.77-3.577-4.49-4.07v-.28h9.117v.28c-3.472.53-3.998 1.404-3.998 4.07v12.37c0 4.906-2.914 8.272-8.695 8.272-5.682 0-9.12-2.63-9.12-7.78v-14.51c0-1.683-.593-2.313-4.134-2.42v-.28h10.977v.28zm38.767 6.31c0 3.538-2.88 6.867-9.924 6.867h-2.56v8.24c0 1.79.664 2.31 4.348 2.42v.32h-11.467v-.31c3.578-.1 4.142-.7 4.142-2.41v-19c0-1.68-.57-2.31-4.15-2.414v-.28h9.92c6.8 0 9.67 2.84 9.67 6.59zm-12.484 6.343h2.734c5.264 0 6.346-2.385 6.346-6.31 0-3.505-1.156-6.1-6.24-6.1h-2.84v12.41z" class="cls-1"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="main-image-single-page"> | |
| <figure> | |
| <a href="#"> | |
| <picture> | |
| <source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-320w.jpg" media="(max-width: 320px)"> | |
| <source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-412w.jpg" media="(max-width: 412px)"> | |
| <source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-640w.jpg" media="(max-width: 640px)"> | |
| <source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-750w.jpg" media="(max-width: 750px)"> | |
| <source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-768w.jpg" media="(max-width: 768px)"> | |
| <source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-824w.jpg" media="(max-width: 824px)"> | |
| <source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-1024w.jpg" media="(max-width: 1024px)"> | |
| <source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-1536w.jpg" media="(max-width: 1536px)"> | |
| <source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-2048w.jpg" media="(min-width: 1537px)"> | |
| <img src="" alt=""> | |
| </picture> | |
| </a> | |
| </figure> | |
| </section> | |
| <section id="main-header-single-page"> | |
| <div class="container"> | |
| <!-- Logo --> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="main-logo desktop"> | |
| <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 308.969 89.688"> | |
| <defs> | |
| <style>.cls-1 { | |
| fill: #000; | |
| fill-rule: evenodd; | |
| }</style> | |
| </defs> | |
| <path d="M297.568 44.924c5.084.523 6.172 2.45 6.698 6.238l.21 1.507c.56 3.29 1.16 3.99 4.487 3.99v.28c-1.158.21-2.455.31-3.61.31-3.087 0-3.716-1.51-4.105-4.66l-.383-3.16c-.422-3.51-1.474-4.31-5.646-4.31h-3.44v9.25c0 1.71.45 2.27 3.96 2.38v.32h-11.08v-.32c3.57-.11 4.14-.7 4.14-2.42V35.35c0-1.685-.56-2.313-4.14-2.42v-.28h10.2c6.45 0 10.06 2.314 10.06 5.96 0 3.155-2.18 5.396-7.37 6.204v.105zm3.96-6.275c0-3.69-1.678-5.47-6.835-5.47h-2.91V44.6h3.33c5.262 0 6.416-2.033 6.416-5.957zm-31.577-5.47h-5.92v10.93h3.34c2.56 0 3.47-.95 4.38-4.8h.32v10.17h-.32c-.91-3.86-1.82-4.84-4.38-4.84h-3.33v11.92h6.53c3.68 0 4.98-1.76 6.9-7.12l.32.03-.17 7.6h-20.7v-.32c3.575-.1 4.14-.7 4.14-2.42V35.35c0-1.68-.565-2.31-4.14-2.42v-.276h19.677l.1 7.185-.316.04c-1.86-5.04-3.05-6.69-6.42-6.69zm-24.73 0h-2.8v21.16c0 1.75.77 2.31 4.42 2.42v.31h-11.82v-.32c3.65-.11 4.42-.67 4.42-2.42V33.18h-2.8c-2.53 0-4 1.436-6.17 6.556l-.31-.037.21-7.05h21.14l.217 7.04-.315.03c-2.137-4.98-3.61-6.56-6.17-6.56zM215 44.92c5.088.523 6.174 2.45 6.697 6.238l.21 1.508c.56 3.293 1.16 3.992 4.486 3.992v.28c-1.156.213-2.453.315-3.61.315-3.085 0-3.716-1.506-4.104-4.658l-.39-3.156c-.42-3.5-1.48-4.31-5.65-4.31h-3.44v9.25c0 1.71.45 2.27 3.96 2.38v.32H202.1v-.32c3.576-.11 4.136-.7 4.136-2.42V35.35c0-1.686-.56-2.314-4.136-2.42v-.28h10.203c6.45 0 10.064 2.313 10.064 5.958 0 3.156-2.176 5.397-7.365 6.205v.104zm3.96-6.275c0-3.682-1.68-5.47-6.833-5.47h-2.913V44.6h3.332c5.26 0 6.413-2.032 6.413-5.956zm-33.25 19.03c-6.032 0-11.57-4.975-11.57-12.756 0-7.75 5.786-12.87 11.604-12.87 5.996 0 11.54 4.94 11.54 12.75 0 7.71-5.79 12.86-11.573 12.86zm-.103-25.13c-4.563 0-8 2.77-8 12.304 0 9.53 3.613 12.33 8.206 12.33 4.56 0 7.994-2.81 7.994-12.3 0-9.57-3.61-12.34-8.2-12.34zM158.284 46.11h-2.562v8.235c0 1.792.662 2.318 4.35 2.42v.315h-11.47v-.315c3.58-.102 4.143-.7 4.143-2.42V35.352c0-1.68-.563-2.31-4.143-2.418v-.278h9.928c6.8 0 9.678 2.838 9.678 6.59 0 3.54-2.876 6.866-9.923 6.866zm6.52-6.833c0-3.504-1.16-6.1-6.24-6.1h-2.842v12.406h2.736c5.265 0 6.347-2.38 6.347-6.307zm-33.042 7.746h8.976v.56h-8.975v-.56zm-8.126 5.957c1.12 3.016 1.542 3.54 4.31 3.784v.32h-10.413v-.32c3.61-.137 3.893-.873 3.086-3.118l-2.21-6.064h-8.73l-1.44 3.75c-1.62 4.17-1.23 5.08 2.31 5.43v.32h-8.03v-.32c2.41-.42 3.32-1.366 4.98-5.502l7.71-19.38h.49l7.92 21.1zm-9.365-16.926h-.1l-4.27 10.97h8.35l-3.96-10.97zM95.1 24.71c3.573-.176 3.647-1.122 2.485-2.944l-5.046-8.06-4.63 6.693c-2.04 2.94-1.41 4.06 1.78 4.31v.31h-8.76v-.32c2.73-.35 3.5-.77 6.41-4.88l4.76-6.72-5.92-9.11C84.7 1.68 84.14 1.26 81.16.87V.59h10.8v.28c-3.4.14-3.65 1.192-2.49 3.048l4.53 7.15 4.064-5.85c2.07-2.975 1.403-4.1-1.788-4.343v-.28h8.766v.28c-2.8.387-3.54.877-6.42 4.907l-4.21 5.923 6.456 9.885c1.51 2.35 2.073 2.74 4.98 3.12v.318H95.1v-.314zm-27.84.91c-6.032 0-11.57-4.975-11.57-12.757C55.688 5.115 61.468 0 67.298 0 73.29 0 78.83 4.94 78.83 12.76c0 7.71-5.787 12.86-11.574 12.86zm8.1-12.793C75.358 3.26 71.748.49 67.15.49c-4.556 0-7.994 2.77-7.994 12.304 0 9.535 3.612 12.337 8.205 12.337 4.56 0 8-2.8 8-12.3zM45.338 33.18h-5.93v10.936h3.33c2.56 0 3.47-.947 4.383-4.8h.32V49.48h-.31c-.91-3.857-1.82-4.837-4.38-4.837h-3.33V56.56h6.52c3.68 0 4.98-1.756 6.91-7.116l.32.036-.17 7.602H32.3v-.315c3.578-.102 4.137-.7 4.137-2.42V35.352c0-1.68-.56-2.31-4.137-2.418v-.278h19.67l.1 7.185-.32.04c-1.86-5.04-3.05-6.69-6.41-6.69zm-7.645-7.56c-6.027 0-11.566-4.975-11.566-12.757C26.127 5.115 31.912 0 37.732 0 43.73 0 49.27 4.94 49.27 12.76c0 7.71-5.788 12.86-11.577 12.86zM45.8 12.828C45.8 3.26 42.184.49 37.593.49c-4.56 0-7.994 2.77-7.994 12.304 0 9.535 3.6 12.337 8.2 12.337 4.55 0 7.99-2.8 7.99-12.3zm-32.45 1.09v8.372c0 1.754.914 2.28 4.244 2.384v.35H6.16v-.314c3.65-.105 4.244-.666 4.244-2.42v-7.745L4.27 3.925c-1.3-2.207-2-2.768-4.28-3.05V.6h10.377v.278c-3.717.14-3.89.983-2.627 3.155l5.225 9.326 4.805-8.28c1.753-3.02 1.61-3.82-1.897-4.21V.59h8.102v.28c-2.63.318-3.54 1.123-5.543 4.45l-5.08 8.59zM5.714 36.37c0-1.892-.95-3.224-4.246-3.436v-.28h6.59l14.52 19.66h.036V37.002c0-2.698-.773-3.576-4.453-4.066v-.28h9.12v.28c-3.47.528-4.03 1.405-4.03 4.067v20.68h-.49L6.42 35.633h-.07v17.073c0 2.695.597 3.572 4.347 4.066v.316h-9.23v-.315c3.544-.493 4.247-1.37 4.247-4.065V36.37zm8.87 27.68c2.63 0 4.526.49 6.524 1.437l1.47-1.647h.245v7.71h-.316c-2.418-5.467-4.56-7.01-8.17-7.01-4.348 0-8.59 3.156-8.59 12.233 0 9.042 4.803 12.408 9.152 12.408 2.21 0 4.03-.63 5.22-1.54v-6.69c0-1.71-.6-2.42-4.14-2.52v-.31h10.07v.32c-2.63.14-2.99.67-2.99 2.49v6.45c-2.38 1.46-5.54 2.3-8.06 2.3-6.56 0-12.73-4.38-12.73-12.83 0-7.64 6.07-12.79 12.31-12.79zm36.442 6.556c0 3.152-2.174 5.395-7.365 6.2v.108c5.09.524 6.18 2.452 6.7 6.238l.21 1.506c.57 3.296 1.16 3.995 4.49 3.995v.28c-1.16.212-2.45.315-3.61.315-3.08 0-3.71-1.504-4.1-4.66l-.38-3.155c-.42-3.503-1.47-4.31-5.64-4.31h-3.44v9.252c0 1.718.46 2.278 3.97 2.385v.315h-11.1v-.315c3.58-.107 4.14-.7 4.14-2.42V67.344c0-1.682-.56-2.312-4.14-2.42v-.28h10.2c6.455 0 10.068 2.315 10.068 5.962zm-13.15-5.436V76.6h3.33c5.262 0 6.42-2.036 6.42-5.96 0-3.68-1.684-5.47-6.838-5.47h-2.912zm33.428-1.12c5.994 0 11.537 4.944 11.537 12.757 0 7.712-5.78 12.866-11.57 12.866-6.03 0-11.57-4.98-11.57-12.76 0-7.746 5.79-12.864 11.61-12.864zm-8.138 12.79c0 9.533 3.61 12.34 8.207 12.34 4.56 0 7.994-2.807 7.994-12.304 0-9.566-3.613-12.336-8.207-12.336-4.56 0-7.994 2.77-7.994 12.3zm34.467-29.256h-8.977v-.56h8.977v.56zm-24.84 6.76c0 1.756.773 2.32 4.416 2.42v.316H65.39v-.315c3.647-.102 4.42-.665 4.42-2.42V33.18h-2.806c-2.528 0-3.998 1.436-6.172 6.556l-.317-.037.21-7.05H81.87l.214 7.04-.315.03c-2.14-4.98-3.62-6.56-6.17-6.56h-2.81v21.17zm25.93 10.58c-3.51.106-3.86.702-3.86 2.384v13.774c0 5.678 3.053 7.57 7.4 7.57 1.997 0 3.544-.526 4.7-1.647 1.295-1.296 2.103-3.05 2.103-5.888V68.993c0-2.7-.77-3.577-4.49-4.07v-.28h9.117v.28c-3.472.53-3.998 1.404-3.998 4.07v12.37c0 4.906-2.914 8.272-8.695 8.272-5.682 0-9.12-2.63-9.12-7.78v-14.51c0-1.683-.593-2.313-4.134-2.42v-.28h10.977v.28zm38.767 6.31c0 3.538-2.88 6.867-9.924 6.867h-2.56v8.24c0 1.79.664 2.31 4.348 2.42v.32h-11.467v-.31c3.578-.1 4.142-.7 4.142-2.41v-19c0-1.68-.57-2.31-4.15-2.414v-.28h9.92c6.8 0 9.67 2.84 9.67 6.59zm-12.484 6.343h2.734c5.264 0 6.346-2.385 6.346-6.31 0-3.505-1.156-6.1-6.24-6.1h-2.84v12.41z" class="cls-1"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Description --> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="main-description"> | |
| <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 result of a game-changing merger, which in October 2015 brought together YOOX GROUP and THE NET-A-PORTER GROUP, two companies that have | |
| <b>revolutionized the luxury fashion industry</b> since their birth in 2000.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="tabbed-content"> | |
| <div class="container"> | |
| <div id="wrap-all-tabs"> | |
| <!-- Tabs Menu --> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <nav id="tabs-menu"> | |
| <ul> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Tabs Content --> | |
| <div id="wrap-all-content-tabs"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="newsletter-subscribe-footer"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <h2 class="section-title">newsletter</h2> | |
| </div> | |
| <div class="col-md-8"> | |
| <form action="" id="newsletter-subscribe"> | |
| <input type="email" required id="email"> | |
| <button class="my-btn" id="newsletter-subscribe-trigger">Subscribe</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer id="main-footer"> | |
| <div class="container"> | |
| <div class="row justify-content-center"> | |
| <div class="col-md-6"> | |
| <h6 class="sub-title text-center">COPYRIGHT © 2000-2017 YOOX NET-A-PORTER GROUP</h6> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> |
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 ($) { | |
| $(function () { | |
| const news_count = 5; | |
| const $tabs_menu = $('#tabs-menu > ul'); | |
| const $tabs_content = $('#wrap-all-content-tabs'); | |
| $.ajax({ | |
| url: 'https://jsonplaceholder.typicode.com/posts/', | |
| dataType: 'json' | |
| }).done(function (data) { | |
| console.log('success!'); | |
| for(let i=1; i <= news_count; i++){ | |
| $tabs_menu.append( | |
| `<li><button class="tab-trigger my-btn ${(i===1)?'active':''}" data-tab-id="${i}">${i}</button></li>` | |
| ); | |
| $tabs_content.append( | |
| `<div data-tab-id="${i}" class="wrap-content-tab ${(i===1)?'active':''}"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <h2 class="section-title">${data[i-1].title}</h2> | |
| </div> | |
| <div class="col-md-8"> | |
| <article class="wrap-text-colums"> | |
| <p>${data[i-1].body}</p> | |
| </article> | |
| </div> | |
| </div> | |
| </div>` | |
| ) | |
| } | |
| }) | |
| .fail(function (data) { | |
| console.log('fail!' ); | |
| console.log(data); | |
| }); | |
| $( document ).ajaxComplete(function() { | |
| $('.tab-trigger').on('click', function (event) { | |
| console.log($(this).data('tab-id')); | |
| const current_tab = $(this).data('tab-id'); | |
| $('.tab-trigger').removeClass('active'); | |
| $(".tab-trigger[data-tab-id="+current_tab+"]").addClass('active'); | |
| $(".wrap-content-tab").removeClass('active'); | |
| $(".wrap-content-tab[data-tab-id="+current_tab+"]").addClass('active'); | |
| }); | |
| }); | |
| $('#newsletter-subscribe-trigger').on('click', function (event) { | |
| const email = document.getElementById('email'); | |
| if(email.checkValidity() ){ | |
| event.preventDefault(); | |
| $('#newsletter-subscribe-footer > .container > .row').html(` | |
| <div class="col-md-12"><h2 class="text-center success section-title">grazie, presto riceverai le nostre news</h2></div> | |
| `); | |
| } | |
| }) | |
| }) | |
| })(jQuery) |
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
| :root { | |
| --dark-grey: #333333; | |
| --grey: #666666; | |
| --light-grey: #F2F2F2; | |
| --almost-white: #FFFFFF; | |
| } | |
| body { background-color: var(--grey); font-family: 'Open Sans', sans-serif; } | |
| .container { max-width: 100%; } | |
| #page-wrapper { background-color: white; } | |
| #main-image-single-page figure, body { margin: 0;} | |
| #main-image-single-page figure img { max-width: 100%; } | |
| #main-header-single-page { margin: 28px 0; } | |
| .main-logo.desktop { margin: 0 0 28px; display: none; } | |
| .main-logo.mobile { display: block; padding: 20px 0; } | |
| .main-description p { color: var(--grey); margin: 0} | |
| #wrap-all-tabs { background-color: var(--light-grey); padding: 18px 12px; } | |
| #tabs-menu { margin: 0 0 18px; } | |
| #tabs-menu ul { margin: 0; padding: 0; list-style: none; } | |
| #tabs-menu ul > li { display: inline-block; margin-right: 10px; } | |
| #tabs-menu ul > li:last-child { margin-right: 0; } | |
| .my-btn { background: linear-gradient(to top, #cccccc 0%,#ffffff 100%); } | |
| #tabs-menu ul > li > button { padding: 4px 12px; border: 1px solid var(--grey); } | |
| #tabs-menu ul > li > button.active { background: linear-gradient(to bottom, #cccccc 0%,#ffffff 100%); } | |
| .wrap-content-tab { display: none;} | |
| .wrap-content-tab.active { display: block;} | |
| .sub-title { text-transform: uppercase; color: var(--almost-white); margin: 0; font-size: 10px; } | |
| .section-title { text-transform: uppercase; font-size: 24px; color: var(--dark-grey); margin: 0; } | |
| .wrap-text-colums { column-count: 1; font-size: 14px; color: var(--grey)} | |
| #newsletter-subscribe-footer { margin: 30px 0; } | |
| #newsletter-subscribe { display: flex; } | |
| #newsletter-subscribe input, #newsletter-subscribe button { border: 1px solid var(--grey); color: var(--dark-grey) } | |
| #newsletter-subscribe input { width: 68%; margin-right: 2%; } | |
| #newsletter-subscribe button { width: 30%} | |
| .success { background-color: var(--light-grey); padding: 5px 0; } | |
| #main-footer { background-color: var(--dark-grey); padding: 15px 0;} | |
| @media screen and (min-width: 576px) { | |
| .main-logo.desktop { display: block; } | |
| .main-logo.mobile { display: none; } | |
| } | |
| @media screen and (min-width: 768px) { | |
| .wrap-text-colums { column-count: 2;} | |
| } | |
| @media screen and (min-width: 1140px){ | |
| #page-wrapper { width: 1140px; margin: auto; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
DISCLAIMER!
Since not specified otherwise and for the sake of simplicity, the code is ONLY compatible with the latest browsers specified in the documentation; in production the code would end up compiled with babel and bundled with webpack to support older browsers.
TESTED ON: