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> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="x-apple-disable-message-reformatting"/> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> | |
<title>Gist</title> | |
<style> | |
.personal-email { | |
background-color: #f9f9f9; | |
border-collapse: collapse; | |
line-height: 100% !important; | |
margin: 0; | |
padding: 0; | |
width: 100% !important; | |
} | |
.main-container { | |
border-collapse: collapse; | |
margin: auto; | |
max-width: 635px; | |
width: 100%; | |
padding: 0 20px; | |
margin-top: 20px; | |
} | |
.email-text .table { | |
border-collapse: collapse; | |
width: 100%; | |
} | |
.email-text .table > tbody > tr > td, .email-text .table > tbody > tr > th, .email-text .table > tfoot > tr > td, .email-text .table > tfoot > tr > th { | |
border: 1px solid #e8e8e8 !important; | |
} | |
.email-header-table { | |
text-align: center; | |
border-collapse: collapse; | |
color: #c0c0c0; | |
font-family: 'Helvetica Neue', Arial, sans-serif; | |
font-size: 13px; | |
line-height: 26px; | |
margin: 0 auto 26px; | |
width: 100% | |
} | |
.email-header-table img { | |
display: inline-block; | |
max-width: 100px; | |
max-height: 80px; | |
margin: 0 auto; | |
} | |
.container-wrapper-table { | |
background-clip: padding-box; | |
border-collapse: collapse; | |
border-radius: 3px; | |
color: #545454; | |
font-family: 'Helvetica Neue', Arial, sans-serif; | |
font-size: 15px; | |
line-height: 20px; | |
margin: 0 auto; | |
width: 100% | |
} | |
.email-header { | |
border: none; | |
border-collapse: separate; | |
font-size: 1px; | |
height: 2px; | |
line-height: 3px; | |
width: 100% | |
} | |
.email-header-td { | |
background-color: #298ee8; | |
border: none; | |
font-family: 'Helvetica Neue', Arial, sans-serif; | |
width: 100% | |
} | |
.email-body { | |
background-clip: padding-box; | |
border-collapse: collapse; | |
border-color: #dddddd; | |
border-radius: 0 0 3px 3px; | |
border-style: solid; | |
border-width: 0 1px 1px; | |
width: 100% | |
} | |
.email-text { | |
background-clip: padding-box; | |
background-color: white; | |
border-radius: 0 0 3px 3px; | |
color: #282f33; | |
font-family: 'Helvetica Neue', Arial, sans-serif; | |
font-size: 15px; | |
line-height: 22px; | |
overflow: hidden; | |
padding: 40px 40px 30px | |
} | |
.email-text p { | |
font-size: 15px; | |
margin: 0 0 17px; | |
line-height: 1.5; | |
text-align: left; | |
} | |
.email-text a { | |
font-size: 15px; | |
color: #1251ba; | |
text-decoration: underline; | |
display: inline; | |
} | |
.email-text h1 { | |
font-size: 26px; | |
line-height: 33px; | |
margin: 30px 0 7px; | |
font-weight: normal; | |
} | |
.email-text h2 { | |
font-size: 18px; | |
font-weight: bold; | |
margin: 30px 0 7px; | |
} | |
.email-text h3, .email-text h4 { | |
font-size: 16px; | |
font-weight: bold; | |
margin-bottom: 5px; | |
} | |
.email-text h5 { | |
font-size: 14px; | |
font-weight: bold; | |
margin-bottom: 5px; | |
} | |
.email-text h6 { | |
font-size: 12px; | |
} | |
.email-text ol { | |
list-style-type: decimal; | |
} | |
.email-text ul { | |
list-style-type: disc; | |
} | |
.email-text ul, .email-text ol { | |
margin: 0 0 20px 40px; | |
padding: 0; | |
font-size: 15px; | |
} | |
.email-text ul li, .email-text ol li { | |
font-size: 15px; | |
margin: 5px 0; | |
} | |
.email-text img { | |
max-width: 512px; | |
} | |
.footer-table { | |
border-collapse: collapse; | |
color: #545454; | |
font-family: 'Helvetica Neue', Arial, sans-serif; | |
font-size: 13px; | |
line-height: 20px; | |
margin: 0 auto; | |
max-width: 100%; | |
width: 100% | |
} | |
.footer-td-wrapper table { | |
border-collapse: collapse; | |
color: #545454; | |
font-family: 'Helvetica Neue', Arial, sans-serif; | |
font-size: 13px; | |
line-height: 20px; | |
margin: 0 auto; | |
max-width: 100%; | |
width: 100% | |
} | |
.user-signature { | |
color: #6f6f6f | |
} | |
.powered-by { | |
color: #999999; | |
font-size: 11px; | |
text-align: right | |
} | |
.powered-by a { | |
text-decoration: none; | |
color: #6f6f6f | |
} | |
.unsubscribe-td { | |
color: #999999; | |
font-family: 'Helvetica Neue', Arial, sans-serif; | |
font-size: 11px; | |
} | |
.unsubscribe-td p { | |
text-align: center | |
} | |
.unsubscribe-td p a { | |
border: none; | |
color: #999999; | |
font-size: 11px; | |
outline: none !important; | |
text-decoration: underline | |
} | |
blockquote { | |
padding: .5rem 1rem; | |
margin: 0 0 1rem; | |
font-size: 14px; | |
border-left: .25rem solid #eceeef; | |
} | |
.profile-pic { | |
border-radius: 50%; | |
width: 30px; | |
height: 30px; | |
} | |
.d-n { | |
display: none; | |
} | |
.cf-profile-avatar { | |
display: inline-block; | |
line-height: 30px; | |
text-align: center; | |
background: #408bef; | |
border-radius: 50%; | |
text-transform: uppercase; | |
color: white; | |
font-weight: 400; | |
} | |
@media (max-width: 1025px) { | |
.email-text { | |
padding: 20px; | |
font-size: 14px; | |
} | |
.email-text p, .email-text a, .email-text ul li, .email-text ol li { | |
font-size: 14px; | |
} | |
.container-wrapper-table { | |
font-size: 14px; | |
} | |
} | |
</style> | |
</head> | |
<body style="background-color: #f9f9f9;"> | |
<table align="center" bgcolor="#F9F9F9" border="0" cellpadding="0" cellspacing="0" class="personal-email"> | |
<tbody> | |
<tr> | |
<td> | |
<table class="main-container"> | |
<tbody> | |
<tr> | |
<td valign="top"> | |
<table border="0" cellpadding="0" cellspacing="0" class="email-header-table"> | |
<tr> | |
<td> | |
<!--[if mso]> | |
<img src="INSERT YOUR LOGO URL" width="100" height="80"> | |
<![endif]--> | |
<!--[if !mso]> <!----> | |
<img src="INSERT YOUR LOGO URL"> | |
<!-- <![endif]--> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
<tr> | |
<td class="main-wrapper" valign="top"> | |
<table align="center" border="0" cellpadding="0" cellspacing="0" class="container-wrapper-table"> | |
<tbody> | |
<tr> | |
<td valign="top"> | |
<table border="0" cellpadding="0" cellspacing="0" class="email-header"> | |
<tbody> | |
<tr> | |
<td style="border: 1.25px solid <%= header_color %>" class="email-header-td" valign="top" bgcolor="#298ee8"></td> | |
</tr> | |
</tbody> | |
</table> | |
<table border="0" cellpadding="0" cellspacing="0" class="email-body"> | |
<tbody> | |
<tr> | |
<td bgcolor="white" class="preview-text-email email-text editable"> | |
{{ content }} | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
<table align="center" border="0" cellpadding="0" cellspacing="0" class="footer-table"> | |
<tbody> | |
<tr> | |
<td height="20" valign="top"></td> | |
</tr> | |
<tr> | |
<td> | |
<table border="0" cellpadding="0" cellspacing="0" width="100%"> | |
<tbody> | |
<tr> | |
<td width="70%" class="footer-td-wrapper"> | |
<table border="0" cellpadding="0" cellspacing="0" width="100%"> | |
<tbody> | |
<tr> | |
<td width="40"> <img src="INSERT PROFILE PICTURE URL" class="profile-pic"> </td> | |
<td> <b class="user-signature"><span class="user-name">INSERT YOUR FIRST NAME</span> from <span class="from-details">INSERT YOUR COMPANY NAME</span></b> </td> | |
</tr> | |
</tbody> | |
</table> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</td> | |
</tr> | |
<tr> | |
<td height="20" valign="top"></td> | |
</tr> | |
<tr> | |
<td class="unsubscribe-td" align="left"> | |
<p>Don't want to get emails like this? | |
<a href="{{unsubscribe_url}}" target="_blank">unsubscribe</a> | |
</p> | |
<p> | |
{{postal_address}} | |
</p> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment