Skip to content

Instantly share code, notes, and snippets.

@zacharyc

zacharyc/email.html

Created November 18, 2021 23:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zacharyc/6a4ae85e72e0026025389ba75a8f8a3f to your computer and use it in GitHub Desktop.
Save zacharyc/6a4ae85e72e0026025389ba75a8f8a3f to your computer and use it in GitHub Desktop.
Download ZIP
Just an email Template for HTML Email
Raw
email.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Lime Insurance</title>
<style type="text/css">
body{
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
-moz-text-size-adjust:none;
/*START: HOTMAIL / OUTLOOK SPECIFIC*/
width:100%!important;
background-color:#f2f2f2!important;
font-family:Arial, Helvetica, sans-serif!important;
/*END: HOTMAIL / OUTLOOK SPECIFIC*/
}
/*START: HOTMAIL LINE HEIGHT SPECIFIC*/
.ExternalClass *{
line-height:100%!important;
}
div[id*=":"] table.button td.content span.hide{
font-size:9px!important; line-height:9px!important;
}
/*END: HOTMAIL LINE HEIGHT SPECIFIC*/
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;
}
@media screen and (min-width: 0px) and (max-width: 1024px) {
table.mcontainer{
table-layout:initial!important;
}
}
@media screen and (min-width: 0px) and (max-width: 767px) {
body{
background-color:#f2f2f2!important;
font-family:Arial, Helvetica, sans-serif!important;
-webkit-text-size-adjust:none!important;
-ms-text-size-adjust:none!important;
-moz-text-size-adjust:none!important;
}
td.gmailappwidth {
width:auto!important; max-width:92%!important;
min-width:92%!important;
}
table.hide {
display:none!important;
}
td.hide{
display:none!important;
}
span.hide{
display:none!important;
}
img.hide{
display:none!important;
}
img.resp{
width:100%!important;
height:auto!important;
}
img.resparticle{
width:100%!important;
height:auto!important;
}
span.clear{
display:block!important;
padding:0px 0px 5px 0px!important;
}
span.mfont{
font-size:18px!important;
line-height:22px!important;
}
a.mfont{
font-size:18px!important;
line-height:22px!important;
}
span.mfont2{
font-size:17px!important;
line-height:21px!important;
}
a.iosphone{
font-size:18px!important;
line-height:22px!important;
color:#0061a0!important;
text-decoration:underline!important;
}
table.pretxt{
width:100%!important;
}
td.pretxtleft{
width:100%!important;
padding:10px 30px 0px 30px!important;
}
td.pretxtleftnoright{
width:100%!important;
padding:10px 30px 10px 30px!important;
}
td.pretxtright{
width:100%!important;
padding:10px 30px 10px 30px!important;
text-align:left!important;
}
span.pretxt, a.pretxt{
font-size:13px!important;
line-height:15px!important;
}
a.pretxt{
color:#0061a0!important;
text-decoration:underline!important;
}
td.hdrlogo{
width:100%!important;
display:block!important;
text-align:center!important;
}
span.header{
font-size:28px!important;
line-height:32px!important;
}
span.subheader{
font-size:22px!important;
line-height:28px!important;
}
table.contentpadd{
width:100%!important;
}
table.end{
width:100%!important;
}
table.end td{
width:100%!important;
height:40px!important;
}
table.content{
width:100%!important; border-collapse:collapse!important;
}
td.content{
width:100%!important;
}
td.content30{
width:100%!important;
padding:30px 30px 30px 30px!important;
}
td.contenttlr30{
width:100%!important;
padding:30px 30px 0px 30px!important;
}
td.contentt15lr30{
width:100%!important;
padding:15px 30px 0px 30px!important;
}
td.duallogoleft{
width:50%!important;
padding:30px 0px 30px 30px!important;
}
td.duallogoright{
width:50%!important;
padding:30px 30px 30px 0px!important;
}
td.contentlr30{
width:100%!important;
padding:0px 30px 0px 30px!important;
}
td.contentt30{
width:100%!important;
padding:30px 0px 0px 0px!important;
}
td.contentlr20b25{
width:100%!important;
padding:0px 20px 25px 20px!important;
}
table.filmstriphdr{
height:auto!important;
}
td.hdlinepadd{
padding:30px 30px 30px 30px!important;
width:70%!important;
height:auto!important;
}
td.hdline{
width:100%!important;
padding:0px 20px 0px 20px!important;
}
table.button{
width:100%!important;
}
td.button{
width:100%!important;
height:auto!important;
display:block!important;
}
td.buttoncontent{
width:100%!important;
height:auto!important;
display:block!important;
}
a.button{
width:100%!important;
line-height:normal!important;
padding:15px 0px 15px 0px!important;
font-size:18px!important;
}
td.hr{
width:100%!important;
padding:0px 20px 0px 20px!important;
}
table.stack{
width:100%!important;
padding:30px 30px 0px 30px!important;
}
table.stackcontainer{
width:100%!important;
padding:0px 0px 0px 0px!important;
}
table.stackleft{
width:100%!important;
text-align:left!important;
}
table.stackright{
width:100%!important;
text-align:left!important;
}
td.stackcontent{
width:100%!important;
text-align:left!important;
}
td.center{
text-align:center!important;
}
img#margin{
margin:30px 0px 0px 0px!important;
}
table.promo{
width:100%!important;
padding:40px 0px 0px 0px!important;
}
td.promo{
width:100%!important;
padding:0px 0px 0px 0px!important;
}
table.promoimgleft{
width:100%!important;
padding:0px 0px 0px 0px!important;
}
table.promoleft{
width:100%!important;
padding:0px 0px 0px 0px!important;
border-right:none!important;
margin:0px 0px 40px 0px!important;
}
table.promoright{
width:100%!important;
padding:0px 0px 0px 0px!important;
}
table.promotxt{
width:80%!important;
}
td.promotxt{
height:auto!important;
padding:30px 0px 30px 0px!important;
}
span.promohdr{
font-size:24px!important;
line-height:28px!important;
}
span.promodescr{
font-size:20px!important;
line-height:24px!important;
}
table.promoright{
width:100%!important;
padding:0px 0px 0px 0px!important;
}
td.promoimg{
width:96%!important;
height:250px!important;
max-height:250px!important;
background-repeat:no-repeat!important;
background-size:cover!important;
background-position:0px -40px!important;
}
table.promo_noimage{
width:100%!important;
padding:30px 4% 30px 4%!important;
margin-top:30px!important;
}
table.footer{
width:100%!important;
padding:40px 20px 0px 20px!important;
}
td.msocial{
width:50%!important;
}
table.msociallogo{
width:80%!important;
max-width:200px!important;
padding:3px 0px 0px 0px!important;
text-align:right!important;
}
td.msociallogo{
width:25%!important;
}
span.iosftr{
font-size:13px!important;
line-height:18px!important;
}
table.ftrlogo{
max-width:40%!important;
}
table.ftrsoc{
max-width:60%!important;
}
table.legal{
width:100%!important;
padding:25px 20px 0px 20px!important;
}
td.ftnotenum{
width:2%!important;
}
td.ftnotecopy{
width:98%!important;
}
table.article{
width:100%!important;
padding:0px 0px 30px 0px!important;
}
td.articleimg{
width:100%!important;
display:block!important;
}
td.postdesc{
width:100%!important;
padding:20px 20px 0px 20px!important;
line-height:22px!important;
}
td.lispace1{
width:6%!important;
padding:0px 5px 10px 0px!important;
line-height:22px!important;
}
td.lispace2{
width:94%!important;
padding:0px 0px 10px 5px!important;
line-height:22px!important;
}
td.lispacelast1{
width:6%!important;
padding:0px 5px 0px 0px!important;
line-height:22px!important;
}
td.lispacelast2{
width:94%!important;
padding:0px 0px 0px 5px!important;
line-height:22px!important;
}
table.appstores{
padding:20px 0px 0px 0px!important;
}
}
@media screen and (min-width: 0px) and (max-width: 460px){
img.duallogo{
max-width:90%!important;
height:auto!important;
}
}
a.cta-button{
display:inline-block;
text-decoration:none;
border:0;
text-align:center;
font-weight:bold;
font-size:14px;
line-height:40px;
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
background:#007abc;
border:none;
padding: 0 20px;-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-webkit-text-size-adjust:none;
}
a.cta-button:hover{
background:#0061A0;
}
</style>
</head>
<body style="width:100%; background-color:#f2f2f2; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:18px; margin:0 auto; padding:0px;">
<table border="0" cellpadding="0" cellspacing="0" class="mcontainer" style="padding:0px; margin:0px; background-color:#f2f2f2; margin:0 auto; table-layout:fixed;" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" class="hide" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="100%">
<tr>
<td>&nbsp;</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="pretxt" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td class="content" width="600">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="content" width="500">
<tr>
<td align="left" class="pretxtleftnoright" width="500">
<span class="pretxt" style="font-size:11px; line-height:13px; color:#999999;">Be sure to get important updates: add no-reply@limeinsuranceco.com to your contacts.</span>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="hide" width="100">
<tr>
<td align="right" class="pretxtright" width="100">
<span class="pretxt" style="font-size:11px; line-height:13px; color:#999999;">&nbsp;</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="hide" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="100%">
<tr>
<td height="10" style="line-height:1px;">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="contentpadd" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="100%">
<tr>
<td class="gmailappwidth" style="min-width:600px;">
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="hide" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td height="25" style="line-height:1px;">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
</tr>
</table>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="content" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td bgcolor="#ffffff" class="hide" width="40">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
<td bgcolor="#ffffff" class="content30" width="520">
<a href="https://www.airkit.com" name="www_airkit_com" >
<img alt="Airkit" border="0" height="28" src="https://scalinghipster.com/ak/logo.png" style="display:inline-block; border:0;" width="130"/>
</a>
</td>
<td bgcolor="#ffffff" class="hide" width="40">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
</tr>
</table>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="hide" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td height="25" style="line-height:1px;">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
</tr>
</table>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="content filmstriphdr" style="font-family:Georgia, 'Times New Roman', Times, serif; margin:0 auto; min-height:150px;" width="600">
<tr>
<td bgcolor="#0090da" class="hide" height="20">&nbsp;</td>
<td bgcolor="#0090da" class="hide">&nbsp;</td>
<td bgcolor="#0090da" class="hide">&nbsp;</td>
<td bgcolor="#0061a0" class="hide">&nbsp;</td>
<td bgcolor="#a4ce4e" class="hide">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#0090da" class="hide" width="7%">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
<td bgcolor="#0090da" class="hdlinepadd" style="min-height:110px;" valign="top" width="55%">
<span class="header" style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:32px; line-height:40px; color:#ffffff; font-weight:bold; text-decoration:none;"> Complete your Statement of Health Today!</span>
</td>
<td bgcolor="#0090da" class="hide" width="3%">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
<td bgcolor="#0061a0" width="10%">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
<td bgcolor="#a4ce4e" width="25%">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
</tr>
<tr>
<td bgcolor="#0090da" class="hide" height="20">&nbsp;</td>
<td bgcolor="#0090da" class="hide">&nbsp;</td>
<td bgcolor="#0090da" class="hide">&nbsp;</td>
<td bgcolor="#0061a0" class="hide">&nbsp;</td>
<td bgcolor="#a4ce4e" class="hide">&nbsp;</td>
</tr>
</table>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="hide" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td align="right" height="25">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
</tr>
</table>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="hide" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td align="right" height="25">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
</tr>
</table>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="content" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td class="hide" width="40">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
<td class="contenttlr30" style="line-height:20px;" width="520">
<span class="mfont" style="font-size:14px; line-height:20px; color:#333333;">
Dear Foo,
<p>Thank you for your recent enrollment for Lime Insurance Co group insurance coverage. After an initial review, it has been determined that you and/or your dependent(s) are required to complete a Statement of Health in order to be considered for the coverage requested. We require a Statement of Health from: </p>
<br/><br/>
The Statement of Health is only available online for a limited time so please provide the necessary information for you and/or your dependents as soon as possible by clicking the link below.
<br/><br/>
<a class="cta-button" href="{{canvas_link}}#" name="get_started_now" target="_blank">GET STARTED NOW</a>
<br/><br/>
Sincerely,
<br/>
Lime Insurance Co
<br/><br/>
<strong>For questions about the Statement of Health process, call or email:</strong>
<br/>
<a href="tel:1-800-638-6420">1-800-555-1212</a>
(prompt 1) or <a href="mailto:support@limeinsuranceco.com">
support@limeinsuranceco.com</a>
<br><br>
Note: Internet Explorer is not supported. To access {{canvas_link}}, please use Chrome, Safari, Firefox, or Edge.</span>
</td>
<td class="hide" width="40">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
</td>
</tr>
</table>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td align="right" height="25">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
</tr>
</table>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td align="right" height="25">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
</tr>
</table>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="content" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td bgcolor="#0090da" height="15" style="font-size:1px; line-height:1px;" width="65%">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
<td bgcolor="#0061a0" height="15" style="font-size:1px; line-height:1px;" width="10%">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
<td bgcolor="#a4ce4e" height="15" style="font-size:1px; line-height:1px;" width="25%">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="hide" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td height="25" style="line-height:1px;">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="footer" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td class="content" width="600">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="content ftrlogo" width="460">
<tr>
<td align="left" class="content ftrlogo" width="460">
<a href="https://www.airkit.com" name="www_airkit_com_2" > <img alt="Lime Insurance" border="0" height="24" src="https://scalinghipster.com/ak/logo.png" width="112"/></a>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="content ftrsoc" width="140">
<tr>
<td align="right" class="content" width="140">&nbsp; </td>
</tr>
</table>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="hide" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td height="20">
<span style="font-size:1px; line-height:1px;">&nbsp;</span>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="legal" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td class="content" style="line-height:18px;" width="600">
<span class="iosftr" style="color:#999999; font-size:12px; line-height:18px;">Copyright 2021 Lime Insurance Co Services and Solutions, LLC. &mdash; All Rights Reserved.<br/><br/>Only upon submission of a complete Statement of Health form will the coverage be considered by Lime Insurance Company Redwood City, CA. Coverage will be effective in accordance with the applicable policy and certificate after approval by Lime Insurance Company. Please do not reply directly to this email. Lime Insurance Co will not receive any reply message. If you need assistance, please contact us using the phone number or email address in the email body above.</span>
<br><br>
<span class="pretxt" style="font-size:12px; line-height:13px; color:#999999;">Lime Insurance Company, 2114 Broadway, Redwood City, CA — All Rights Reserved.
</span>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="content" style="font-family:Arial, Helvetica, sans-serif; margin:0 auto;" width="600">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment