Skip to content

Instantly share code, notes, and snippets.

@rosscdh
Last active August 22, 2016 17:35
Show Gist options
  • Select an option

  • Save rosscdh/6e56f9ca0ba9c45e7007c22a8362e47d to your computer and use it in GitHub Desktop.

Select an option

Save rosscdh/6e56f9ca0ba9c45e7007c22a8362e47d to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>{{ COMPANY_NAME }}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode: bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* RESET STYLES */
img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
table{border-collapse: collapse !important;}
body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}
body,html {
background-color:#f6f6f6;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
@media screen and (max-width: 525px) {
/* ALLOWS FOR FLUID TABLES */
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
/* ADJUSTS LAYOUT OF LOGO IMAGE */
.logo img {
margin: 0 auto !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
.mobile-hide {
display: none !important;
}
.img-max {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
/* FULL-WIDTH TABLES */
.responsive-table {
width: 100% !important;
}
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
.padding {
padding: 10px 5% 15px 5% !important;
}
.padding-meta {
padding: 30px 5% 0px 5% !important;
text-align: center;
}
.padding-copy {
padding: 10px 0px 10px 0px !important;
text-align: center;
}
.no-padding {
padding: 0 !important;
}
.section-padding {
padding: 50px 15px 50px 15px !important;
}
/* ADJUST BUTTONS ON MOBILE */
.mobile-button-container {
margin: 0 auto;
width: 100% !important;
}
.mobile-button {
padding: 15px !important;
border: 0 !important;
font-size: 16px !important;
display: block !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
<!--[if gte mso 12]>
<style type="text/css">
.mso-right {
padding-left: 20px;
}
</style>
<![endif]-->
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!-- HIDDEN PREHEADER TEXT -->
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
{{ subject }}
</div>
<!-- HEADER -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#ffffff" align="center">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="720">
<tr>
<td align="center" valign="top" width="720">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 720px;" class="wrapper">
<tr>
<td align="center" valign="top" style="padding: 15px 0;" class="logo">
<a href="{{ COMPANY_URL }}" target="_blank">
<img alt="Logo" src="{{ COMPANY_LOGO }}" alt="TodayCapital Logo" style="display: block; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-size: 16px;" border="0" >
</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#99cc33" align="center" style="padding: 30px 15px 30px 15px;" class="section-padding">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="720">
<tr>
<td align="center" valign="top" width="720">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 720px;" class="responsive-table">
<tr>
<td>
<!-- HERO IMAGE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!-- COPY -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="font-size: 36px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; padding-top: 15px;" class="padding-copy">{{ subject }}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#f6f6f6" align="center" style="padding: 0px 15px 25px 15px;" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="720" style="padding:0 0 20px 0;" class="responsive-table">
<tr>
<td align="center" height="100%" valign="top" width="100%" style="padding-bottom: 35px;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="720">
<tr>
<td align="center" valign="top" width="720">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:720;">
<tr>
<td align="center" valign="top" style="font-size:0;padding:0px 10px;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="720">
<tr>
<td align="left" valign="top" width="150">
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:720px; vertical-align:top; width:100%;" class="wrapper">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 720px;" class="wrapper">
<tr>
<td style="padding: 40px 0 0 0;" class="no-padding">
<!-- ARTICLE -->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" style="padding: 10px 0 15px 0; font-size: 16px; line-height: 24px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">
{% content_block 'default' %}
<br/><br/>
<em>Your team from {{ COMPANY_NAME }}</em>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f6f6f6" align="center" style="padding: 0px 0px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="720">
<tr>
<td align="center" valign="top" width="720">
<![endif]-->
<!-- UNSUBSCRIBE COPY -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="max-width: 720px;" class="responsive-table">
<tr>
<td align="center" bgcolor="#ffffff" style="padding-top:10px;font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;">
{{ COMPANY_NAME }} | {{ COMPANY_ADDRESS }}<br />
<b>E-Mail</b> <a href="mailto:{{ COMPANY_EMAIL }}" title="{{ COMPANY_EMAIL }}" style="color:#99cc33;">{{ COMPANY_EMAIL }}</a> | <b>Tel</b> {{ COMPANY_PHONE }} | <b>Fax</b> {{ COMPANY_FAX }} | <b>Business Owner:</b> {{ COMPANY_OWNER }}<br />
{{ COMPANY_DETAIL }}<br/>
<p style="color:#99cc33;text-align:center;font-size:75%;"><a href="{{ COMPANY_PRIVACY_POLICY }}" title="Privacy Policy" style="color:#99cc33;">Privacy Policy</a> | <a href="{{ COMPANY_DISCLAIMER }}" title="Disclaimer" style="color:#99cc33;">Disclaimer</a></p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment