Skip to content

Instantly share code, notes, and snippets.

@skydevht

skydevht/d2v-email-template.markdown

Created March 23, 2019 19:54
Show Gist options
  • Save skydevht/a084f53e6587bfdbf42cf7f5364c56e2 to your computer and use it in GitHub Desktop.
Save skydevht/a084f53e6587bfdbf42cf7f5364c56e2 to your computer and use it in GitHub Desktop.
Download ZIP
d2v email template
Raw
index.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 charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 9 - 26 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
<!--<![endif]-->
<!-- Web Font / @font-face : END -->
<!-- CSS Reset -->
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
Margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
.mobile-link--footer a,
a[x-apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
@media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
margin: auto !important;
}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
max-width: 100% !important;
height: auto !important;
Margin-left: auto !important;
Margin-right: auto !important;
}
/* And center justify these ones. */
.fluid-centered {
Margin-left: auto !important;
Margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
Margin-left: auto !important;
Margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body bgcolor="#fafafa" width="100%" style="Margin: 0;">
<center style="width: 100%; background: #fafafa;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
(Optional) This text will appear in the inbox preview, but not the email body.
</div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email Header : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
<tr>
<td style="padding: 20px 0; text-align: center">
<img src="http://placehold.it/200x50" width="200" height="50" alt="alt_text" border="0">
</td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Email Body : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" style="margin: auto;" class="email-container">
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td>
<img src="http://placehold.it/600x300" width="600" height="" alt="alt_text" border="0" align="center" style="width: 100%; max-width: 600px;">
</td>
</tr>
<!-- Hero Image, Flush : END -->
<!-- 1 Column Text : BEGIN -->
<tr>
<td style="padding: 40px; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;">
Hi **receiverName**, <br />
We received a package for you at **receivedDate**. It's waiting for you at **deliveryArea**
<br><br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" align="center" style="Margin: auto">
<tr>
<td style="border-radius: 3px; background: #4290F7; text-align: center;" class="button-td">
<a href="http://www.google.com" style="background: #4290F7; border: 15px solid #4290F7; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffffff">Reclaim</span>&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</td>
</tr>
</table>
<!-- Button : END -->
</td>
</tr>
<!-- 1 Column Text : BEGIN -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
<tr>
<td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;">
<br><br>
Company Name<br><span class="mobile-link--footer">123 Fake Street, SpringField, OR, 97477 US</span><br><span class="mobile-link--footer">(123) 456-7890</span>
<br><br>
<unsubscribe style="color:#888888; text-decoration:underline;">unsubscribe</unsubscribe>
</td>
</tr>
</table>
<!-- Email Footer : END -->
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment