dojo-templater
Version:
Easy HTML emails with variables
180 lines (143 loc) • 13.8 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<head style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<title style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">Meet the new ClassDojo monsters</title>
<!-- we'll process and inline styles before sending -->
<style>
/* -------------------------------------------
PHONE
For clients that support media queries.
Nothing fancy.
-------------------------------------------- */
@media only screen and (max-width: 600px) {
ul li { margin-left: 10px;}
h1 {font-size: 48px;}
a[class="btn"] { display:block; margin-bottom:10px; background-image:none; margin-right:0;}
div[class="column"] { width: auto; float:none;}
table.social div[class="column"] {
width:auto;
}
.paper { padding: 10px; }
.btn-center {
width: auto;
padding: 0 10px;
}
.buffer-container {
width: 100% ;
}
}
</style>
</head>
<body bgcolor="#faf9f9" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;width: 100%;">
<!-- HEADER -->
<table class="head-wrap" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;border-collapse: separate;border-spacing: 0;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<td class="header container" style="margin: 0 auto;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;display: block;max-width: 600px;clear: both;">
<div class="content" style="margin: 0 auto;padding: 15px;font-family: "Helvetica Neue", arial, sans-serif;max-width: 600px;display: block;">
<table style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;border-collapse: separate;border-spacing: 0;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<td align="center" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://pstatic.classdojo.com/img/emails/trigger-email-logo.png" width="300" alt="ClassDojo" style="margin: 0 auto;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;max-width: 100%;display: block;"></td>
</tr>
</table>
</div>
</td>
</tr>
</table><!-- /HEADER -->
<!-- BODY -->
<table class="body-wrap" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;border-collapse: separate;border-spacing: 0;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<td style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;"></td>
<td class="container" bgcolor="#FFFFFF" style="margin: 0 auto;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;display: block;max-width: 600px;clear: both;">
<div class="content paper" style="margin: 0 auto;padding: 40px;font-family: "Helvetica Neue", arial, sans-serif;max-width: 600px;display: block;-webkit-box-shadow: 0px 0px 5px 2px #e0e0e0;box-shadow: 0px 0px 5px 2px #e0e0e0;">
<table class="body-wrap clear" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;border-collapse: separate;border-spacing: 0;display: block;clear: both;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<td style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<h1 style="margin: 0;padding: 0;font-family: Georgia, "Lucida Grande", serif;font-weight: 200;text-align: center;line-height: 1.1;margin-bottom: 15px;color: #222;font-size: 52px;">ClassDojo - now in Hebrew!</h1>
</td>
</tr>
</table>
<p style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a href="http://teach.classdojo.com/#!/settings" target="_blank" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;color: #00b4ff;font-weight: bold;text-decoration: underline;"><img src="#FILLIN" alt="Please allow images for this email" style="margin: 0 auto;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;max-width: 100%;display: block;"></a></p>
<br style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<table style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;border-collapse: separate;border-spacing: 0;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<td style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<p style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">Try ClassDojo in Hebrew now! <a href="http://teach.classdojo.com/#!/settings" target="_blank" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;color: #00b4ff;font-weight: bold;text-decoration: underline;">Just click here and set Hebrew as your language preference</a>, and you'll be all set up :)</p>
</td>
</tr>
</table>
<!-- Left buffer, ensures button centering in nice clients -->
<div class="buffer" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;width: 110px;height: 1px;display: table-cell;float: left;"> </div>
<div class="buffer-container" style="margin: 30px 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;width: 300px;display: table-cell;float: left;">
<table class="body-wrap" border="0" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;border-collapse: separate;border-spacing: 0;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<!-- Left button cap -->
<td class="btn-left" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;background-repeat: no-repeat;width: 5px;height: 64px;background-image: url(http://neutyp.com/staging/classdojo/images/btn-bg-left.gif);"></td>
<!-- Fluid, stretching center button section -->
<td class="btn-center" width="260px" bgcolor="#FEA302" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;font-size: 28px;font-weight: bold;text-shadow: 0px -1px 2px #999999;color: white;vertical-align: middle;text-align: center;height: 64px;width: 260px;background-color: #FEA302;background-image: url(http://neutyp.com/staging/classdojo/images/btn-bg-mid.gif);background-repeat: repeat-x;border: 0;">
<a href="https://teach.classdojo.com/#!/settings" target="_blank" class="call-to-action" style="margin: 0;padding: 15px 0;font-family: "Helvetica Neue", arial, sans-serif;color: #ffffff;font-weight: bold;text-decoration: none;display: block;width: 100%;height: 34px;">Try it now →</a>
</td>
<!-- Right button cap -->
<td class="btn-right" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;background-repeat: no-repeat;width: 5px;height: 64px;background-image: url(http://neutyp.com/staging/classdojo/images/btn-bg-right.gif);"></td>
</tr>
</table>
</div>
<!-- Right buffer, ensures button centering in nice clients -->
<div class="buffer" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;width: 110px;height: 1px;display: table-cell;float: left;"> </div>
<br class="clear" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;display: block;clear: both;">
<table style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;border-collapse: separate;border-spacing: 0;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<td style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<p style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">As always, if there's anything we can do to help, just let us know :)
<br style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<br style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
Cheers,
<br style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
The ClassDojo Team</p>
<p style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">
<br style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
p.s. we've created some beautiful presentation materials for you, too - in Hebrew of course! <a href="#FILLIN" target="_blank" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;color: #00b4ff;font-weight: bold;text-decoration: underline;">Get them here now →</a></p>
</td>
</tr>
</table>
</div>
</td>
<td style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;"></td>
</tr>
</table><!-- /BODY -->
<!-- FOOTER -->
<table class="footer-wrap" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;border-collapse: separate;border-spacing: 0;width: 100%;clear: both;">
<tr style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<td class="container" colspan="3" style="margin: 0 auto;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;display: block;max-width: 600px;clear: both;">
<!-- content -->
<div class="content" style="margin: 0 auto;padding: 15px;font-family: "Helvetica Neue", arial, sans-serif;max-width: 600px;display: block;">
<table style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;border-collapse: separate;border-spacing: 0;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<td align="center" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<p class="footer" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;text-decoration: none;margin-top: 30px;">
<a href="http://www.classdojo.com/about" target="_blank" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;color: #999;font-weight: normal;text-decoration: underline;">About ClassDojo</a>
<span class="dot" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;text-align: center;color: #ccc;"> • </span>
<a href="http://www.classdojo.com/mission" target="_blank" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;color: #999;font-weight: normal;text-decoration: underline;">Our Mission</a>
<span class="dot" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;text-align: center;color: #ccc;"> • </span>
<a href="http://teachersupport.classdojo.com" target="_blank" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;color: #999;font-weight: normal;text-decoration: underline;">Support</a>
<span class="dot" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;text-align: center;color: #ccc;"> • </span>
<a href="%unsubscribe_url%" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;color: #999;font-weight: normal;text-decoration: underline;">Unsubscribe</a>
</p>
</td>
</tr>
<tr style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
<td align="center" class="signout" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;text-align: center;font-size: 12px;color: #777;">
<br style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
Sent with love from ClassDojo HQ at:<br style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
322 Sixth Street • Suite 6 • San Francisco, CA 94103
</td>
</tr>
</table>
</div><!-- /content -->
</td>
</tr>
</table><!-- /FOOTER -->
</body>
</html>