Created
May 30, 2022 07:12
-
-
Save neicore/a453c06c8e3ac7d5c7fdfd9d0a2c7557 to your computer and use it in GitHub Desktop.
Email Template Sample for the article "Our experience in creating HTML email templates"
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 style=" color-scheme: light dark; supported-color-schemes: light dark;"> | |
<head> | |
<meta name="viewport" content="width=device-width" /> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" /> | |
<link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet" /> | |
<title>Successful Deposit</title> | |
<meta name="color-scheme" content="light dark" /> | |
<meta name="supported-color-schemes" content="light dark" /> | |
<style> | |
.logo-image { | |
background-image: url(https://url_to_logo.svg); | |
background-size: contain; | |
background-repeat: no-repeat; | |
background-position: center; | |
} | |
@media (prefers-color-scheme: dark) { | |
.body, | |
table { | |
background-color: #020509 !important; | |
color: #ffffff !important; | |
} | |
h1, | |
h2, | |
h3, | |
p, | |
td { | |
color: #ffffff !important; | |
} | |
.main-container { | |
background-color: #05090F; | |
} | |
.wrapper { | |
background-color: #05090F; | |
} | |
.logo-image { | |
background-image: url(https://url_to_darkmode_logo.svg); | |
background-size: contain; | |
background-repeat: no-repeat; | |
background-position: center; | |
} | |
} | |
@font-face { | |
font-family: CircularStd-Book; | |
src: url(https://url_to_font.otf); | |
font-weight: normal; | |
} | |
@font-face { | |
font-family: CircularStd-Bold; | |
src: url(https://url_to_font.otf); | |
font-weight: bold; | |
} | |
@media only screen and (max-width: 620px) { | |
table[class="body"] h1 { | |
font-size: 28px !important; | |
margin-bottom: 10px !important; | |
} | |
table[class="body"] p, | |
table[class="body"] ul, | |
table[class="body"] ol, | |
table[class="body"] td, | |
table[class="body"] span, | |
table[class="body"] a { | |
font-size: 16px !important; | |
} | |
table[class="body"] .wrapper, | |
table[class="body"] .article { | |
padding: 10px !important; | |
} | |
table[class="body"] .content { | |
padding: 0 !important; | |
} | |
table[class="body"] .container { | |
padding: 0 !important; | |
width: 100% !important; | |
} | |
table[class="body"] .main { | |
border-left-width: 0 !important; | |
border-radius: 0 !important; | |
border-right-width: 0 !important; | |
} | |
table[class="body"] .btn table { | |
width: 100% !important; | |
} | |
table[class="body"] .btn a { | |
width: 100% !important; | |
} | |
table[class="body"] .img-responsive { | |
height: auto !important; | |
max-width: 100% !important; | |
width: auto !important; | |
} | |
} | |
@media all { | |
.ExternalClass { | |
width: 100%; | |
} | |
.ExternalClass, | |
.ExternalClass p, | |
.ExternalClass span, | |
.ExternalClass font, | |
.ExternalClass td, | |
.ExternalClass div { | |
line-height: 100%; | |
} | |
.apple-link a { | |
color: inherit !important; | |
font-family: inherit !important; | |
font-size: inherit !important; | |
font-weight: inherit !important; | |
line-height: inherit !important; | |
text-decoration: none !important; | |
} | |
.btn-primary a:hover { | |
background-color: #34495e !important; | |
border-color: #34495e !important; | |
} | |
} | |
</style> | |
</head> | |
<body class style=" | |
background-color: #f6f6f6; | |
font-family: 'CircularStd-Book', Lato; | |
-webkit-font-smoothing: antialiased; | |
font-size: 14px; | |
line-height: 1.4; | |
margin: 0; | |
padding: 0; | |
-ms-text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100%; | |
"> | |
<table border="0" cellpadding="0" cellspacing="0" class="body" style=" | |
border-collapse: separate; | |
mso-table-lspace: 0pt; | |
mso-table-rspace: 0pt; | |
background-color: #f6f6f6; | |
width: 100%; | |
" width="100%" bgcolor="#f6f6f6"> | |
<tr style="height: 100vh"> | |
<td style=" | |
font-family: 'CircularStd-Book', Lato; | |
font-size: 14px; | |
vertical-align: top; | |
" valign="top"> | |
| |
</td> | |
<td class="container" style=" | |
font-family: 'CircularStd-Book', Lato; | |
font-size: 14px; | |
vertical-align: top; | |
display: block; | |
max-width: 580px; | |
padding: 10px; | |
width: 580px; | |
margin: 0 auto; | |
" width="580" valign="top"> | |
<div class="content" style=" | |
box-sizing: border-box; | |
display: block; | |
margin: 0 auto; | |
max-width: 580px; | |
padding: 10px; | |
"> | |
<!-- START CENTERED WHITE CONTAINER --> | |
<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; | |
">GetPaid Transaction Update</span> | |
<table class="main" style=" | |
border-collapse: separate; | |
mso-table-lspace: 0pt; | |
mso-table-rspace: 0pt; | |
background: #ffffff; | |
width: 100%; | |
"> | |
<!-- START MAIN CONTENT AREA --> | |
<tr> | |
<td class="wrapper" style=" | |
font-family: 'CircularStd-Book', Lato; | |
font-size: 14px; | |
vertical-align: top; | |
box-sizing: border-box; | |
padding: 20px; | |
" valign="top"> | |
<div alt="GetPaid" class="logo-image" style="height: 36px;margin: 20px 0 10px 0px;"> | |
</div> | |
<table border="0" cellpadding="0" cellspacing="0" style=" | |
border-collapse: separate; | |
mso-table-lspace: 0pt; | |
mso-table-rspace: 0pt; | |
width: 100%; | |
" width="100%"> | |
<tr> | |
<td class="main-container" style=" | |
font-family: 'CircularStd-Book', Lato; | |
font-size: 14px; | |
vertical-align: top; | |
padding: 20px 0; | |
text-align: left; | |
color: #474747; | |
" align="left" valign="top"> | |
<p style=" | |
font-family: 'CircularStd-Book', Lato; | |
font-weight: normal; | |
margin-bottom: 15px; | |
margin: 20px 0; | |
font-size: 14px; | |
mso-line-height-rule: exactly; | |
line-height: 24px; | |
margin: 30px 0; | |
"> | |
<span style="font-size: 20px; font-weight: bold"> | |
Hi {{user}},</span> | |
</p> | |
<p style=" | |
margin: 10px 0; | |
font-size: 16px; | |
mso-line-height-rule: exactly; | |
line-height: 24px; | |
margin: 30px 0; | |
"> | |
This alert is generated to notify you that the deposit of | |
{{deposit_amount}} to your account was received successfully. Here is | |
the summary of your deposit. | |
<br /> | |
<br /> | |
{{deposit_summary}} | |
</p> | |
<p style=" | |
font-family: 'CircularStd-Book', Lato; | |
font-weight: normal; | |
margin-bottom: 15px; | |
font-size: 16px; | |
mso-line-height-rule: exactly; | |
line-height: 24px; | |
margin: 35px 0; | |
"> | |
Best Regards, <br /> | |
The GetPaid Team | |
</p> | |
<!-- START FOOTER --> | |
<div class="footer" | |
style="clear: both; Margin-top: 10px; text-align: center; width: 100%;"> | |
<p | |
style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;Margin-bottom:15px;font-size:11px; font-weight: bold;"> | |
GetPaidAfrica<br>Kenya - Rwanda - Tanzania</p> | |
<div class="social-icons" style="display: table; margin: 0 auto;"> | |
<div style="display: flex;"> | |
<a target="_blank" href="https://twitter.com/AfricaGetpaid" | |
style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#5C68E2;font-size:14px"><img | |
title="Twitter" src="https://url_to_twitter_icon.png" | |
alt="Tw" height="24" | |
style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></a> | |
<a target="_blank" | |
href="https://www.linkedin.com/company/getpaidafrica/" | |
style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#5C68E2;font-size:14px"><img | |
title="Linkedin" src="https://url_to_linkedin_icon.png" | |
alt="In" height="24" | |
style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></a> | |
</div> | |
</div> | |
</div> | |
<!-- END FOOTER --> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
<!-- END MAIN CONTENT AREA --> | |
</table> | |
<!-- END CENTERED WHITE CONTAINER --> | |
</div> | |
</td> | |
<td style=" | |
font-family: 'CircularStd-Book', Lato; | |
font-size: 14px; | |
vertical-align: top; | |
" valign="top"> | |
| |
</td> | |
</tr> | |
</table> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment