"Email Template 2"
Bootstrap 3.3.0 Snippet by MTaqi

<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; }*/ }

Related: See More


Questions / Comments: