HTML EMail Template Free

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="format-detection" content="telephone=no"> <meta name="x-apple-disable-message-reformatting"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style type="text/css"> @media screen { @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v8/va9E4kDNxMZdWfMOD5Vvl4jLazX3dA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v8/va9E4kDNxMZdWfMOD5Vvk4jLazX3dGTP.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; src: local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnZKveRhf6Xl7Glw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; src: local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnZKveQhf6Xl7Gl3LX.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 700; src: local('Fira Sans Bold'), local('FiraSans-Bold'), url(https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnLK3eRhf6Xl7Glw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 700; src: local('Fira Sans Bold'), local('FiraSans-Bold'), url(https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnLK3eQhf6Xl7Gl3LX.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 800; src: local('Fira Sans ExtraBold'), local('FiraSans-ExtraBold'), url(https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnMK7eRhf6Xl7Glw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 800; src: local('Fira Sans ExtraBold'), local('FiraSans-ExtraBold'), url(https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnMK7eQhf6Xl7Gl3LX.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } } #outlook a { padding: 0; } .ExternalClass, .ReadMsgBody { width: 100%; } .ExternalClass, .ExternalClass p, .ExternalClass td, .ExternalClass div, .ExternalClass span, .ExternalClass font { line-height: 100%; } div[style*="margin: 14px 0;"], div[style*="margin: 16px 0;"] { margin: 0 !important; } @media only screen and (min-width:621px) { .pc-container { width: 620px !important; } } @media only screen and (max-width:620px) { .pc-header-box-s6 .pc-header-box-in { padding: 29px 16px 26px !important } .pc-header-logo-s1, .pc-header-nav-s1 { width: 100% !important } .pc-header-cta-s4 { text-align: center !important } .pc-footer-row-s1 .pc-footer-row-col, .pc-header-cta-s4 .pc-header-cta-col { max-width: 100% !important } .pc-header-cta-s4 .pc-header-cta-acs, .pc-header-cta-s4 .pc-header-cta-icon, .pc-header-cta-s4 .pc-header-cta-img { Margin: 0 auto !important } .pc-header-cta-s4 .pc-header-cta-text br, .pc-header-cta-s4 .pc-header-cta-title br { display: none !important } .pc-content-box-s2, .pc-features-box-s1 { padding: 35px 10px 15px !important } .pc-features-row-s1 .pc-features-row-col { max-width: 50% !important } .pc-cta-box-s14 .pc-cta-box-in { padding-bottom: 35px !important; padding-top: 35px !important } .pc-footer-box-s1 { padding-left: 10px !important; padding-right: 10px !important } .pc-spacing.pc-m-footer-h-46 td, .pc-spacing.pc-m-footer-h-57 td { font-size: 20px !important; height: 20px !important; line-height: 20px !important } } @media only screen and (max-width:525px) { .pc-header-box-s6 .pc-header-box-in { padding: 15px 6px 5px !important } .pc-spacing.pc-m-header-7 { font-size: 22px !important; height: 22px !important; line-height: 22px !important } .pc-cta-title br, .pc-footer-text-s1 br, .pc-header-cta-text br, .pc-header-cta-title br { display: none !important } .pc-content-box-s2, .pc-features-box-s1 { padding: 25px 0 5px !important } .pc-features-row-s1 .pc-features-row-col { max-width: 100% !important } .pc-cta-box-s14 .pc-cta-box-in { padding: 25px 20px !important } .pc-cta-s1 .pc-cta-title { font-size: 24px !important; line-height: 1.42 !important } .pc-cta-icon.pc-m-module-18 { height: auto !important; width: 72px !important } .pc-footer-box-s1 { padding: 5px 0 !important } } </style> <!--[if mso]> <style type="text/css"> .pc-fb-font{font-family:Helvetica,Arial,sans-serif !important;} </style> <![endif]--> <!--[if gte mso 9]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]--> </head> <body class="pc-fb-font" bgcolor="#f4f4f4" style="background-color: #f4f4f4; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 16px; width: 100% !important; Margin: 0 !important; padding: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%"> <table style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="padding: 0; vertical-align: top;" align="center" valign="top"> <!--[if (gte mso 9)|(IE)]> <table width="620" align="center" border="0" cellspacing="0" cellpadding="0"><tr><td width="620" align="center" valign="top"> <![endif]--> <table class="pc-container" align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; Margin: 0 auto; max-width: 620px;" width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="left" style="vertical-align: top; padding: 0 10px;" valign="top"> <span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">Template created by Designmodo.com</span> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 0; height: 20px; font-size: 20px; line-height: 20px;" valign="top"> </td> </tr> </tbody> </table> <table style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1)" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td> <!-- START MODULE: Header 7 --> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td class="pc-header-box-s6 pc-m-header-7" background="images/header-7-image-2.jpg" style="vertical-align: top; background-color: #1B1B1B; background-image: url('images/header-7-image-2.jpg'); background-position: top center; background-size: cover; width: 600px" width="600" valign="top" bgcolor="#1B1B1B"> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:547px;"> <v:fill type="frame" src="images/header-7-image-2.jpg" color="#1B1B1B"></v:fill> <v:textbox inset="26px,29px,26px,26px"> <div> <![endif]--> <div class="pc-header-box-in" style="padding: 29px 26px 26px;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top" valign="top"> <!--[if (gte mso 9)|(IE)]> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="248" valign="top"> <![endif]--> <table class="pc-header-logo-s1" align="left" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 150px;" width="150"> <tbody> <tr> <td style="vertical-align: top; padding: 10px;" valign="top"> <a href="http://example.com" style="text-decoration: none;"> <img src="images/logo-white.png" width="130" height="22" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; display: block; Margin: 0 auto; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; color: #ffffff;"> </a> </td> </tr> </tbody> </table> <!--[if (gte mso 9)|(IE)]> </td> <td width="300" valign="top" align="right" style="text-align:right;"> <![endif]--> <table class="pc-header-nav-s1" align="right" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;"> <tbody> <tr> <td class="pc-fb-font" style="vertical-align: top; padding: 9px 10px 10px; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 20px; line-height: 1; text-align: center;" align="center" valign="top"> <a href="http://example.com" style="text-decoration: none; font-size: 14px; font-weight: 500; color: #ffffff;">World</a> <span>  </span> <a href="http://example.com" style="text-decoration: none; font-size: 14px; font-weight: 500; color: #ffffff;">Lifestyle</a> <span>  </span> <a href="http://example.com" style="text-decoration: none; font-size: 14px; font-weight: 500; color: #ffffff;">Travel</a> <span>  </span> <a href="http://example.com" style="text-decoration: none; font-size: 14px; font-weight: 500; color: #ffffff;">Technology</a> </td> </tr> </tbody> </table> <!--[if (gte mso 9)|(IE)]> </td></tr></table> <![endif]--> </td> </tr> <tr> <td class="pc-spacing pc-m-header-7" style="vertical-align: top; height: 41px; line-height: 41px; font-size: 41px;" valign="top"> </td> </tr> <tr> <td class="pc-header-cta-s4" style="vertical-align: top; font-size: 0;" valign="top"> <!--[if (gte mso 9)|(IE)]> <table width="334" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="50%" valign="top"> <![endif]--> <div class="pc-header-cta-col" style="display: inline-block; width: 100%; max-width: 334px; vertical-align: top;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px 7px;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="padding: 0 7px; vertical-align: top;" valign="top"> <img class="pc-header-cta-icon" src="images/icon-postcards-square-blue.png" width="72" height="72" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; display: block; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff;"> </td> </tr> <tr> <td class="pc-header-cta-title pc-fb-font" valign="top" style="vertical-align: top; padding: 14px 7px 0 7px; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 24px; font-weight: bold; line-height: 1.42; letter-spacing: -0.4px; color: #ffffff;"> App is available for iOS <br>and Android. </td> </tr> <tr> <td class="pc-header-cta-text pc-fb-font" valign="top" style="vertical-align: top; padding: 10px 7px 0 7px; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 300; line-height: 1.56; letter-spacing: -0.2px; color: #ffffff;"> Co-ordinate campaigns and <br>product launches, with improved <br>overall communication. </td> </tr> <tr> <td valign="top" style="vertical-align: top; height: 35px; line-height: 35px; font-size: 35px;"> </td> </tr> <tr> <td valign="top" style="vertical-align: top"> <table class="pc-header-cta-acs" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;"> <tbody> <tr> <td style="vertical-align: top; padding: 5px 7px" valign="top"> <a href="http://example.com" style="text-decoration: none;"> <img src="images/button-app-store-dark.png" width="127" height="52" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; height: auto; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff; max-width: 100%; display: block;"> </a> </td> <td style="vertical-align: top; padding: 5px 7px" valign="top"> <a href="http://example.com" style="text-decoration: none;"> <img src="images/button-google-play-dark.png" width="136" height="52" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; height: auto; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff; max-width: 100%; display: block;"> </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> <td width="214" valign="top"> <![endif]--> <div class="pc-header-cta-col" style="display: inline-block; width: 100%; vertical-align: top; max-width: 214px;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px 14px;" valign="top"> <img class="pc-header-cta-img" src="images/header-7-image-1.png" width="186" height="369" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff; max-width: 100%; height: auto;"> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td></tr></table> <![endif]--> </td> </tr> </tbody> </table> </div> <!--[if gte mso 9]> </div> <p style="margin:0;mso-hide:all"> <o:p xmlns:o="urn:schemas-microsoft-com:office:office"> </o:p> </p> </v:textbox> </v:rect> <![endif]--> </td> </tr> </tbody> </table> <!-- END MODULE: Header 7 --> <!-- START MODULE: Feature 1 --> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td class="pc-features-box-s1" style="vertical-align: top; padding: 40px 20px; background-color: #ffffff;" valign="top" bgcolor="#ffffff"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td class="pc-fb-font" style="vertical-align: top; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.42; letter-spacing: -0.4px; color: #151515; padding: 0 20px;" valign="top">Features.</td> </tr> <tr> <td style="vertical-align: top;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; height: 10px; font-size: 10px; line-height: 10px;" valign="top"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="pc-fb-font" style="vertical-align: top; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 300; line-height: 1.56; letter-spacing: -0.2px; color: #9B9B9B; padding: 0 20px;" valign="top"> Co-ordinate campaigns and product launches, <br>with improved overall communication. </td> </tr> <tr> <td style="vertical-align: top;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; height: 20px; font-size: 20px; line-height: 20px;" valign="top"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td class="pc-features-row-s1" style="vertical-align: top; font-size: 0;" valign="top"> <!--[if (gte mso 9)|(IE)]> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="33%" valign="top"> <![endif]--> <div class="pc-features-row-col" style="display: inline-block; width: 100%; max-width: 186px; vertical-align: top;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top;" valign="top"> <img src="images/feature-1-image-1.jpg" width="48" height="48" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; display: block; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; color: #1B1B1B;"> </td> </tr> <tr> <td style="vertical-align: top;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; height: 10px; font-size: 10px; line-height: 10px;" valign="top"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="pc-fb-font" style="vertical-align: top; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.33; letter-spacing: -0.2px; color: #1B1B1B;" valign="top">Responsive</td> </tr> <tr> <td style="vertical-align: top;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; height: 6px; font-size: 6px; line-height: 6px;" valign="top"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="pc-fb-font" style="vertical-align: top; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.43; letter-spacing: -0.2px; color: #9B9B9B;" valign="top">Kogi Cosby sweater ethical squid irony disrupt, organic tote.</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> <td width="33%" valign="top"> <![endif]--> <div class="pc-features-row-col" style="display: inline-block; width: 100%; max-width: 186px; vertical-align: top;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top;" valign="top"> <img src="images/feature-1-image-2.jpg" width="48" height="48" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; display: block; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; color: #1B1B1B;"> </td> </tr> <tr> <td style="vertical-align: top;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; height: 10px; font-size: 10px; line-height: 10px;" valign="top"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="pc-fb-font" style="vertical-align: top; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.33; letter-spacing: -0.2px; color: #1B1B1B;" valign="top">Clean code</td> </tr> <tr> <td style="vertical-align: top;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; height: 6px; font-size: 6px; line-height: 6px;" valign="top"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="pc-fb-font" style="vertical-align: top; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.43; letter-spacing: -0.2px; color: #9B9B9B;" valign="top">Kogi Cosby sweater ethical squid irony disrupt, organic tote.</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> <td width="33%" valign="top"> <![endif]--> <div class="pc-features-row-col" style="display: inline-block; width: 100%; max-width: 186px; vertical-align: top;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top;" valign="top"> <img src="images/feature-1-image-3.jpg" width="48" height="48" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; display: block; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; color: #1B1B1B;"> </td> </tr> <tr> <td style="vertical-align: top;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; height: 10px; font-size: 10px; line-height: 10px;" valign="top"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="pc-fb-font" style="vertical-align: top; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.33; letter-spacing: -0.2px; color: #1B1B1B;" valign="top">Clean design</td> </tr> <tr> <td style="vertical-align: top;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; height: 6px; font-size: 6px; line-height: 6px;" valign="top"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="pc-fb-font" style="vertical-align: top; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.43; letter-spacing: -0.2px; color: #9B9B9B;" valign="top">Kogi Cosby sweater ethical squid irony disrupt, organic tote.</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td></tr></table> <![endif]--> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!-- END MODULE: Feature 1 --> <!-- START MODULE: Content 4 --> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td class="pc-content-box-s2" style="vertical-align: top; padding: 40px 20px 20px; background-color: #ffffff" valign="top" bgcolor="#ffffff"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td class="pc-fb-font" style="vertical-align: top; padding: 0 20px; text-align: center; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.42; letter-spacing: -0.4px; color: #151515;" valign="top" align="center">Our clients.</td> </tr> <tr> <td class="pc-fb-font" style="vertical-align: top; padding: 0 20px; text-align: center; line-height: 1.56; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 300; color: #9B9B9B; letter-spacing: -0.2px;" valign="top" align="center">Co-ordinate campaigns and product launches.</td> </tr> <tr> <td style="vertical-align: top; height: 20px; font-size: 20px; line-height: 20px;" valign="top"> </td> </tr> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; font-size: 0; text-align: center;" valign="top" align="center"> <!--[if (gte mso 9)|(IE)]> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="25%" valign="middle"> <![endif]--> <div style="display: inline-block; width: 100%; max-width: 140px; vertical-align: middle;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px; text-align: center;" valign="top" align="center"> <img src="images/content-4-image-1.jpg" width="67" height="19" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; text-decoration: none; display: block; color: #151515; max-width: 100%; height: auto; font-size: 14px; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; Margin: 0 auto;"> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> <td width="25%" valign="middle"> <![endif]--> <div style="display: inline-block; width: 100%; max-width: 140px; vertical-align: middle;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px; text-align: center;" valign="top" align="center"> <img src="images/content-4-image-2.jpg" width="86" height="29" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; text-decoration: none; display: block; color: #151515; max-width: 100%; height: auto; font-size: 14px; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; Margin: 0 auto;"> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> <td width="25%" valign="middle"> <![endif]--> <div style="display: inline-block; width: 100%; max-width: 140px; vertical-align: middle;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px; text-align: center;" valign="top" align="center"> <img src="images/content-4-image-3.jpg" width="32" height="38" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; text-decoration: none; display: block; color: #151515; max-width: 100%; height: auto; font-size: 14px; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; Margin: 0 auto;"> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> <td width="25%" valign="middle"> <![endif]--> <div style="display: inline-block; width: 100%; max-width: 140px; vertical-align: middle;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px; text-align: center;" valign="top" align="center"> <img src="images/content-4-image-4.jpg" width="93" height="20" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; text-decoration: none; display: block; color: #151515; max-width: 100%; height: auto; font-size: 14px; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; Margin: 0 auto;"> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td></tr></table> <![endif]--> </td> </tr> <tr> <td style="vertical-align: top; font-size: 0; text-align: center;" valign="top" align="center"> <!--[if (gte mso 9)|(IE)]> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="25%" valign="middle"> <![endif]--> <div style="display: inline-block; width: 100%; max-width: 140px; vertical-align: middle;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px; text-align: center;" valign="top" align="center"> <img src="images/content-4-image-5.jpg" width="94" height="18" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; text-decoration: none; display: block; color: #151515; max-width: 100%; height: auto; font-size: 14px; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; Margin: 0 auto;"> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> <td width="25%" valign="middle"> <![endif]--> <div style="display: inline-block; width: 100%; max-width: 140px; vertical-align: middle;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px; text-align: center;" valign="top" align="center"> <img src="images/content-4-image-6.jpg" width="64" height="40" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; text-decoration: none; display: block; color: #151515; max-width: 100%; height: auto; font-size: 14px; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; Margin: 0 auto;"> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> <td width="25%" valign="middle"> <![endif]--> <div style="display: inline-block; width: 100%; max-width: 140px; vertical-align: middle;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px; text-align: center;" valign="top" align="center"> <img src="images/content-4-image-7.jpg" width="39" height="46" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; text-decoration: none; display: block; color: #151515; max-width: 100%; height: auto; font-size: 14px; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; Margin: 0 auto;"> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> <td width="25%" valign="middle"> <![endif]--> <div style="display: inline-block; width: 100%; max-width: 140px; vertical-align: middle;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px; text-align: center;" valign="top" align="center"> <img src="images/content-4-image-8.jpg" width="100" height="22" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; text-decoration: none; display: block; color: #151515; max-width: 100%; height: auto; font-size: 14px; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; Margin: 0 auto;"> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td></tr></table> <![endif]--> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!-- END MODULE: Content 4 --> <!-- START MODULE: Call to action 18 --> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td class="pc-cta-box-s14" background="images/cta-18-image-2.jpg" style="vertical-align: top; background-color: #1B1B1B; background-image: url('images/cta-18-image-2.jpg'); background-position: center; background-size: cover; width: 600px" width="600" valign="top" bgcolor="#1B1B1B"> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:364px;"> <v:fill type="frame" src="images/cta-18-image-2.jpg" color="#1B1B1B"></v:fill> <v:textbox inset="30px,40px,30px,32px"> <div> <![endif]--> <div class="pc-cta-box-in" style="padding: 40px 30px 32px;"> <table class="pc-cta-s1" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; text-align: center;" valign="top" align="center"> <img class="pc-cta-icon pc-m-module-18" src="images/cta-18-image-1.png" width="100" height="100" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; display: block; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff; Margin: 0 auto;"> </td> </tr> <tr> <td style="vertical-align: top; height: 17px; font-size: 17px; line-height: 17px;" valign="top"> </td> </tr> <tr> <td class="pc-cta-title pc-fb-font" style="vertical-align: top; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 900; line-height: 1.28; letter-spacing: -0.6px; color: #ffffff; text-align: center;" valign="top" align="center"> App is available for <br>iOS and Android. </td> </tr> <tr> <td style="vertical-align: top; height: 7px; font-size: 7px; line-height: 7px;" valign="top"> </td> </tr> <tr> <td style="vertical-align: top; font-size: 0; text-align: center; padding: 9px 0 0" align="center" valign="top"> <!--[if (gte mso 9)|(IE)]> <table border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td valign="top"> <![endif]--> <div style="display: inline-block; vertical-align: top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 8px; text-align: center;" valign="top" align="center"> <a href="http://example.com" style="text-decoration: none;"> <img src="images/button-app-store-dark.png" width="127" height="52" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; height: auto; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff; max-width: 100%; display: block;"> </a> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> <td valign="top"> <![endif]--> <div style="display: inline-block; vertical-align: top"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 8px; text-align: center;" valign="top" align="center"> <a href="http://example.com" style="text-decoration: none;"> <img src="images/button-google-play-dark.png" width="136" height="52" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; height: auto; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff; max-width: 100%; display: block;"> </a> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> </tbody> </table> </div> <!--[if gte mso 9]> </div> <p style="margin:0;mso-hide:all"> <o:p xmlns:o="urn:schemas-microsoft-com:office:office"> </o:p> </p> </v:textbox> </v:rect> <![endif]--> </td> </tr> </tbody> </table> <!-- END MODULE: Call to action 18 --> <!-- START MODULE: Footer 8 --> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td class="pc-footer-box-s1" style="vertical-align: top; padding: 21px 20px 14px; background-color: #ffffff;" valign="top" bgcolor="#ffffff"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td class="pc-footer-row-s1" style="vertical-align: top; font-size: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" valign="top"> <!--[if (gte mso 9)|(IE)]> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="280" style="width:280px;" valign="top"> <![endif]--> <div class="pc-footer-row-col" style="display: inline-block; width: 100%; max-width: 280px; vertical-align: top;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px;" valign="top"> <table class="pc-footer-text-s1" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td class="pc-fb-font" style="vertical-align: top; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.33; letter-spacing: -0.2px; color: #1B1B1B;" valign="top">Follow Us.</td> </tr> <tr> <td class="pc-fb-font" style="vertical-align: top; padding: 11px 0 0; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.43; letter-spacing: -0.2px; color: #9B9B9B;" valign="top"> We are always looking for new exciting projects and collaborations. Feel free to contact us. </td> </tr> </tbody> </table> <table class="pc-spacing pc-m-footer-h-57" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; height: 57px; line-height: 57px; font-size: 57px;" valign="top"> </td> </tr> </tbody> </table> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; line-height: 1.3; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 19px;" valign="top"> <a href="http://example.com" style="text-decoration: none;"> <img src="images/facebook-gray.png" width="20" height="20" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; font-size: 14px; color: #151515;"> </a> <span>  </span> <a href="http://example.com" style="text-decoration: none;"> <img src="images/twitter-gray.png" width="21" height="18" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; font-size: 14px; color: #151515;"> </a> <span>  </span> <a href="http://example.com" style="text-decoration: none;"> <img src="images/instagram-gray.png" width="21" height="20" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; font-size: 14px; color: #151515;"> </a> <span>  </span> <a href="http://example.com" style="text-decoration: none;"> <img src="images/pinterest-gray.png" width="20" height="20" alt="" style="border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; font-size: 14px; color: #151515;"> </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> <td width="280" style="width:280px;" valign="top"> <![endif]--> <div class="pc-footer-row-col" style="display: inline-block; width: 100%; max-width: 280px; vertical-align: top;"> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 20px;" valign="top"> <table class="pc-footer-text-s1" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td class="pc-fb-font" style="vertical-align: top; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.33; letter-spacing: -0.2px; color: #1B1B1B;" valign="top">Contact us.</td> </tr> <tr> <td class="pc-fb-font" style="vertical-align: top; padding: 11px 0 0; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.43; letter-spacing: -0.2px; color: #9B9B9B;" valign="top"> <a style="text-decoration: none; cursor: text; color: #9B9B9B;">King street, 2901 Marmara road, Newyork, WA 98122-1090</a> </td> </tr> </tbody> </table> <table class="pc-spacing pc-m-footer-h-46" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; height: 46px; line-height: 46px; font-size: 46px;" valign="top"> </td> </tr> </tbody> </table> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td class="pc-fb-font" style="vertical-align: top; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.33; letter-spacing: -0.2px;" valign="top"> <a href="tel:749-977-3440" style="text-decoration: none; color: #1B1B1B;">749-977-3440</a> </td> </tr> <tr> <td class="pc-fb-font" style="vertical-align: top; padding: 9px 0 0; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.7;" valign="top"> <a href="mailto:bo.grady@nathen.biz" style="text-decoration: none; color: #1595E7;">bo.grady@nathen.biz</a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td></tr></table> <![endif]--> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!-- END MODULE: Footer 8 --> </td> </tr> </tbody> </table> <table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%"> <tbody> <tr> <td style="vertical-align: top; padding: 0; height: 20px; font-size: 20px; line-height: 20px;" valign="top"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!--[if (gte mso 9)|(IE)]> </td></tr></table> <![endif]--> </td> </tr> </tbody> </table> </body> </html>
CSS
JAVASCRIPT
https://github.com/designmodo/html-email-templates
Expand for more options Login