<form action="">
<div class="container">
<h2>Subscribe to our newsletter</h2>
<p><i class="fa fa-fire"></i> Be the first one to receive our exclusive news</p>
</div>
<div class="container">
<input type="text" placeholder="Name" required>
<input type="text" placeholder="Email" required>
<button type="submit"><i class="fa fa-newspaper-o"></i> Subscribe</button>
</div>
</form>
@import url('https://fonts.googleapis.com/css?family=Lato');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
line-height: 1.5;
font-family:'Roboto', sans-serif;
}
form{
border: 4px solid #f4f4f4;
color: #fff;
background:linear-gradient(to bottom,rgba(0,0,0,.9), rgba(0,0,0,.3)), url('http://www.tradeworks.org.nz/wp-content/uploads/2016/10/Report.jpg');
background-position:center;
background-size:cover;
}
.container{
padding: 1.5rem;
}
.fa{
color:#f1c40f;
}
input[type=text], button[type=submit]{
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
outline: none;
border-radius: 6px;
}
input[type=text]{ border:3px solid #cecece; }
input[type=text]:focus{
border: 3px solid #f1c40f;
}
button[type=submit]{
background-color: #f1c40f;
color: #ffffff;
font-weight: 900;
font-size:0.9rem;
text-transform: uppercase;
transition: all ease-in 200ms;
border: 3px solid transparent;
}
button[type=submit] > i {
color: #fff;
}
button:hover{
background-color:transparent;
color:#f1c40f;
border: 3px solid #f1c40f;
cursor: pointer;
}
button:hover > i{
color: #f1c40f;
}
@media screen and (min-width:400px){
form{
width:80%;
margin:0 auto;
}
}
@media screen and (min-width:520px){
form{
width:60%;
margin:0 auto;
}
}
@media screen and (min-width:720px){
form{
width:50%;
margin:0 auto;
}
}