<!-- this is the markup, keep your hands off! -->

<form>
  <label for="email">Subscribe to our mailing list</label>
  <input type="email" value="" name="email" placeholder="email address" required>
  <input type="submit" value="Subscribe" name="subscribe">
</form>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

html { 
  -webkit-font-smoothing: antialiased;
  background: url("http://marshall-design.com/codepen/form-bg.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

label{
  font:700 70px montserrat;
  text-align:center;
  display:block;
  margin-bottom:35px;
  color:#fff;
  position:relative;
    &:after{
    content: "Don't miss your chance to subscribe to our mailing list for weekly updates and the hottest new trends!";
    font:700 15px montserrat;
    display:block;
    color:#686F75;
    line-height:26px;
    width:470px;
    margin:0 auto;
    margin-top:28px;
  }
}

form{
  margin:0 auto;
  width:550px;
  margin-top:70px;
}

input[type="email"]{
  padding:13px;
  width:70%;
  color:#fff;
  font:400 14px montserrat;
  background:#515862;
  border-radius:50px;
  border:none;
  outline:none;
  margin:0 auto;
  display:block;
  margin-bottom:40px;
  text-indent:10px;
}

input[type="submit"]{
  border:none;
  color:#FFF;
  font:700 14px montserrat;
  padding:15px;
  width:35%;
  background:#85BB3F;
  border-radius:50px;
  margin:0 auto;
  display:block;
}

input[type="submit"]:hover{
  background:#93ce46;
  cursor:pointer;
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  -o-transition:0.5s;
  -ms-transition:0.5s;
  transition:0.5s;
}

::-webkit-input-placeholder {
   color:#FFF;
}
:-moz-placeholder {
   color:#FFF;  
}
::-moz-placeholder { 
   color:#FFF;  
}
:-ms-input-placeholder {  
   color:#FFF;
}
::-webkit-input-placeholder::before { 
	font-family:fontAwesome; 
	content:'\f1d8   '; 
	color:#fff;
}
::-moz-input-placeholder::before { 
	font-family:fontAwesome; 
	content:'\f1d8   '; 
	color:#fff; 
}

::-ms-input-placeholder::before { 
	font-family:fontAwesome; 
	content:'\f1d8   '; 
	color:#fff; 
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.