<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body style="padding:0;margin:0;">
<table width="100%" bgcolor="#dddddd" height="100%" width="100%">
<tr><td align="center" valign="top">
<table width="600" bgcolor="#ffffff" id="content" style="border:solid 1px #ccc;" cellpadding="0" cellspacing="10">
<tr>
<td height="150">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="header" align="left" valign="middle">
<table id="header-logo" width="200" cellpadding="0" cellspacing="0" border="0" align="right">
<tr>
<td width="200">
<img src="http://imga.nxjimg.com/emp_image/company_logos/ownerrewards_off.gif" />
</td>
</tr>
</table>
<table id="header-text" width="375" cellpadding="0" cellspacing="0" border="0" align="right">
<tr>
<td style="font-size: 24px; font-family: Helvetica, Arial, sans-serif;">
Joseph,
</td>
</tr>
<tr>
<td id="header-text-intro" style="font-family:Helvetica, Arial, sans-serif; font-size:13px;">
Here are some of this week's top offers. These offers are available to you as an exclusive member benefit.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="100" id="intro-text" style="font-family:Helvetica, Arial, sans-serif; font-size:13px;">
<table id="offers" width="100%" cellpadding="0" cellspacing="0">
<!-- OFFER {{{-->
<tr>
<td height="200" class="offer" width="100%">
<table class="offer-image" width="150" align="right" cellpadding="0" cellspacing="0">
<tr>
<td>
<img class="offer-image" width="150" height="150" src="https://imga.corporateperks.com/secured/offer/merchant/490937/images/merchant.jpg" alt="" />
</td>
</tr>
</table>
<table class="offer-text" width="425" align="right" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 13px; color: #888; font-family: Helvetica, Arial, sans-serif;">
Most popular offer in Apparel
</td>
</tr>
<tr>
<td style="font-size: 22px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">
Brooks Brothers
</td>
</tr>
<tr>
<td style="font-size: 18px; color: #444; font-family: Helvetica, Arial, sans-serif;">
30% off In-store and Online
</td>
</tr>
<tr>
<td style="font-size: 13px; color: #333; font-family: Helvetica, Arial, sans-serif;">
Today only
</td>
</tr>
<tr>
<td style="font-size: 13px; color: #333; font-family: Helvetica, Arial, sans-serif;" height="50">
<table bgcolor="1D6ECE" cellpadding="0" cellspacing="0" class="shopnow" width="150">
<tr>
<td colspan="3" height="5" style="color: #fff;font-size: 1px" align="center"> </td>
</tr>
<tr>
<td width="5" style="color: #fff;font-size: 1px" align="center"> </td>
<td style="color: #fff;" align="center">SHOP NOW</td>
<td width="5" style="color: #fff;font-size: 1px" align="center"> </td>
</tr>
<tr>
<td colspan="3" height="5" style="color: #fff;font-size: 1px" align="center"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--}}} OFFER -->
<!-- OFFER {{{-->
<tr>
<td height="200" class="offer" width="100%">
<table class="offer-image" width="150" align="right" cellpadding="0" cellspacing="0">
<tr>
<td>
<img class="offer-image" width="150" height="150" src="https://imga.corporateperks.com/secured/offer/merchant/490937/images/merchant.jpg" alt="" />
</td>
</tr>
</table>
<table class="offer-text" width="425" align="right" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 13px; color: #888; font-family: Helvetica, Arial, sans-serif;">
Most popular offer in Apparel
</td>
</tr>
<tr>
<td style="font-size: 22px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">
Brooks Brothers
</td>
</tr>
<tr>
<td style="font-size: 18px; color: #444; font-family: Helvetica, Arial, sans-serif;">
30% off In-store and Online
</td>
</tr>
<tr>
<td style="font-size: 13px; color: #333; font-family: Helvetica, Arial, sans-serif;">
Today only
</td>
</tr>
<tr>
<td style="font-size: 13px; color: #333; font-family: Helvetica, Arial, sans-serif;" height="50">
<table bgcolor="1D6ECE" cellpadding="0" cellspacing="0" class="shopnow" width="150">
<tr>
<td colspan="3" height="5" style="color: #fff;font-size: 1px" align="center"> </td>
</tr>
<tr>
<td width="5" style="color: #fff;font-size: 1px" align="center"> </td>
<td style="color: #fff;" align="center">SHOP NOW</td>
<td width="5" style="color: #fff;font-size: 1px" align="center"> </td>
</tr>
<tr>
<td colspan="3" height="5" style="color: #fff;font-size: 1px" align="center"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--}}} OFFER -->
<!-- OFFER {{{-->
<tr>
<td height="200" class="offer" width="100%">
<table class="offer-image" width="150" align="right" cellpadding="0" cellspacing="0">
<tr>
<td>
<img class="offer-image" width="150" height="150" src="https://imga.corporateperks.com/secured/offer/merchant/490937/images/merchant.jpg" alt="" />
</td>
</tr>
</table>
<table class="offer-text" width="425" align="right" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 13px; color: #888; font-family: Helvetica, Arial, sans-serif;">
Most popular offer in Apparel
</td>
</tr>
<tr>
<td style="font-size: 22px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">
Brooks Brothers
</td>
</tr>
<tr>
<td style="font-size: 18px; color: #444; font-family: Helvetica, Arial, sans-serif;">
30% off In-store and Online
</td>
</tr>
<tr>
<td style="font-size: 13px; color: #333; font-family: Helvetica, Arial, sans-serif;">
Today only
</td>
</tr>
<tr>
<td style="font-size: 13px; color: #333; font-family: Helvetica, Arial, sans-serif;" height="50">
<table bgcolor="1D6ECE" cellpadding="0" cellspacing="0" class="shopnow" width="150">
<tr>
<td colspan="3" height="5" style="color: #fff;font-size: 1px" align="center"> </td>
</tr>
<tr>
<td width="5" style="color: #fff;font-size: 1px" align="center"> </td>
<td style="color: #fff;" align="center">SHOP NOW</td>
<td width="5" style="color: #fff;font-size: 1px" align="center"> </td>
</tr>
<tr>
<td colspan="3" height="5" style="color: #fff;font-size: 1px" align="center"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--}}} OFFER -->
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td></tr>
</table>
</body>
@media only screen and (max-width: 600px){
#content {
width: 100%;
}
#header-logo{
text-align: center;
width:100%;
}
#header-text{
width:100%;
}
#intro-text-intro{
padding:.5em;
}
.offer-image{ width: 75px; height:auto; }
table.offer-image{ float:left; }
table.offer-text{ float:left; }
.offer-text{ width: auto;}
.offer-text td{ padding-left: 12px;}
.shopnow{ width:100%; min-width:325px; border-radius: 5px;font-size:18px;font-weight: bold;}
.offer{ background: #f8f8f8; border: solid 1px #ddd;}
#offers{ border-spacing:10px }
}
@media only screen and (max-width: 475px){
table.offer-image{ float:right;margin-bottom: -75px;}
/*table.offer-text{ background: #f8f8f8;}*/
.offer-text td{ padding: 0 10px;}
.shopnow{ width:100%; min-width:auto; border-radius: 5px;}
}
@media only screen and (max-width: 350px){
/*table.offer-image{ display:none; }*/
}
