<div id="wrapper">
<div class="pmore"></div>
<div id="container">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1978060/pmoreLogo.svg' alt=''>
<h1>sign up to the newsletter</h1>
<input type="email" placeholder="email address">
<button onclick="thanks()">submit</button>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Oswald');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Oswald', sans-serif;
color: white;
text-transform: uppercase;
letter-spacing: 2px;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(to bottom, #daa7cd 0%,#c4a1ca 60%,#848ec3 100%);
}
#wrapper {
width: 100%;
height: 100vh;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1978060/pmoreBg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.pmore {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1978060/pmore.png);
background-repeat: no-repeat;
background-size: contain;
background-position: right bottom;
width: 100%;
height: 85%;
/* height: 85%; */
position: absolute;
bottom: 0;
right: 0;
}
#container {
width: 45%;
height: auto;
position: absolute;
top: 20%;
left: 20%;
}
h1 {
margin-top: 10%;
font-size: 2.8em;
}
input[type=email] {
width: 100%;
border: 3px solid white;
background-color: transparent;
padding: 2%;
margin-top: 3%;
color: white;
}
::placeholder {
color: white;
}
button {
background-color: #EFC767;
border: none;
padding: 2% 7%;
font-size: 1.2em;
display: block;
margin: 0 auto;
margin-top: 3%;
cursor: pointer;
transition: 0.3s ease;
}
button:hover {
background-color: #F6BC59;
}
input[type=email]:focus,
button:focus {
outline: none;
}
/* @media screen and (max-width: 1500px) {
#wrapper {
background-position: left;
}
} */
var h1 = document.querySelector('h1');
var input = document.querySelector('input');
var button = document.querySelector('button');
function thanks() {
h1.innerHTML = 'Thanks for signing up!';
input.style.display = 'none';
button.style.display = 'none';
}