<div class="imgbg"> 
<div class="newsletter" style="background: url(http://demo.dotwired.de/necon/wp-content/themes/necon/assets/img/scanlines.png) repeat;height:410px;">
  <div class="heading">
  <h3>Subscribe</h3>
  </div>
  <div class="container clearfix">
    <div class="headline">Free Membership!
    <p>Instantly, Get free access to premium content and free product trials!</p></div>
  <div class="emailcontainer">
<form action="http://healthburp.us5.list-manage.com/subscribe/post?u=ad6e9780187b1dda0fdac8cd5&amp;id=01b10dcdcc" method="post" id="newsletter" class="validate" target="_blank" novalidate>
	<input type="email" value="" name="EMAIL" class="newsletter-email" id="mce-EMAIL" placeholder="email address" required>
	<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="newsletter-sent">
</form>
  </div>
  </div>
  </div>
 </div>
.imgbg {
 background:url(https://i.imgur.com/twS0Szb.jpg) no-repeat;
  top-margin:0;
  top-padding:0;
  top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
}
.container {
		width:70%;
		margin: 0 auto 100px;
		padding-top:20px;
		padding-bottom:40px;
		position:relative;
     background: url(http://demo.dotwired.de/necon/wp-content/themes/necon/assets/img/dark.png);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
	}
.clearfix:after {
		clear: both;
		content: " ";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
		width: 0;
	}

	
	input.newsletter-email{
		width:70%;
		padding:10px;
		float:left;		
		font-family: 'helvetica,;
		font-size:18px;
		margin-right:20px;
		margin-top:0;		
	}
	
	input.newsletter-sent {
		
		padding: 0px 25px 0px 25px;
		
		height:46px;
		font-family: 'helvetica,"Muli",sans-serif' , 'arial';
		font-size:18px;
		text-align:center;
		display:inline-block;
		line-height:46px;
		border:0;
		cursor:pointer;
		transition: all 0.9s ease .09s;	padding: 0 18px;background:#000000; color:#807f7f;
	}
	
	input.newsletter-sent:hover {
		background:#35b1c5; color:#fff;
	
	}
div.heading {
    display: block;
    position: relative;
    text-align: center;
  opacity:.8;filter:alpha(opacity=60);
    margin-bottom: 30px;padding-top:15px;
}
    div.heading h3 {
      font-size: 18px;
      display: inline-block;
      margin: 0 auto;
      color: #fff;
      font-style: italic;
      background: #049fbb;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      -o-border-radius: 100%;
      border-radius: 100%;
      line-height: 100%;
      padding: 40px 15px 40px 15px; }

.emailcontainer {
  display:box;
  padding-left:10%;
}
.headline {
    text-align: center;
    font-size: 34px;
    color: #fff;
    margin: 0 0 25px !important; }
.headline p {
      color: #f5f5f5;
      text-align: center;
      margin-bottom: 20px;
  font-size:14px;
      font-style: italic; }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.