<div class="header-form">
<span class="title">Subscribe our newsletter!</span>
<input type="text" placeholder="
[email protected]">
<a href="" class="cta">Stay tuned</a>
<span id="hide-form">Skip newsletter sub</span>
</div>
<div class="header">
<span class="title">Going outside<br>is highly overrated.</span>
<p>“I created the OASIS because I never felt at home in the real world. I didn't know how to connect with the people there. I was afraid, for all of my life, right up until I knew it was ending. That was when I realized, as terrifying and painful as reality can be, it's also the only place where you can find true happiness. Because reality is real.” </p>
<a href="" class="cta">Enter the Oasis</a>
<span id="show-form">Subscribe news</span>
</div>
input {
display: block;
margin: 0 auto 20px;
background: #f5f7fa;
height: 60px;
border: none;
border-radius: 3px;
text-align: center;
font-size: 2rem;
}
.title {
font-weight: bold;
background: #000;
color: #fff;
}
.header-form {
position: relative;
background: #fff;
text-align: center;
padding: 100px;
}
.header-form .title {
display: inline-block;
font-size: 2rem;
margin-bottom: 20px;
}
.header {
position: relative;
background-image: url(https://images.unsplash.com/photo-1519335553051-96f1218cd5fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=2611&q=80);
background-size: cover;
background-position: center;
height: 600px;
padding: 100px;
color: #fff;
}
.header .title {
font-size: 5rem;
}
.cta {
display: inline-block;
color: #000;
text-decoration: none;
padding: 10px 20px;
border-radius: 3px;
border: 1px solid;
}
.header-form .cta:hover {
background: #000;
color: #fff;
border: 1px solid #000;
}
.header .cta {
color: #fff;
}
.header .cta:hover {
background: #fff;
color: #000;
border: 1px solid #fff;
}
#hide-form,
#show-form {
cursor: pointer;
}
#hide-form:hover,
#show-form:hover {
text-decoration: underline;
}
#hide-form {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
}
#show-form {
position: absolute;
display: none;
color: white;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
$("#hide-form").click(function() {
$(".header-form").slideUp();
$("#show-form").fadeIn();
});
$("#show-form").click(function() {
$(".header-form").slideDown();
$("#show-form").fadeOut();
});