<div id="subscribe">
<h1>Subscribe<br> to be notified about<br> next updates</h1>
<form action="#">
<input type="email" placeholder="ENTER YOUR EMAIL HERE"><br>
<input type="submit" value="Subscribe" >
</form>
</div>
@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Play');
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
body{
background: #fcc6e6;
}
#subscribe{
width: 800px;
height: 500px;
background: white;
margin: 0 auto;
text-align: center;
margin-top: 70px;
margin-bottom: 20px;
box-shadow: 0 -40px 0 -20px rgba(255,255,255,0.5), 0 -80px 0 -40px rgba(255,255,255,0.5)
}
input[type="email"]{
padding: 20px 0px;
border: none;
width: 100%;
text-align: center;
border-bottom: 2px solid #ccc;
margin-top: 290px;
outline: none;
position: relative;
top: -90px;
left: 50%;
transform: translate(-50%,-50%);
}
::placeholder{
color: #ccc;
font-weight: bold;
}
input[type="submit"]{
background-color: #fc1c8f;
border-radius: 20px;
width: 120px;
height: 40px;
border: none;
box-shadow: 2px 2px 2px 2px rgba(252,28,143,0.5);
color: white;
font-weight: bold;
cursor: pointer;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%,-50%);
}
h1{
color: #fc1ccc;
position: relative;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 40px;
font-family: "Dancing Script";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.