"Responsive Email Template"
Bootstrap 3.3.0 Snippet by cloozis

<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 ----------> <!-- Responsive Email Template by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT --> <div id="mailsub" class="notification" align="center"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 320px;"><tr><td align="center" bgcolor="#eff3f8"> <!--[if gte mso 10]> <table width="680" border="0" cellspacing="0" cellpadding="0"> <tr><td> <![endif]--> <table border="0" cellspacing="0" cellpadding="0" class="table_width_100" width="100%" style="max-width: 680px; min-width: 300px;"> <tr><td> <!-- padding --><div style="height: 80px; line-height: 80px; font-size: 10px;"> </div> </td></tr> <!--header --> <tr><td align="center" bgcolor="#ffffff"> <!-- padding --><div style="height: 30px; line-height: 30px; font-size: 10px;"> </div> <table width="90%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="left"><!-- Item --><div class="mob_center_bl" style="float: left; display: inline-block; width: 115px;"> <table class="mob_center" width="115" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse;"> <tr><td align="left" valign="middle"> <!-- padding --><div style="height: 20px; line-height: 20px; font-size: 10px;"> </div> <table width="115" border="0" cellspacing="0" cellpadding="0" > <tr><td align="left" valign="top" class="mob_center"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 13px;"> <font face="Arial, Helvetica, sans-seri; font-size: 13px;" size="3" color="#596167"> <img src="http://artloglab.com/metromail/images/logo.gif" width="115" height="19" alt="Metronic" border="0" style="display: block;" /></font></a> </td></tr> </table> </td></tr> </table></div><!-- Item END--><!--[if gte mso 10]> </td> <td align="right"> <![endif]--><!-- Item --><div class="mob_center_bl" style="float: right; display: inline-block; width: 88px;"> <table width="88" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse: collapse;"> <tr><td align="right" valign="middle"> <!-- padding --><div style="height: 20px; line-height: 20px; font-size: 10px;"> </div> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr><td align="right"> <!--social --> <div class="mob_center_bl" style="width: 88px;"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td width="30" align="center" style="line-height: 19px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"> <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="http://artloglab.com/metromail/images/facebook.gif" width="10" height="19" alt="Facebook" border="0" style="display: block;" /></font></a> </td><td width="39" align="center" style="line-height: 19px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"> <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="http://artloglab.com/metromail/images/twitter.gif" width="19" height="16" alt="Twitter" border="0" style="display: block;" /></font></a> </td><td width="29" align="right" style="line-height: 19px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"> <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="http://artloglab.com/metromail/images/dribbble.gif" width="19" height="19" alt="Dribbble" border="0" style="display: block;" /></font></a> </td></tr> </table> </div> <!--social END--> </td></tr> </table> </td></tr> </table></div><!-- Item END--></td> </tr> </table> <!-- padding --><div style="height: 50px; line-height: 50px; font-size: 10px;"> </div> </td></tr> <!--header END--> <!--content 1 --> <tr><td align="center" bgcolor="#fbfcfd"> <table width="90%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center"> <!-- padding --><div style="height: 60px; line-height: 60px; font-size: 10px;"> </div> <div style="line-height: 44px;"> <font face="Arial, Helvetica, sans-serif" size="5" color="#57697e" style="font-size: 34px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: 34px; color: #57697e;"> Awesome User Expierence </span></font> </div> <!-- padding --><div style="height: 40px; line-height: 40px; font-size: 10px;"> </div> </td></tr> <tr><td align="center"> <div style="line-height: 24px;"> <font face="Arial, Helvetica, sans-serif" size="4" color="#57697e" style="font-size: 15px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #57697e;"> Lorem ipsum dolor sit amet consectetuer sed<br> diam nonumy nibh elit dolore. </span></font> </div> <!-- padding --><div style="height: 40px; line-height: 40px; font-size: 10px;"> </div> </td></tr> <tr><td align="center"> <div style="line-height: 24px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 13px;"> <font face="Arial, Helvetica, sans-seri; font-size: 13px;" size="3" color="#596167"> <img src="http://artloglab.com/metromail/images/trial.gif" width="193" height="43" alt="30-DAYS FREE TRIAL" border="0" style="display: block;" /></font></a> </div> <!-- padding --><div style="height: 60px; line-height: 60px; font-size: 10px;"> </div> </td></tr> </table> </td></tr> <!--content 1 END--> <!--content 2 --> <tr><td align="center" bgcolor="#ffffff" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eff2f4;"> <table width="94%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center"> <!-- padding --><div style="height: 40px; line-height: 40px; font-size: 10px;"> </div> <div class="mob_100" style="float: left; display: inline-block; width: 33%;"> <table class="mob_100" width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse;"> <tr><td align="center" style="line-height: 14px; padding: 0 27px;"> <!-- padding --><div style="height: 40px; line-height: 40px; font-size: 10px;"> </div> <div style="line-height: 14px;"> <font face="Arial, Helvetica, sans-serif" size="3" color="#4db3a4" style="font-size: 14px;"> <strong style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #4db3a4;"> <a href="#1" target="_blank" style="color: #4db3a4; text-decoration: none;">UNLIMITED LAYOUTS</a> </strong></font> </div> <!-- padding --><div style="height: 18px; line-height: 18px; font-size: 10px;"> </div> <div style="line-height: 21px;"> <font face="Arial, Helvetica, sans-serif" size="3" color="#98a7b9" style="font-size: 14px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #98a7b9;"> Lorem ipsum dolor sit amet consectetuer sed et diam noumy elit dolore </span></font> </div> </td></tr> </table> </div> <div class="mob_100" style="float: left; display: inline-block; width: 33%;"> <table class="mob_100" width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse;"> <tr><td align="center" style="line-height: 14px; padding: 0 27px;"> <!-- padding --><div style="height: 40px; line-height: 40px; font-size: 10px;"> </div> <div style="line-height: 14px;"> <font face="Arial, Helvetica, sans-serif" size="3" color="#4db3a4" style="font-size: 14px;"> <strong style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #4db3a4;"> <a href="#2" target="_blank" style="color: #4db3a4; text-decoration: none;">GREAT SUPPORT</a> </strong></font> </div> <!-- padding --><div style="height: 18px; line-height: 18px; font-size: 10px;"> </div> <div style="line-height: 21px;"> <font face="Arial, Helvetica, sans-serif" size="3" color="#98a7b9" style="font-size: 14px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #98a7b9;"> Lorem ipsum dolor sit amet consectetuer sed et diam noumy elit dolore </span></font> </div> </td></tr> </table> </div> <div class="mob_100" style="float: left; display: inline-block; width: 33%;"> <table class="mob_100" width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse;"> <tr><td align="center" style="line-height: 14px; padding: 0 27px;"> <!-- padding --><div style="height: 40px; line-height: 40px; font-size: 10px;"> </div> <div style="line-height: 14px;"> <font face="Arial, Helvetica, sans-serif" size="3" color="#4db3a4" style="font-size: 14px;"> <strong style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #4db3a4;"> <a href="#3" target="_blank" style="color: #4db3a4; text-decoration: none;">CLEAN CODE</a> </strong></font> </div> <!-- padding --><div style="height: 18px; line-height: 18px; font-size: 10px;"> </div> <div style="line-height: 21px;"> <font face="Arial, Helvetica, sans-serif" size="3" color="#98a7b9" style="font-size: 14px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #98a7b9;"> Lorem ipsum dolor sit amet consectetuer sed et diam noumy elit dolore </span></font> </div> </td></tr> </table> </div> </td></tr> <tr><td><!-- padding --><div style="height: 80px; line-height: 80px; font-size: 10px;"> </div></td></tr> </table> </td></tr> <!--content 2 END--> <!--links --> <tr><td align="center" bgcolor="#ffffff" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eff2f4;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center"> <!-- padding --><div style="height: 32px; line-height: 32px; font-size: 10px;"> </div> <table width="80%" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="middle" style="font-size: 12px; line-height: 22px;"> <font face="Tahoma, Arial, Helvetica, sans-serif" size="2" color="#282f37" style="font-size: 12px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #5b9bd1;"> <a href="#PRODUCTS" target="_blank" style="color: #5b9bd1; text-decoration: none;">PRODUCTS</a>     <img src="http://artloglab.com/metromail/images/dot.gif" alt="|" width="9" height="9" class="mob_display_none" />     <a href="#FEATURES" target="_blank" style="color: #5b9bd1; text-decoration: none;">FEATURES</a>     <img src="http://artloglab.com/metromail/images/dot.gif" alt="|" width="9" height="9" class="mob_display_none" />     <a href="#LAYOUTS" target="_blank" style="color: #5b9bd1; text-decoration: none;">LAYOUTS</a>     <img src="http://artloglab.com/metromail/images/dot.gif" alt="|" width="9" height="9" class="mob_display_none" />     <a href="#SUPPORT" target="_blank" style="color: #5b9bd1; text-decoration: none;">SUPPORT</a>     <img src="http://artloglab.com/metromail/images/dot.gif" alt="|" width="9" height="9" class="mob_display_none" />     <a href="#DISCOVER" target="_blank" style="color: #5b9bd1; text-decoration: none;">DISCOVER</a> </span></font> </td> </tr> </table> </td></tr> <tr><td><!-- padding --><div style="height: 32px; line-height: 32px; font-size: 10px;"> </div></td></tr> </table> </td></tr> <!--links END--> <!--content 3 --> <tr><td align="center" bgcolor="#ffffff" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eff2f4;"> <table width="94%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center"> <!-- padding --><div style="height: 80px; line-height: 80px; font-size: 10px;"> </div> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center"> <font face="Arial, Helvetica, sans-serif" size="3" color="#57697e" style="font-size: 26px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: 26px; color: #57697e;"> Featured Works </span></font> </td></tr> </table> <div class="mob_100" style="float: left; display: inline-block; width: 33%;"> <table class="mob_100" width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse;"> <tr><td align="center" style="line-height: 14px; padding: 0 10px;"> <!-- padding --><div style="height: 40px; line-height: 40px; font-size: 10px;"> </div> <div style="line-height: 14px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"> <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="http://artloglab.com/metromail/images/img1.jpg" width="185" alt="Image 1" border="0" style="display: block; width: 100%; height: auto;" /></font></a> </div> </td></tr> </table> </div> <div class="mob_100" style="float: left; display: inline-block; width: 33%;"> <table class="mob_100" width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse;"> <tr><td align="center" style="line-height: 14px; padding: 0 10px;"> <!-- padding --><div style="height: 40px; line-height: 40px; font-size: 10px;"> </div> <div style="line-height: 14px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"> <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="http://artloglab.com/metromail/images/img2.jpg" width="185" alt="Image 2" border="0" style="display: block; width: 100%; height: auto;" /></font></a> </div> </td></tr> </table> </div> <div class="mob_100" style="float: left; display: inline-block; width: 33%;"> <table class="mob_100" width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse;"> <tr><td align="center" style="line-height: 14px; padding: 0 10px;"> <!-- padding --><div style="height: 40px; line-height: 40px; font-size: 10px;"> </div> <div style="line-height: 14px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"> <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="http://artloglab.com/metromail/images/img3.jpg" width="185" alt="Image 3" border="0" style="display: block; width: 100%; height: auto;" /></font></a> </div> </td></tr> </table> </div> </td></tr> <tr><td><!-- padding --><div style="height: 80px; line-height: 80px; font-size: 10px;"> </div></td></tr> </table> </td></tr> <!--content 3 END--> <!--brands --> <tr><td align="center" bgcolor="#ffffff" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eff2f4;"> <table width="94%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center"> <div class="mob_100" style="float: left; display: inline-block; width: 25%;"> <table class="mob_100" width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse;"> <tr><td align="center" style="line-height: 14px; padding: 0 24px;"> <!-- padding --><div style="height: 30px; line-height: 30px; font-size: 10px;"> </div> <div style="line-height: 14px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"> <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="http://artloglab.com/metromail/images/evernote.gif" width="125" alt="Evernote" border="0" class="mob_width_50" style="display: block; width: 100%; height: auto;" /></font></a> </div> </td></tr> </table> </div> <div class="mob_100" style="float: left; display: inline-block; width: 25%;"> <table class="mob_100" width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse;"> <tr><td align="center" style="line-height: 14px; padding: 0 24px;"> <!-- padding --><div style="height: 30px; line-height: 30px; font-size: 10px;"> </div> <div style="line-height: 14px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"> <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="http://artloglab.com/metromail/images/pinterest.gif" width="107" alt="Pinterest" border="0" class="mob_width_50" style="display: block; width: 100%; height: auto;" /></font></a> </div> </td></tr> </table> </div> <div class="mob_100" style="float: left; display: inline-block; width: 25%;"> <table class="mob_100" width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse;"> <tr><td align="center" style="line-height: 14px; padding: 0 24px;"> <!-- padding --><div style="height: 30px; line-height: 30px; font-size: 10px;"> </div> <div style="line-height: 14px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"> <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="http://artloglab.com/metromail/images/ng.gif" width="103" alt="National Geographic" border="0" class="mob_width_50" style="display: block; width: 100%; height: auto;" /></font></a> </div> </td></tr> </table> </div> <div class="mob_100" style="float: left; display: inline-block; width: 25%;"> <table class="mob_100" width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse;"> <tr><td align="center" style="line-height: 14px; padding: 0 24px;"> <!-- padding --><div style="height: 30px; line-height: 30px; font-size: 10px;"> </div> <div style="line-height: 14px;"> <a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"> <font face="Arial, Helvetica, sans-serif" size="2" color="#596167"> <img src="http://artloglab.com/metromail/images/shopify.gif" width="116" alt="Shopify" border="0" class="mob_width_50" style="display: block; width: 100%; height: auto;" /></font></a> </div> </td></tr> </table> </div> </td></tr> <tr><td><!-- padding --><div style="height: 28px; line-height: 28px; font-size: 10px;"> </div></td></tr> </table> </td></tr> <!--brands END--> <!--footer --> <tr><td class="iage_footer" align="center" bgcolor="#ffffff"> <!-- padding --><div style="height: 80px; line-height: 80px; font-size: 10px;"> </div> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center"> <font face="Arial, Helvetica, sans-serif" size="3" color="#96a5b5" style="font-size: 13px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #96a5b5;"> 2015 © Metronic. ALL Rights Reserved. </span></font> </td></tr> </table> <!-- padding --><div style="height: 30px; line-height: 30px; font-size: 10px;"> </div> </td></tr> <!--footer END--> <tr><td> <!-- padding --><div style="height: 80px; line-height: 80px; font-size: 10px;"> </div> </td></tr> </table> <!--[if gte mso 10]> </td></tr> </table> <![endif]--> </td></tr> </table> </div> <br> <br> <center> <strong>Powered by <a href="http://j.mp/metronictheme" target="_blank">KeenThemes</a></strong> </center> <br> <br>
/*** User Profile Sidebar by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT ***/ body { padding: 0; margin: 0; } html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;} @media only screen and (max-device-width: 680px), only screen and (max-width: 680px) { *[class="table_width_100"] { width: 96% !important; } *[class="border-right_mob"] { border-right: 1px solid #dddddd; } *[class="mob_100"] { width: 100% !important; } *[class="mob_center"] { text-align: center !important; } *[class="mob_center_bl"] { float: none !important; display: block !important; margin: 0px auto; } .iage_footer a { text-decoration: none; color: #929ca8; } img.mob_display_none { width: 0px !important; height: 0px !important; display: none !important; } img.mob_width_50 { width: 40% !important; height: auto !important; } } .table_width_100 { width: 680px; }

Related: See More


Questions / Comments: