Created
September 21, 2015 02:26
-
-
Save ashleytbasinger/c33705d3a0ddaff96d57 to your computer and use it in GitHub Desktop.
HTML email template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html xmlns="http://www.w3.org/1999/xhtml"><head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Multipurpose Responsive Email Template</title> | |
| <style type="text/css"> | |
| #outlook a {padding: 0;} | |
| body{width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;} | |
| .ExternalClass {width: 100%;} | |
| .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} | |
| #backgroundTable {margin: 0; padding: 0; width: 100% !important; line-height: 100% !important;} | |
| img {outline: none; text-decoration: none; border: none; -ms-interpolation-mode: bicubic;} | |
| a img {border: none;} | |
| .image_fix {display: block;} | |
| p {margin: 0px 0px !important;} | |
| table td {border-collapse: collapse;} | |
| table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } | |
| table[class=full] {width: 100%; clear: both;} | |
| /*################################################*/ | |
| /*IPAD STYLES*/ | |
| /*################################################*/ | |
| @media only screen and (max-width: 640px) { | |
| a[href^="tel"], a[href^="sms"] { | |
| text-decoration: none; | |
| color: #ffffff; | |
| } | |
| .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { | |
| text-decoration: default; | |
| color: #ffffff !important; | |
| } | |
| table[class=devicewidth] {width: 440px !important; text-align: center !important;} | |
| table[class=devicewidthinner] {width: 420px !important; text-align: center !important;} | |
| img[class="bigimage"]{width: 420px !important; height: 219px !important;} | |
| img[class="col2img"]{width: 420px !important; height: 258px !important;} | |
| td[class="menu"]{text-align: center !important; padding: 0 0 10px 0 !important; width: 100% !important;} | |
| td[class="logo"]{padding: 10px 0 5px 0 !important; margin: 0 auto !important;} | |
| img[class="logo"]{padding: 0 !important; margin: 0 auto !important;} | |
| } | |
| /*##############################################*/ | |
| /*IPHONE STYLES*/ | |
| /*##############################################*/ | |
| @media only screen and (max-width: 480px) { | |
| a[href^="tel"], a[href^="sms"] { | |
| text-decoration: none; | |
| color: #ffffff; | |
| } | |
| .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { | |
| text-decoration: default; | |
| color: #ffffff !important; | |
| } | |
| table[class=devicewidth] {width: 280px !important; text-align: center !important;} | |
| table[class=devicewidthinner] {width: 260px !important; text-align: center !important;} | |
| img[class="bigimage"]{width: 260px !important; height: 136px !important;} | |
| img[class="col2img"]{width: 260px !important; height: 160px !important;} | |
| td[class="menu"]{text-align: center !important; padding: 0 0 10px 0 !important; width: 100% !important;} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <!-- Start of preheader --> | |
| <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0"> | |
| <tr> | |
| <td width="100%"> | |
| <table width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="5"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td align="right" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 10px; color: #999999;"> | |
| If you cannot read this email, please <a href="#" style="text-decoration: none; color: #8E388E;">click here</a> | |
| </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="5"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- End of preheader --> | |
| </div> | |
| <div> | |
| <!-- start of header --> | |
| <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" > | |
| <tr> | |
| <td> | |
| <table width="580" bgcolor="#8E388E" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"> | |
| <tr> | |
| <td> | |
| <!-- logo --> | |
| <table width="280" cellpadding="0" cellspacing="0" border="0" align="left" class="devicewidth"> | |
| <tr> | |
| <td valign="middle" width="270" style="padding: 10px 0 10px 20px;" class="logo"> | |
| <div> | |
| <a href="#"><img src="https://dl.dropboxusercontent.com/u/16065322/bear.png" alt="logo" width="40" border="0" style="display: block; border: none; outline: none; text-decoration: none;" class="logo"></a> | |
| </div> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- End of logo --> | |
| <!-- menu --> | |
| <table width="280" cellpadding="0" cellspacing="0" border="0" align="right" class="devicewidth"> | |
| <tr> | |
| <td width="270" valign="middle" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff; line-height: 24px; padding: 10px 0;" align="right" class="menu"> | |
| <a href="#" style="text-decoration: none; color: #ffffff;">HOME</a> | |
| | | |
| <a href="#" style="text-decoration: none; color: #ffffff;">ABOUT</a> | |
| | | |
| <a href="#" style="text-decoration: none; color: #ffffff;">MENU</a> | |
| </td> | |
| <td width="20"></td> | |
| </tr> | |
| </table> | |
| <!-- End of Menu --> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- end of header --> | |
| </div> | |
| <div> | |
| <!-- image + text --> | |
| <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" > | |
| <tr> | |
| <td> | |
| <table bgcolor="#ffffff" width="580" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth"> | |
| <tr> | |
| <td width="100%" height="20"></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <table width="540" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidthinner"> | |
| <tr> | |
| <!-- start of image --> | |
| <td align="center"> | |
| <a target="_blank" href="#"><img width="540" border="0" height="282" alt="" style="display: block; border: none; outline: none; text-decoration: none;" src="http://placehold.it/540x282" class="bigimage"></a> | |
| </td> | |
| </tr> | |
| <!-- end of image --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="20"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- title --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align: left; line-height: 20px;"> | |
| LOREM IPSUM | |
| </td> | |
| </tr> | |
| <!-- end of title --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="20"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- content --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align: left; line-height: 24px;"> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua | |
| </td> | |
| </tr> | |
| <!-- end of content --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="10"></td> | |
| </tr> | |
| <!-- button --> | |
| <tr> | |
| <td> | |
| <table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" align="center" valign="middle" height="30" style=" background-color: #8E388E; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-clip: padding-box; font-size: 13px; font-family: Helvetica, arial, sans-serif; text-align: center; color: #ffffff; font-weight: 300; padding-left: 18px; padding-right: 18px;"> | |
| <span style="color: #ffffff; font-weight: 300;"> | |
| <a style="color: #ffffff; text-align: center; text-decoration: none;" href="#">Read More</a> | |
| </span> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- /button --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="20"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| <div> | |
| <!-- start textbox-with-title --> | |
| <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" > | |
| <tr> | |
| <td> | |
| <table bgcolor="#ffffff" width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="30"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td> | |
| <table width="540" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner"> | |
| <!-- Title --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align: center; line-height: 20px;"> | |
| NICE HEADING HERE | |
| </td> | |
| </tr> | |
| <!-- End of Title --> | |
| <!-- spacing --> | |
| <tr> | |
| <td height="5"></td> | |
| </tr> | |
| <!-- End of spacing --> | |
| <!-- content --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #95a5a6; text-align: center; line-height: 30px;"> | |
| Lorem ipsum dolor sit amet | |
| </td> | |
| </tr> | |
| <!-- End of content --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="10"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- button --> | |
| <tr> | |
| <td> | |
| <table height="36" align="center" valign="middle" border="0" cellpadding="0" cellspacing="0"> | |
| <tbody> | |
| <tr> | |
| <td width="100%" align="center" valign="middle" height="36" style="background-color: #8E388E; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-clip: padding-box; font-size: 13px; font-family: Helvetica, arial, sans-serif; text-align: center; color: #ffffff; font-weight: 300; padding-left: 25px; padding-right: 25px;"> | |
| <span style="color: #ffffff; font-weight: 300;"> | |
| <a style="color: #ffffff; text-align: center; text-decoration: none;" href="#">Download</a> | |
| </span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- /button --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="30"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- end of textbox-with-title --> | |
| </div> | |
| <div> | |
| <!-- start of left image --> | |
| <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" > | |
| <tr> | |
| <td> | |
| <table bgcolor="#ffffff" width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"> | |
| <!-- Spacing --> | |
| <tr> | |
| <td height="20"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td> | |
| <table width="540" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner"> | |
| <tr> | |
| <td> | |
| <!-- start of text content table --> | |
| <table width="200" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner"> | |
| <!-- image --> | |
| <tr> | |
| <td width="200" height="180" align="center"> | |
| <img src="http://placehold.it/200x180" alt="" border="0" width="180" height="180" style="display: block; border: none; outline: none; text-decoration: none;"> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- mobile spacing --> | |
| <table align="left" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| </table> | |
| <!-- mobile spacing --> | |
| <!-- start of right column --> | |
| <table width="330" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner"> | |
| <!-- title --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align: left; line-height: 20px;"> | |
| LOREM IPSUM | |
| </td> | |
| </tr> | |
| <!-- end of title --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="20"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- content --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align: left; line-height: 24px;"> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua | |
| </td> | |
| </tr> | |
| <!-- end of content --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="10"></td> | |
| </tr> | |
| <!-- button --> | |
| <tr> | |
| <td> | |
| <table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" align="center" valign="middle" height="30" style=" background-color: #8E388E; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-clip: padding-box; font-size: 13px; font-family: Helvetica, arial, sans-serif; text-align: center; color: #ffffff; font-weight: 300; padding-left: 18px; padding-right: 18px;"> | |
| <span style="color: #ffffff; font-weight: 300;"> | |
| <a style="color: #ffffff; text-align: center; text-decoration: none;" href="#">Read More</a> | |
| </span> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- /button --> | |
| </table> | |
| <!-- end of right column --> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td height="20"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- end of left image --> | |
| </div> | |
| <div> | |
| <!-- start of left image --> | |
| <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" > | |
| <tr> | |
| <td> | |
| <table bgcolor="#ffffff" width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"> | |
| <!-- Spacing --> | |
| <tr> | |
| <td height="20"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td> | |
| <table width="540" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner"> | |
| <tr> | |
| <td> | |
| <!-- start of text content table --> | |
| <table width="200" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner"> | |
| <!-- image --> | |
| <tr> | |
| <td width="200" height="180" align="center"> | |
| <img src="http://placehold.it/200x180" alt="" border="0" width="180" height="180" style="display: block; border: none; outline: none; text-decoration: none;"> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- mobile spacing --> | |
| <table align="left" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| </table> | |
| <!-- mobile spacing --> | |
| <!-- start of right column --> | |
| <table width="330" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner"> | |
| <!-- title --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align: left; line-height: 20px;"> | |
| LOREM IPSUM | |
| </td> | |
| </tr> | |
| <!-- end of title --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="20"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- content --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align: left; line-height: 24px;"> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua | |
| </td> | |
| </tr> | |
| <!-- end of content --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="10"></td> | |
| </tr> | |
| <!-- button --> | |
| <tr> | |
| <td> | |
| <table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" align="center" valign="middle" height="30" style=" background-color: #8E388E; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-clip: padding-box; font-size: 13px; font-family: Helvetica, arial, sans-serif; text-align: center; color: #ffffff; font-weight: 300; padding-left: 18px; padding-right: 18px;"> | |
| <span style="color: #ffffff; font-weight: 300;"> | |
| <a style="color: #ffffff; text-align: center; text-decoration: none;" href="#">Read More</a> | |
| </span> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- /button --> | |
| </table> | |
| <!-- end of right column --> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td height="20"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- end of left image --> | |
| </div> | |
| <div> | |
| <!-- fulltext --> | |
| <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" > | |
| <tr> | |
| <td> | |
| <table bgcolor="#ffffff" width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="30"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td> | |
| <table width="540" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner"> | |
| <!-- Title --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align: center; line-height: 20px;"> | |
| NICE HEADING HERE | |
| </td> | |
| </tr> | |
| <!-- End of Title --> | |
| <!-- spacing --> | |
| <tr> | |
| <td height="5"></td> | |
| </tr> | |
| <!-- End of spacing --> | |
| <!-- content --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #95a5a6; text-align: center; line-height: 30px;"> | |
| Lorem ipsum dolor sit amet | |
| </td> | |
| </tr> | |
| <!-- End of content --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="30"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- end of fulltext --> | |
| </div> | |
| <div> | |
| <!-- Start of 2-columns --> | |
| <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" > | |
| <tr> | |
| <td> | |
| <table bgcolor="#ffffff" width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"> | |
| <tr> | |
| <td width="100%" height="20"></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <table width="540" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"> | |
| <tr> | |
| <td> | |
| <table width="260" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth"> | |
| <!-- image --> | |
| <tr> | |
| <td width="260" height="140" align="center" class="devicewidth"> | |
| <img src="http://placehold.it/260x140" alt="" border="0" width="260" height="140" style="display: block; border: none; outline: none; text-decoration: none;" class="col2img"> | |
| </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td> | |
| <!-- start of text content table --> | |
| <table width="260" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner"> | |
| <!-- title --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align: left; line-height: 20px;"> | |
| LOREM IPSUM | |
| </td> | |
| </tr> | |
| <!-- end of title --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- /Spacing --> | |
| <!-- content --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align: left; line-height: 20px;"> | |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempam et justo duo dolores et ea rebum. | |
| </td> | |
| </tr> | |
| <!-- end of content --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- /Spacing --> | |
| <!-- button --> | |
| <tr> | |
| <td> | |
| <table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" align="center" valign="middle" height="30" style=" background-color: #8E388E; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-clip: padding-box; font-size: 13px; font-family: Helvetica, arial, sans-serif; text-align: center; color: #ffffff; font-weight: 300; padding-left: 18px; padding-right: 18px;"> | |
| <span style="color: #ffffff; font-weight: 300;"> | |
| <a style="color: #ffffff; text-align: center; text-decoration: none;" href="#">Read More</a> | |
| </span> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- /button --> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- end of text content table --> | |
| </table> | |
| <!-- end of left column --> | |
| <!-- spacing for mobile devices--> | |
| <table align="left" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| </table> | |
| <!-- end of for mobile devices--> | |
| <!-- start of right column --> | |
| <table width="260" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth"> | |
| <!-- image --> | |
| <tr> | |
| <td width="260" height="140" align="center" class="devicewidth"> | |
| <img src="http://placehold.it/260x140" alt="" border="0" width="260" height="140" style="display: block; border: none; outline: none; text-decoration: none;" class="col2img"> | |
| </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td> | |
| <!-- start of text content table --> | |
| <table width="260" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner"> | |
| <!-- title --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align: left; line-height: 20px;"> | |
| LOREM IPSUM | |
| </td> | |
| </tr> | |
| <!-- end of title --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height:1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- /Spacing --> | |
| <!-- content --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align: left; line-height: 20px;"> | |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempam et justo duo dolores et ea rebum. | |
| </td> | |
| </tr> | |
| <!-- end of content --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- /Spacing --> | |
| <!-- button --> | |
| <tr> | |
| <td> | |
| <table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" align="center" valign="middle" height="30" style="background-color: #8E388E; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-clip: padding-box; font-size: 13px; font-family: Helvetica, arial, sans-serif; text-align: center; color: #ffffff; font-weight: 300; padding-left: 18px; padding-right: 18px;"> | |
| <span style="color: #ffffff; font-weight: 300;"> | |
| <a style="color: #ffffff; text-align: center; text-decoration: none;" href="#">Read More</a> | |
| </span> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- /button --> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- end of text content table --> | |
| </table> | |
| <!-- end of right column --> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td width="100%" height="20"></td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- End of 2-columns --> | |
| </div> | |
| <div> | |
| <!-- 3-columns --> | |
| <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" > | |
| <tr> | |
| <td> | |
| <table bgcolor="#ffffff" width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"> | |
| <tr> | |
| <td width="100%" height="20"></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <table width="540" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"> | |
| <tr> | |
| <td> | |
| <!-- col 1 --> | |
| <table width="170" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth"> | |
| <!-- image 2 --> | |
| <tr> | |
| <td width="170" height="128" align="center" class="devicewidth"> | |
| <img src="http://placehold.it/170x128" alt="" border="0" width="170" height="128" style="display: block; border: none; outline: none; text-decoration: none;" class="col3img"> | |
| </td> | |
| </tr> | |
| <!-- end of image2 --> | |
| <tr> | |
| <td> | |
| <!-- start of text content table --> | |
| <table width="170" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner"> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- title2 --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align: left; line-height: 20px;"> | |
| Lorem Ipsum | |
| </td> | |
| </tr> | |
| <!-- end of title2 --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- content2 --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align: left; line-height: 20px;"> | |
| Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | |
| </td> | |
| </tr> | |
| <!-- end of content2 --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- button --> | |
| <tr> | |
| <td> | |
| <table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" align="center" valign="middle" height="30" style=" background-color: #8E388E; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-clip: padding-box; font-size: 13px; font-family: Helvetica, arial, sans-serif; text-align: center; color: #ffffff; font-weight: 300; padding-left: 18px; padding-right: 18px;"> | |
| <span style="color: #ffffff; font-weight: 300;"> | |
| <a style="color: #ffffff; text-align: center; text-decoration: none;" href="#">Read More</a> | |
| </span> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- /button --> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- end of text content table --> | |
| </table> | |
| <!-- spacing --> | |
| <table width="15" align="left" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| </table> | |
| <!-- end of spacing --> | |
| <!-- col 2 --> | |
| <table width="170" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth"> | |
| <!-- image 2 --> | |
| <tr> | |
| <td width="170" height="128" align="center" class="devicewidth"> | |
| <img src="http://placehold.it/170x128" alt="" border="0" width="170" height="128" style="display: block; border: none; outline: none; text-decoration: none;" class="col3img"> | |
| </td> | |
| </tr> | |
| <!-- end of image2 --> | |
| <tr> | |
| <td> | |
| <!-- start of text content table --> | |
| <table width="170" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner"> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- title2 --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align: left; line-height: 20px;"> | |
| Lorem Ipsum | |
| </td> | |
| </tr> | |
| <!-- end of title2 --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- content2 --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align: left; line-height: 20px;"> | |
| Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | |
| </td> | |
| </tr> | |
| <!-- end of content2 --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- /Spacing --> | |
| <!-- button --> | |
| <tr> | |
| <td> | |
| <table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" align="center" valign="middle" height="30" style="background-color: #8E388E; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-clip: padding-box; font-size: 13px; font-family: Helvetica, arial, sans-serif; text-align: center; color: #ffffff; font-weight: 300; padding-left: 18px; padding-right: 18px;"> | |
| <span style="color: #ffffff; font-weight: 300;"> | |
| <a style="color: #ffffff; text-align: center; text-decoration: none;" href="#">Read More</a> | |
| </span> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- /button --> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- end of text content table --> | |
| </table> | |
| <!-- end of col 2 --> | |
| <!-- spacing --> | |
| <table width="1" align="left" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| </table> | |
| <!-- end of spacing --> | |
| <!-- col 3 --> | |
| <table width="170" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth"> | |
| <!-- image3 --> | |
| <tr> | |
| <td width="170" height="128" align="center" class="devicewidth"> | |
| <img src="http://placehold.it/170x128" alt="" width="170" height="128" border="0" style="display: block; border: none; outline: none; text-decoration: none;" class="col3img"> | |
| </td> | |
| </tr> | |
| <!-- end of image3 --> | |
| <tr> | |
| <td> | |
| <!-- start of text content table --> | |
| <table width="170" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner"> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- title --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align: left; line-height: 20px;"> | |
| Lorem Ipsum | |
| </td> | |
| </tr> | |
| <!-- end of title --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- content --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align: left; line-height: 20px;"> | |
| Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | |
| </td> | |
| </tr> | |
| <!-- end of content --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="15" style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- button --> | |
| <tr> | |
| <td> | |
| <table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" align="center" valign="middle" height="30" style="background-color: #8E388E; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-clip: padding-box; font-size: 13px; font-family: Helvetica, arial, sans-serif; text-align: center; color: #ffffff; font-weight: 300; padding-left: 18px; padding-right: 18px;"> | |
| <span style="color: #ffffff; font-weight: 300;"> | |
| <a style="color: #ffffff; text-align: center; text-decoration: none;" href="#">Read More</a> | |
| </span> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- /button --> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- end of text content table --> | |
| </table> | |
| </td> | |
| <!-- spacing --> | |
| <!-- end of spacing --> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td width="100%" height="20"></td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- end of 3-columns --> | |
| </div> | |
| <div> | |
| <!-- Full + text --> | |
| <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" > | |
| <tr> | |
| <td> | |
| <table bgcolor="#ffffff" width="580" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth"> | |
| <tr> | |
| <td width="100%" height="20"></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <table width="540" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidthinner"> | |
| <!-- title --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align: left; line-height: 20px;"> | |
| LOREM IPSUM | |
| </td> | |
| </tr> | |
| <!-- end of title --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="10"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| <!-- content --> | |
| <tr> | |
| <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #666666; text-align: left; line-height: 24px;"> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | |
| </td> | |
| </tr> | |
| <!-- end of content --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="10"></td> | |
| </tr> | |
| <!-- button --> | |
| <tr> | |
| <td> | |
| <table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="100%" align="center" valign="middle" height="30" style=" background-color: #8E388E; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-clip: padding-box; font-size: 13px; font-family: Helvetica, arial, sans-serif; text-align: center; color: #ffffff; font-weight: 300; padding-left: 18px; padding-right: 18px;"> | |
| <span style="color: #ffffff; font-weight: 300;"> | |
| <a style="color: #ffffff; text-align: center; text-decoration: none;" href="#">Read More</a> | |
| </span> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <!-- /button --> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="20"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| <div> | |
| <!-- Start of preheader --> | |
| <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" > | |
| <tr> | |
| <td width="100%"> | |
| <table width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="5"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td align="center" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 10px; color: #999999;"> | |
| If you don't want to receive updates. please <a href="#" style="text-decoration: none; color: #8E388E;">unsubscribe</a> | |
| </td> | |
| </tr> | |
| <!-- Spacing --> | |
| <tr> | |
| <td width="100%" height="5"></td> | |
| </tr> | |
| <!-- Spacing --> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- End of preheader --> | |
| </div> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment