<div style="line-height: 32px;">
  Can't read this email?
  <a href="#" class="blue bigger-110">
     View it Online &rarr;
  </a>
</div>

<div class="clearfix" style="height: 55px;">
   <div class="pull-left align-middle">
     <a class="navbar-brand" href="#" style="font-size: 18px;">
	  Ace Newsletter
	 </a>
   </div>
 
   <div class="pull-right align-middle text-right">
     <a href="#" class="bigger-115">
	   About
	 </a>
	 &nbsp;
	 <a href="#" class="bigger-115">
	   Contact
	 </a>
   </div>
</div>


<div class="break-6"></div>
<div class="space-16"></div>

<div class="row">
 <div class="col">	
	<div class="text-center">
		<img src="http://placehold.it/550x280" />
	</div>
 </div>
</div>

<div class="row">
   <div class="col-sm-12">
	 <h1 class="blue">Hi, Susan Calvin</h1>
	 <h4>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</h4>
   </div>
</div>


<div class="space-12"></div>
<div class="row">
   <div class="col-sm-12">
	 <div class="alert alert-info">
	   You can also use Zurb's responsive email templates built on Ink.
	   <Br />
	   <a href="http://zurb.com/ink/templates.php">Click here to see them</a>
	 </div>
   </div>
</div>
<div class="space-24"></div>

<div class="row">
 <div class="col-xs-12">
  <h4 class="dark-blue2">Our latest products</h4>
 </div>
</div>

<div class="space-6"></div>
<div class="row sm-border">
   <div class="col-sm-4">
	<img class="pull-left" src="http://placehold.it/165x90" />
	<span>
		<a href="#" class="dark-blue"><b>Aenean sed tellus</b></a>
		<br />
		Pellentesque non lacinia mi
	</span>
   </div>
   
  <div class="col-sm-4">
	<img class="pull-left" src="http://placehold.it/165x90" />
	<span>
		<a href="#" class="dark-blue"><b>Nullam massa sapien</b></a>
		<br />
		Fusce sit amet libero
	</span>
   </div>
   
   <div class="col-sm-4">
	<img class="pull-left" src="http://placehold.it/165x90" />
	<span>	
		<a href="#" class="dark-blue"><b>Convallis eget</b></a>
		<br />
		Cras nunc sapien interdum
	</span>
   </div>
</div>

<div class="space-6"></div>
<div class="hr-32"></div>

<div class="row">
  <div class="col-sm-12">
	<span class="bigger-110">
		Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.
	</span>
	
	<div class="space-12"></div>
	Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo.
	<div class="space-16"></div>
	
	<i class="text-danger">Integer eget odio est, eget malesuada lorem:</i>
	<ul class="spaced">
		<li>
			Aenean sed tellus dui, vitae viverra risus
		</li>
		<li>
			Nullam massa sapien, pulvinar eleifend fringilla id
		</li>
		<li>
			Convallis eget nisi mauris a sagittis dui
		</li>
	</ul>
	
	<div class="space-16"></div>
	Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.
  </div>
</div>


<div class="space-16"></div>
<div class="hr-12"></div>
<div class="space-12"></div>

<div class="row">
   <div class="col-sm-6 text-center">
	 <img src="http://placehold.it/255x150"  />
   </div>
   
  <div class="col-sm-6 ">
	<h4  class="smaller dark-blue2 no-padding-top">Two column - text below</h4>
	HELLO
	<br />
	<br />
	<br />
	<br />
	<div class="text-right">
		<a href="#" class="btn btn-sm btn-info no-border pull-right" style="font-size: 15px;">
			Read More &raquo;
		</a>
	</div>
   </div>

</div>

<div class="space-8"></div>
<div class="hr-24"></div>

<div>
	<div class="clearfix">
		<div class="pull-left">
			<span class="blue bolder">Wednesday</span>
			<br />
			19/11/2013
		</div>
		<div class="pull-left">
			<b>Convallis eget nisi mauris a sagittis dui </b>
			<br />
			Fusce sit amet libero sit amet erat venenatis sollicitudin vitae &hellip;
		</div>
	</div>

	<div class="clearfix">
		<div class="pull-left">
			<span class="blue bolder">Monday</span>
			<br />
			02/02/2014
		</div>
		<div class="pull-left">
			<b>Pellentesque sem dolor, fringilla et pharetra vitae</b>
			<br />
			Sed iaculis pulvinar ligula, ornare fringilla ante viverra et &hellip;
		</div>
	</div>
</div>



<div class="space-12"></div>
<div class="hr hr-24"></div>
	
	

<div class="row">
   <div class="col-sm-6">
	<h4 class="blue">Our Social Channels</h4>
	
	<div style="line-height: 36px;">
		<a href="#" class="btn btn-info btn-sm" style="font-size: 14px;">Twitter</a>
		<a href="#" class="btn btn-primary btn-white btn-bold">Facebook</a>
		<a href="#" class="btn btn-danger btn-white btn-bold">Google+</a>
	</div>
   </div>
   
   <div class="col-sm-6">
	<h4 class="blue">Our Contact Info</h4>
	Phone: 408.341.0600
	<br />
	Email: hseldon@trantor.com
   </div>	   
</div>
<div class="space-16"></div>


<div class="break-6"></div>
<div class="row">
 <div class="col-sm-12">
	 <div class="space-16"></div>
	 <div class="text-center grey bigger-110">&copy; 2014 by Ace Company</div>
	 <div class="space-12"></div>
	 <div class="text-center light-grey">
		<a href="#">Terms</a>
		&nbsp;|&nbsp;
		<a href="#">Privacy</a>
		&nbsp;|&nbsp;
		<a href="#">Unsubscribe</a>
	 </div>
	 <div class="space-16"></div>
 </div>
</div>
<div class="break-8"></div>