Skip to content

Instantly share code, notes, and snippets.

@alexrah

alexrah/index.html

Created July 8, 2018 16:18
Show Gist options
  • Save alexrah/dcd5e761e5f5e50a0434e8befc9a701c to your computer and use it in GitHub Desktop.
Save alexrah/dcd5e761e5f5e50a0434e8befc9a701c to your computer and use it in GitHub Desktop.
Download ZIP
MXNZqW
Raw
index.html
<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>
Raw
script.js
(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)
Raw
style.css
: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; }
}
@alexrah
Copy link
Author

alexrah commented Jul 8, 2018 •
edited
Loading

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:

  1. iPhone 7 - Safari 10
  2. iPhone 8/8 Plus - Safari 11
  3. Mac OS - Safari 11.1
  4. Mac OS - Safari 10.1
  5. Android Samsung Galaxy S9 - Chrome 8
  6. Android Google Pixel - Chrome 7.1
  7. Microsoft Windows 10 - Chrome 66
  8. Microsoft Windows 10 - Chrome 67

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment