Skip to content

Instantly share code, notes, and snippets.

@lightmnd

lightmnd/index.html

Last active January 29, 2018 13:08
Show Gist options
  • Save lightmnd/00f0a28a2d49a7fb9eec764710f5aa5d to your computer and use it in GitHub Desktop.
Save lightmnd/00f0a28a2d49a7fb9eec764710f5aa5d to your computer and use it in GitHub Desktop.
Download ZIP
YezyNx
Raw
index.html
<html >
<head>
<meta charset="UTF-8">
<title>YNAP</title>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<html>
<body>
<div class="wrapper">
<header class="header">
</header>
<article class="main">
<p>YOOX NET-A-PORTER GROUP is the <strong>world’s leading online luxury fashion retailer</strong>. 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 <strong>revolutionized the luxury fashion industry</strong> since their birth in 2000.</p>
</article>
<aside class="aside aside-1">
<img src="https://drive.google.com/uc?export=view&id=0B5l5HdENyjqqSHVGT1llWmxyd0k" alt="logo">
</aside>
<aside class="aside aside-2">
<div class="btn-wrapper">
<button id='req-json' class="request-json active">1</button>
<button id='req-json' class="request-json">2</button>
<button id='req-json' class="request-json">3</button>
<button id='req-json' class="request-json">4</button>
<button id='req-json' class="request-json">5</button>
<div class="title-results">SUNT AUT FACERE REPELLAT PROVIDENT OCCAECATI EXCEPTURI OPTIO REPREHENDERIT</div>
</div>
<div class="content-results">
quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto
</div>
</aside>
<aside class="aside newsletter footer">
<form>
<label>Newsletter</label>
<input input type="email" name="email" required placeholder="[email protected]" id="email-input"/>
<button type="Submit" id="subscribe-btn" class="subscribe-button">Subscribe</button>
</form>
<span class="success">successful subscription, thank you!</span>
</aside>
<footer class="footer content-footer">COPYRIGHT © 2000-2017 YOOX NET-A-PORTER GROUP</footer>
</footer>
</body>
</html>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Raw
script.babel
document.addEventListener('DOMContentLoaded', (event) => {
function getData() {
let btn = document.querySelectorAll('.request-json');
$(btn).on('click', function(){
$(btn).removeClass('active');
$(this).addClass('active');
});
btn.forEach((b, i) => {
b.classList.add(i)
b.addEventListener('click', () => {
let title = document.getElementsByClassName('title-results')
let parag = document.getElementsByClassName('content-results')
// fetch data from endpoint url
fetch(`https://jsonplaceholder.typicode.com/posts/${i+1}`)
.then((response) => {
return response.json();
})
.then((res) => {
title[0].innerHTML = res.title
parag[0].innerHTML = res.body
})
.catch((err) => {
//console.log(err.message)
});
});
});
}
// get data function invoked
getData();
// validation input
let form = $('form');
let inputForm = $('#email-input');
//inputVal = inputForm[0].val()
console.log(inputForm[0].value === '')
// let subscribed = 'Subscribed successfully, thank you!';
let success = $('.success');
let btnSub = $('#subscribe-btn');
form.on('submit',(e) => {
e.preventDefault();
if(inputForm[0].value === '') {
console.log('not email address')
}
form.hide();
success.show();
})
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
//color variables
$grad1: #FFFFFF;
$grad2: #000000;
$bgcolor: #F2F2F2;
$color1: #333333;
$color2: #666666;
body {
padding: 0;
margin: 0;
background: $bgcolor;
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
background: $grad1;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
.wrapper > * {
flex: 1 100%;
}
}
}
.header {
background: url('https://drive.google.com/uc?export=view&id=0B5l5HdENyjqqazE4UF9CQ2ExbjA');
background-repeat: no-repeat;
background-size: cover;
height: 700px;
}
.footer {
background: $color1;
}
.main {
text-align: left;
padding: 5px;
p {
padding: 10px 20px 20px 20px;
font-weight: 100;
}
strong {
font-weight: 800;
}
}
.aside-1 {
padding: 30px 20px 0 20px;
background: #FFF;
img {
position: relative;
display: block;
text-align: left;
}
}
.aside-2 {
padding: 5px;
margin: 0 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-content: stretch;
align-items: stretch;
max-width: 100%;
min-height: 300px;
font-weight: 100;
}
.aside-2 > div.title-results {
float: left;
height: auto;
text-align: left;
text-align: left;
}
.title-results {
font-size: 1.4em;
padding-top: 20px;
text-transform: uppercase !important;
}
.aside-2 > div.content-results {
height: auto;
flex: 1 1 100px;
text-align: left;
column-count: 2;
padding-top: 70px;
}
.btn-wrapper {
padding: 10px;
width: 33%;
text-align: left;
}
.btn-wrapper button {
background: linear-gradient(bottom, #CCCCCC, #FFFFFF);
margin-bottom: 10px;
box-shadow: 0;
padding: 10px;
width: 33px;
height: 33px;
}
.active {
position: relative;
top: 1px;
background: -webkit-linear-gradient(top, #CCCCCC, #FFFFFF);
background: linear-gradient(top, #CCCCCC, #FFFFFF);
background: -moz-linear-gradient(top, #CCCCCC, #FFFFFF);
background: -ms-linear-gradient(top, #CCCCCC, #FFFFFF);
background: -o-linear-gradient(top, #CCCCCC, #FFFFFF);
box-shadow: none;
width: 33px;
height: 33px;
border: 1px solid #333333;
}
.content-results {
padding: 10px;
-webkit-flex-shrink: 2; /* Safari 6.1+ */
flex-shrink: 2;
flex-basis: 100px;
}
.subscribe-button {
position: relative;
top: 1px;
background: -webkit-linear-gradient(bottom, $color2, $grad1);
background: -moz-linear-gradient(bottom, $color2, $grad1);;
background: -ms-linear-gradient(bottom, $color2, $grad1);;
background: -o-linear-gradient(bottom, $color2, $grad1);;
background: linear-gradient(bottom, $grad2, $grad1);
box-shadow: none;
font-size: 1em;
width: 90px;
height: 34px;
margin-left: -4px;
border: 1px solid $color1;
}
.aside-2 {
background: $bgcolor;
}
.newsletter {
text-align: left;
background: $grad1;
text-transform: uppercase;
padding: 30px 10px 20px 20px;
label {
font-size: 1.3em;
font-weight: 400;
width: 33%;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
float:left;
}
input {
width: 57%;
height: 30px;
margin-left: 10px;
text-align: left;
border: 1px solid $color1;
}
}
.success {
display: none;
text-align: right;
float: right;
margin-right: 10px;
}
.content-footer {
text-align: center;
color: #FFF;
font-size: 0.7em;
padding: 20px;
}
@media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
@media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.aside-1 img {
width: 50%;
height: auto;
padding-bottom: 20px;
margin-bottom: 100px;
}
.btn-wrapper button {
border: 1px solid #333333;
font-size: 2em;
width: 60px;
height: 60px;
}
.main p {
font-size: 0.8em;
font-weight: 100;
}
.main strong {
font-weight: bold !important;
}
.aside-2 > div.content-results {
text-align: left;
column-count: 1;
font-size: 1em;
}
.btn-wrapper {
width: 100%;
}
.main { flex: 3 0px; }
.aside-1 { order: 1; }
header {order: 2}
.main { order: 3; }
.aside-2 { order: 4; }
.footer { order: 5; }
.newsletter label {
width: 100%;
font-size: 2.6em;
padding: 10px;
}
form input, form .subscribe-button {
position: relative;
top: 10px;
text-align: left;
font-size: 2em;
padding: 10px;
}
.subscribe-button {
width: 17%;
height: 70px;
}
form #email-input {
margin-left: 0;
width: 77%;
height: 50px;
margin-left: 10px;
}
}
Raw
style.scss
// import google font
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
//color variables
$grad1: #FFFFFF;
$grad2: #000000;
$bgcolor: #F2F2F2;
$color1: #333333;
$color2: #666666;
body {
padding: 0;
margin: 0;
background: $bgcolor;
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
background: $grad1;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
.wrapper > * {
flex: 1 100%;
}
}
}
.header {
background: url('https://drive.google.com/uc?export=view&id=0B5l5HdENyjqqazE4UF9CQ2ExbjA');
background-repeat: no-repeat;
background-size: cover;
height: 700px;
}
.footer {
background: $color1;
}
.main {
text-align: left;
padding: 5px;
p {
padding: 10px 20px 20px 20px;
font-weight: 100;
}
strong {
font-weight: 800;
}
}
.aside-1 {
padding: 30px 20px 0 20px;
background: #FFF;
img {
position: relative;
display: block;
text-align: left;
}
}
.aside-2 {
padding: 5px;
margin: 0 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-content: stretch;
align-items: stretch;
max-width: 100%;
min-height: 300px;
font-weight: 100;
}
.aside-2 > div.title-results {
float: left;
height: auto;
text-align: left;
text-align: left;
}
.title-results {
font-size: 1.4em;
padding-top: 20px;
text-transform: uppercase !important;
}
.aside-2 > div.content-results {
height: auto;
flex: 1 1 100px;
text-align: left;
column-count: 2;
padding-top: 70px;
}
.btn-wrapper {
padding: 10px;
width: 33%;
text-align: left;
}
.btn-wrapper button {
background: linear-gradient(bottom, #CCCCCC, #FFFFFF);
margin-bottom: 10px;
box-shadow: 0;
padding: 10px;
width: 33px;
height: 33px;
}
.active {
position: relative;
top: 1px;
background: -webkit-linear-gradient(top, #CCCCCC, #FFFFFF);
background: linear-gradient(top, #CCCCCC, #FFFFFF);
background: -moz-linear-gradient(top, #CCCCCC, #FFFFFF);
background: -ms-linear-gradient(top, #CCCCCC, #FFFFFF);
background: -o-linear-gradient(top, #CCCCCC, #FFFFFF);
box-shadow: none;
width: 33px;
height: 33px;
border: 1px solid #333333;
}
.content-results {
padding: 10px;
-webkit-flex-shrink: 2; /* Safari 6.1+ */
flex-shrink: 2;
flex-basis: 100px;
}
.subscribe-button {
position: relative;
top: 1px;
background: -webkit-linear-gradient(bottom, $color2, $grad1);
background: -moz-linear-gradient(bottom, $color2, $grad1);;
background: -ms-linear-gradient(bottom, $color2, $grad1);;
background: -o-linear-gradient(bottom, $color2, $grad1);;
background: linear-gradient(bottom, $grad2, $grad1);
box-shadow: none;
font-size: 1em;
width: 90px;
height: 34px;
margin-left: -4px;
border: 1px solid $color1;
}
.aside-2 {
background: $bgcolor;
}
.newsletter {
text-align: left;
background: $grad1;
text-transform: uppercase;
padding: 30px 10px 20px 20px;
label {
font-size: 1.3em;
font-weight: 400;
width: 33%;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
float:left;
}
input {
width: 57%;
height: 30px;
margin-left: 10px;
text-align: left;
border: 1px solid $color1;
}
}
.success {
display: none;
text-align: right;
float: right;
margin-right: 10px;
}
.content-footer {
text-align: center;
color: #FFF;
font-size: 0.7em;
padding: 20px;
}
@media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
@media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.aside-1 img {
width: 50%;
height: auto;
padding-bottom: 20px;
margin-bottom: 100px;
}
.btn-wrapper button {
border: 1px solid #333333;
font-size: 2em;
width: 60px;
height: 60px;
}
.main p {
font-size: 0.8em;
font-weight: 100;
}
.main strong {
font-weight: bold !important;
}
.aside-2 > div.content-results {
text-align: left;
column-count: 1;
font-size: 1em;
}
.btn-wrapper {
width: 100%;
}
.main { flex: 3 0px; }
.aside-1 { order: 1; }
header {order: 2}
.main { order: 3; }
.aside-2 { order: 4; }
.footer { order: 5; }
.newsletter label {
width: 100%;
font-size: 2.6em;
padding: 10px;
}
form input, form .subscribe-button {
position: relative;
top: 10px;
text-align: left;
font-size: 2em;
padding: 10px;
}
.subscribe-button {
width: 17%;
height: 70px;
}
form #email-input {
margin-left: 0;
width: 77%;
height: 50px;
margin-left: 10px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment