"Responsive Email Template"
Bootstrap 3.0.0 Snippet by renomBago

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 > <!-- padding --><div style="height: 60px; line-height: 60px; font-size: 10px;"> </div> <div style="line-height: 44px;" class="notice notice-info"> <font face="Arial, Helvetica, sans-serif" size="5" color="#57697e" style="font-size: 34px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: 25px; color: #45ABCD;"> Job applied successfully </span></font> </div> <!-- padding --><div style="height: 40px; line-height: 40px; font-size: 10px;"> </div> </td></tr> <tr><td > <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. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. strong message. </span></font> </div> <!-- padding --><div style="height: 40px; line-height: 40px; 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;">HOME</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;">JOBSEEKER</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;">EMPLOYER</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;">JOB MATTER</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--> <!--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 © JobseMap. 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>
/*** 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; } .notice { padding: 15px; background-color: #fafafa; border-left: 6px solid #7f7f84; margin-bottom: 10px; -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); } .notice-info { border-color: #45ABCD; } 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: