Created
April 20, 2017 09:09
-
-
Save fatmatto/0e5b6ff628085bcd89502bdd0fca3c01 to your computer and use it in GitHub Desktop.
Email template example for blogpost at https://www.marketcloud.it/blog/marketcloud-nodemailer-custom-emails
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
<!doctype html> | |
<html> | |
<head> | |
<meta name="viewport" content="width=device-width"> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
<title>Thank you for your order!</title> | |
<style media="all" type="text/css"> | |
@media all { | |
.btn-primary table td:hover { | |
background-color: #34495e !important; | |
} | |
.btn-primary a:hover { | |
background-color: #34495e !important; | |
border-color: #34495e !important; | |
} | |
} | |
@media all { | |
.btn-secondary a:hover { | |
border-color: #34495e !important; | |
color: #34495e !important; | |
} | |
} | |
@media only screen and (max-width: 620px) { | |
table[class=body] h1 { | |
font-size: 28px !important; | |
margin-bottom: 10px !important; | |
} | |
table[class=body] h2 { | |
font-size: 22px !important; | |
margin-bottom: 10px !important; | |
} | |
table[class=body] h3 { | |
font-size: 16px !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] .header { | |
margin-bottom: 10px !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; | |
} | |
table[class=body] .alert td { | |
border-radius: 0 !important; | |
padding: 10px !important; | |
} | |
table[class=body] .span-2, | |
table[class=body] .span-3 { | |
max-width: none !important; | |
width: 100% !important; | |
} | |
table[class=body] .receipt { | |
width: 100% !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; | |
} | |
} | |
</style> | |
</head> | |
<body class="" style="font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f6f6f6; margin: 0; padding: 0;"> | |
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;" width="100%" bgcolor="#f6f6f6"> | |
<tr> | |
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td> | |
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto !important; max-width: 580px; padding: 10px; width: 580px;" 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;"> | |
<title>Thank you for your order!</title> | |
</span> | |
<table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #fff; border-radius: 3px;" width="100%"> | |
<!-- START MAIN CONTENT AREA --> | |
<tr> | |
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top"> | |
<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 style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> | |
<h1 style="font-family: sans-serif; font-size: 24px; font-weight: bold; margin: 0; Margin-bottom: 15px;"> | |
Thank you for your order | |
</h1> | |
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"> | |
We received your order and we will notify you as soon as we process it. As a reminder, the order total is <%= order.total %>. | |
</p> | |
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;" width="100%"> | |
<tbody> | |
<tr> | |
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top"> | |
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"> | |
<tbody> | |
<tr> | |
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="https://weird-store-xxx.herokuapp.com" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Visit our store</a> </td> | |
</tr> | |
</tbody> | |
</table> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">See you soon!</p> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
<!-- END MAIN CONTENT AREA --> | |
</table> | |
<!-- START FOOTER --> | |
<div class="footer" style="clear: both; padding-top: 10px; text-align: center; width: 100%;"> | |
<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="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-top: 10px; padding-bottom: 10px; font-size: 12px; color: #999999; text-align: center;" valign="top" align="center"> | |
Powered by <a href="https://www.marketcloud.it" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;">Marketcloud</a>. | |
</td> | |
</tr> | |
</table> | |
</div> | |
<!-- END FOOTER --> | |
<!-- END CENTERED WHITE CONTAINER --></div> | |
</td> | |
<td style="font-family: sans-serif; 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