"Bootstrap Responsive Email Templates - Material Design & Bootstrap 4"
Bootstrap 4.0.0 Snippet by MDBootstrap

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <body> <main class="respond" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!--MDB --> <div class="container mt-4"> <div class="text-center darken-grey-text mb-4"> <h1 class="font-bold mt-4 mb-3 h5">Built with Material Design for Bootstrap 4</h1> <a class="btn btn-danger btn-md" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">Free download<i class="fa fa-download pl-2"></i></a> </div> <!-- pre-header --> <table style="display:none!important;"> <tr> <td> <div style="overflow:hidden;display:none;font-size:1px;color:#ffffff;line-height:1px;font-family:Arial;maxheight:0px;max-width:0px;opacity:0;"> Pre-header for the newsletter template </div> </td> </tr> </table> <!-- pre-header end --> <!-- header --> <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="ffffff"> <tr> <td align="center"> <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590"> <tr> <td height="25" style="font-size: 25px; line-height: 25px;"> </td> </tr> <tr> <td align="center"> <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590"> <tr> <td align="center" height="70" style="height:70px;"> <a href="" style="display: block; border-style: none !important; border: 0 !important;"><img width="100" border="0" style="display: block; width: 100px;" src="https://mdbootstrap.com/img/logo/mdb-email.png" alt="" /></a> </td> </tr> <tr> <td align="center"> <table width="360 " border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590 hide"> <tr> <td width="120" align="center" style="font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 24px;"> <a href="" style="color: #312c32; text-decoration: none;">MEN</a> </td> <td width="120" align="center" style="font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 24px;"> <a href="" style="color: #312c32; text-decoration: none;">WOMEN</a> </td> <td width="120" align="center" style="font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 24px;"> <a href="" style="color: #312c32; text-decoration: none;">BLOG</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td height="25" style="font-size: 25px; line-height: 25px;"> </td> </tr> </table> </td> </tr> </table> <!-- end header --> <!-- big image section --> <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="ffffff" class="bg_color"> <tr> <td align="center"> <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590"> <tr> <td align="center" class="section-img"> <a href="" style=" border-style: none !important; display: block; border: 0 !important;"><img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(59).jpg" style="display: block; width: 590px;" width="590" border="0" alt="" /></a> </td> </tr> <tr> <td height="20" style="font-size: 20px; line-height: 20px;"> </td> </tr> <tr> <td align="center" style="color: #343434; font-size: 24px; font-family: Quicksand, Calibri, sans-serif; font-weight:700;letter-spacing: 3px; line-height: 35px;" class="main-header"> <div style="line-height: 35px"> NEW IN <span style="color: #5caad2;">NOVEMBER</span> </div> </td> </tr> <tr> <td height="10" style="font-size: 10px; line-height: 10px;"> </td> </tr> <tr> <td align="center"> <table border="0" width="40" align="center" cellpadding="0" cellspacing="0" bgcolor="eeeeee"> <tr> <td height="2" style="font-size: 2px; line-height: 2px;"> </td> </tr> </table> </td> </tr> <tr> <td height="20" style="font-size: 20px; line-height: 20px;"> </td> </tr> <tr> <td align="center"> <table border="0" width="400" align="center" cellpadding="0" cellspacing="0" class="container590"> <tr> <td align="center" style="color: #888888; font-size: 16px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 24px;"> <div style="line-height: 24px"> Winter is coming. Shop our latest AW16 range, and prepare for the damp, cold, British weather. </div> </td> </tr> </table> </td> </tr> <tr> <td height="25" style="font-size: 25px; line-height: 25px;"> </td> </tr> <tr> <td align="center"> <table border="0" align="center" width="160" cellpadding="0" cellspacing="0" bgcolor="5caad2" style=""> <tr> <td height="10" style="font-size: 10px; line-height: 10px;"> </td> </tr> <tr> <td align="center" style="color: #ffffff; font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 26px;"> <div style="line-height: 26px;"> <a href="" style="color: #ffffff; text-decoration: none;">SHOP NOW</a> </div> </td> </tr> <tr> <td height="10" style="font-size: 10px; line-height: 10px;"> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr class="hide"> <td height="25" style="font-size: 25px; line-height: 25px;"> </td> </tr> <tr> <td height="40" style="font-size: 40px; line-height: 40px;"> </td> </tr> </table> <!-- end section --> <!-- 50% image --> <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="ffffff"> <tr> <td align="center"> <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590"> <tr> <td> <table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td align="center"> <a href="" style=" border-style: none !important; border: 0 !important;"><img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(34).jpg" style="display: block; width: 280px;" width="280" border="0" alt="" /></a> </td> </tr> </table> <table border="0" width="5" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td width="5" height="20" style="font-size: 20px; line-height: 20px;"> </td> </tr> </table> <table border="0" width="260" align="right" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td align="left" style="color: #3d3d3d; font-size: 22px; font-family: Quicksand, Calibri, sans-serif; font-weight:700;letter-spacing: 3px; line-height: 35px;" class="align-center main-header"> <div style="line-height: 35px"> BLOG POST ONE </div> </td> </tr> <tr> <td height="15" style="font-size: 12px; line-height: 12px;"> </td> </tr> <tr> <td align="left"> <table border="0" align="left" cellpadding="0" cellspacing="0" class="container590"> <tr> <td align="center"> <table align="center" width="40" border="0" cellpadding="0" cellspacing="0" bgcolor="eeeeee"> <tr> <td height="2" style="font-size: 2px; line-height: 2px;"></td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td height="15" style="font-size: 12px; line-height: 12px;"> </td> </tr> <tr> <td align="left" style="color: #888888; font-size: 16px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 24px;" class="align-center"> <div style="line-height: 24px"> Lorem ipsum dolor sit amet coni petur adipiscing elit. Praesent at lacus faucibus orcil viverra.. </div> </td> </tr> <tr> <td height="25" style="font-size: 25px; line-height: 25px;"> </td> </tr> <tr> <td align="left"> <table border="0" align="left" cellpadding="0" cellspacing="0" class="container590"> <tr> <td align="center"> <table border="0" align="center" width="120" cellpadding="0" cellspacing="0" style="border: 1px solid #eeeeee; "> <tr> <td height="5" style="font-size: 5px; line-height: 5px;"> </td> </tr> <tr> <td align="center" style="color: #5caad2; font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 20px;"> <div style="line-height: 20px;"> <a href="" style="color: #5caad2; text-decoration: none;">READ MORE</a> </div> </td> </tr> <tr> <td height="8" style="font-size: 8px; line-height: 8px;"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td height="40" style="font-size: 40px; line-height: 40px;"> </td> </tr> </table> <!-- end section --> <!-- 50% image --> <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="ffffff"> <tr> <td align="center"> <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590"> <tr> <td> <table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td align="center"> <a href="" style=" border-style: none !important; border: 0 !important;"><img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(54).jpg" style="display: block; width: 280px;" width="280" border="0" alt="" /></a> </td> </tr> </table> <table border="0" width="5" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td width="5" height="20" style="font-size: 20px; line-height: 20px;"> </td> </tr> </table> <table border="0" width="260" align="right" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td align="left" style="color: #3d3d3d; font-size: 22px; font-family: Quicksand, Calibri, sans-serif; font-weight:700;letter-spacing: 3px; line-height: 35px;" class="align-center main-header"> <div style="line-height: 35px"> BLOG POST TWO </div> </td> </tr> <tr> <td height="15" style="font-size: 12px; line-height: 12px;"> </td> </tr> <tr> <td align="left"> <table border="0" align="left" cellpadding="0" cellspacing="0" class="container590"> <tr> <td align="center"> <table align="center" width="40" border="0" cellpadding="0" cellspacing="0" bgcolor="eeeeee"> <tr> <td height="2" style="font-size: 2px; line-height: 2px;"></td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td height="15" style="font-size: 12px; line-height: 12px;"> </td> </tr> <tr> <td align="left" style="color: #888888; font-size: 16px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 24px;" class="align-center"> <div style="line-height: 24px"> Lorem ipsum dolor sit amet coni petur adipiscing elit. Praesent at lacus faucibus orcil viverra.. </div> </td> </tr> <tr> <td height="25" style="font-size: 25px; line-height: 25px;"> </td> </tr> <tr> <td align="left"> <table border="0" align="left" cellpadding="0" cellspacing="0" class="container590"> <tr> <td align="center"> <table border="0" align="center" width="120" cellpadding="0" cellspacing="0" style="border: 1px solid #eeeeee; "> <tr> <td height="5" style="font-size: 5px; line-height: 5px;"> </td> </tr> <tr> <td align="center" style="color: #5caad2; font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 20px;"> <div style="line-height: 20px;"> <a href="" style="color: #5caad2; text-decoration: none;">READ MORE</a> </div> </td> </tr> <tr> <td height="8" style="font-size: 8px; line-height: 8px;"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td height="40" style="font-size: 40px; line-height: 40px;"> </td> </tr> </table> <!-- end section --> <!-- 50% image --> <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="ffffff"> <tr> <td align="center"> <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590"> <tr> <td> <table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td align="center"> <a href="" style=" border-style: none !important; border: 0 !important;"><img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(31).jpg" style="display: block; width: 280px;" width="280" border="0" alt="" /></a> </td> </tr> </table> <table border="0" width="5" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td width="5" height="20" style="font-size: 20px; line-height: 20px;"> </td> </tr> </table> <table border="0" width="260" align="right" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td align="left" style="color: #3d3d3d; font-size: 22px; font-family: Quicksand, Calibri, sans-serif; font-weight:700;letter-spacing: 3px; line-height: 35px;" class="align-center main-header"> <div style="line-height: 35px"> BLOG POST THREE </div> </td> </tr> <tr> <td height="15" style="font-size: 12px; line-height: 12px;"> </td> </tr> <tr> <td align="left"> <table border="0" align="left" cellpadding="0" cellspacing="0" class="container590"> <tr> <td align="center"> <table align="center" width="40" border="0" cellpadding="0" cellspacing="0" bgcolor="eeeeee"> <tr> <td height="2" style="font-size: 2px; line-height: 2px;"></td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td height="15" style="font-size: 12px; line-height: 12px;"> </td> </tr> <tr> <td align="left" style="color: #888888; font-size: 16px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 24px;" class="align-center"> <div style="line-height: 24px"> Lorem ipsum dolor sit amet coni petur adipiscing elit. Praesent at lacus faucibus orcil viverra.. </div> </td> </tr> <tr> <td height="25" style="font-size: 25px; line-height: 25px;"> </td> </tr> <tr> <td align="left"> <table border="0" align="left" cellpadding="0" cellspacing="0" class="container590"> <tr> <td align="center"> <table border="0" align="center" width="120" cellpadding="0" cellspacing="0" style="border: 1px solid #eeeeee; "> <tr> <td height="5" style="font-size: 5px; line-height: 5px;"> </td> </tr> <tr> <td align="center" style="color: #5caad2; font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 20px;"> <div style="line-height: 20px;"> <a href="" style="color: #5caad2; text-decoration: none;">READ MORE</a> </div> </td> </tr> <tr> <td height="8" style="font-size: 8px; line-height: 8px;"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td height="40" style="font-size: 40px; line-height: 40px;"> </td> </tr> </table> <!-- end section --> <!-- 50% image --> <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="ffffff"> <tr> <td align="center"> <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590"> <tr> <td> <table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td align="center"> <a href="" style=" border-style: none !important; border: 0 !important;"><img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(21).jpg" style="display: block; width: 280px;" width="280" border="0" alt="" /></a> </td> </tr> </table> <table border="0" width="5" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td width="5" height="20" style="font-size: 20px; line-height: 20px;"> </td> </tr> </table> <table border="0" width="260" align="right" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td align="left" style="color: #3d3d3d; font-size: 22px; font-family: Quicksand, Calibri, sans-serif; font-weight:700;letter-spacing: 3px; line-height: 35px;" class="align-center main-header"> <div style="line-height: 35px"> BLOG POST FOUR </div> </td> </tr> <tr> <td height="15" style="font-size: 12px; line-height: 12px;"> </td> </tr> <tr> <td align="left"> <table border="0" align="left" cellpadding="0" cellspacing="0" class="container590"> <tr> <td align="center"> <table align="center" width="40" border="0" cellpadding="0" cellspacing="0" bgcolor="eeeeee"> <tr> <td height="2" style="font-size: 2px; line-height: 2px;"></td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td height="15" style="font-size: 12px; line-height: 12px;"> </td> </tr> <tr> <td align="left" style="color: #888888; font-size: 16px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 24px;" class="align-center"> <div style="line-height: 24px"> Lorem ipsum dolor sit amet coni petur adipiscing elit. Praesent at lacus faucibus orcil viverra.. </div> </td> </tr> <tr> <td height="25" style="font-size: 25px; line-height: 25px;"> </td> </tr> <tr> <td align="left"> <table border="0" align="left" cellpadding="0" cellspacing="0" class="container590"> <tr> <td align="center"> <table border="0" align="center" width="120" cellpadding="0" cellspacing="0" style="border: 1px solid #eeeeee; "> <tr> <td height="5" style="font-size: 5px; line-height: 5px;"> </td> </tr> <tr> <td align="center" style="color: #5caad2; font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 20px;"> <div style="line-height: 20px;"> <a href="" style="color: #5caad2; text-decoration: none;">READ MORE</a> </div> </td> </tr> <tr> <td height="8" style="font-size: 8px; line-height: 8px;"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td height="40" style="font-size: 40px; line-height: 40px;"> </td> </tr> </table> <!-- end section --> <!-- contact section --> <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="ffffff" class="bg_color"> <tr class="hide"> <td height="25" style="font-size: 25px; line-height: 25px;"> </td> </tr> <tr> <td height="40" style="font-size: 40px; line-height: 40px;"> </td> </tr> <tr> <td height="60" style="border-top: 1px solid #e0e0e0;font-size: 60px; line-height: 60px;"> </td> </tr> <tr> <td align="center"> <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590 bg_color"> <tr> <td> <table border="0" width="300" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <!-- logo --> <td align="left"> <a href="" style="display: block; border-style: none !important; border: 0 !important;"><img width="80" border="0" style="display: block; width: 80px;" src="https://mdbootstrap.com/img/logo/mdb-email.png" alt="" /></a> </td> </tr> <tr> <td height="25" style="font-size: 25px; line-height: 25px;"> </td> </tr> <tr> <td align="left" style="color: #888888; font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 23px;" class="text_color"> <div style="color: #333333; font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; font-weight: 600; mso-line-height-rule: exactly; line-height: 23px;"> Email us: <br/> <a href="mailto:" style="color: #888888; font-size: 14px; font-family: 'Hind Siliguri', Calibri, Sans-serif; font-weight: 400;">contact@mdbootstrap.com</a> </div> </td> </tr> </table> <table border="0" width="2" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td width="2" height="10" style="font-size: 10px; line-height: 10px;"></td> </tr> </table> <table border="0" width="200" align="right" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td class="hide" height="45" style="font-size: 45px; line-height: 45px;"> </td> </tr> <tr> <td height="15" style="font-size: 15px; line-height: 15px;"> </td> </tr> <tr> <td> <table border="0" align="right" cellpadding="0" cellspacing="0"> <tr> <td> <a href="https://www.facebook.com/mdbootstrap" style="display: block; border-style: none !important; border: 0 !important;"><img width="24" border="0" style="display: block;" src="http://i.imgur.com/Qc3zTxn.png" alt=""></a> </td> <td>    </td> <td> <a href="https://twitter.com/MDBootstrap" style="display: block; border-style: none !important; border: 0 !important;"><img width="24" border="0" style="display: block;" src="http://i.imgur.com/RBRORq1.png" alt=""></a> </td> <td>    </td> <td> <a href="https://plus.google.com/u/0/b/107863090883699620484/107863090883699620484/posts" style="display: block; border-style: none !important; border: 0 !important;"><img width="24" border="0" style="display: block;" src="http://i.imgur.com/Wji3af6.png" alt=""></a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td height="60" style="font-size: 60px; line-height: 60px;"> </td> </tr> </table> <!-- end section --> <!-- footer ====== --> <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="f4f4f4"> <tr> <td height="25" style="font-size: 25px; line-height: 25px;"> </td> </tr> <tr> <td align="center"> <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590"> <tr> <td> <table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td align="left" style="color: #aaaaaa; font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 24px;"> <div style="line-height: 24px;"> <span style="color: #333333;">Material Design for Bootstrap</span> </div> </td> </tr> </table> <table border="0" align="left" width="5" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td height="20" width="5" style="font-size: 20px; line-height: 20px;"> </td> </tr> </table> <table border="0" align="right" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590"> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <a style="font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 24px;color: #5caad2; text-decoration: none;font-weight:bold;" href="{{UnsubscribeURL}}">UNSUBSCRIBE</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td height="25" style="font-size: 25px; line-height: 25px;"> </td> </tr> </table> <!-- end footer ====== --> <hr class="my-4"> <div class="text-center darken-grey-text mb-4"> <h3 class="font-bold mb-3">Here you can find more Responsive Email Templates:</h3> <a class="btn btn-danger" href="https://mdbootstrap.com/css/bootstrap-email-templates/" target="_blank">Bootstrap Responsive Email Templates</a> </div> </div> <!--MDB --> </main> </body>
.darken-grey-text { color: #2E2E2E; } body { width: 100%; background-color: #ffffff; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; mso-margin-top-alt: 0px; mso-margin-bottom-alt: 0px; mso-padding-alt: 0px 0px 0px 0px; } p, h1, h2, h3, h4 { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } span.preheader { display: none; font-size: 1px; } html { width: 100%; } table { font-size: 14px; border: 0; } /* ----------- responsivity ----------- */ @media only screen and (max-width: 640px) { /*------ top header ------ */ .main-header { font-size: 20px !important; } .main-section-header { font-size: 28px !important; } .show { display: block !important; } .hide { display: none !important; } .align-center { text-align: center !important; } .no-bg { background: none !important; } /*----- main image -------*/ .main-image img { width: 440px !important; height: auto !important; } /* ====== divider ====== */ .divider img { width: 440px !important; } /*-------- container --------*/ .container590 { width: 440px !important; } .container580 { width: 400px !important; } .main-button { width: 220px !important; } /*-------- secions ----------*/ .section-img img { width: 320px !important; height: auto !important; } .team-img img { width: 100% !important; height: auto !important; } } @media only screen and (max-width: 479px) { /*------ top header ------ */ .main-header { font-size: 18px !important; } .main-section-header { font-size: 26px !important; } /* ====== divider ====== */ .divider img { width: 280px !important; } /*-------- container --------*/ .container590 { width: 280px !important; } .container590 { width: 280px !important; } .container580 { width: 260px !important; } /*-------- secions ----------*/ .section-img img { width: 280px !important; height: auto !important; } }

Related: See More


Questions / Comments: