dojo-templater
Version:
Easy HTML emails with variables
181 lines (147 loc) • 16.6 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;">ClassDojo classroom decoration contest!</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;">Beautiful decorations for your classroom</h1>
<h2 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: 37px;"><small style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;font-size: 60%;color: #6f6f6f;line-height: 0;text-transform: none;">...and a chance to win a ClassDojo t-shirt!</small></h2>
<br style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
</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://classdojo.s3.amazonaws.com/share/ClassDojo_Classroom_Decoration_Pack.zip" target="_blank" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;color: #00b4ff;font-weight: bold;text-decoration: underline;"><img src="http://c.classdojo.com/img/email/email-decoration.png" 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;">
<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;">%recipient.first_name%, hey!</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;">We know how time-consuming and expensive decorating your classroom for the new year can be, so we thought we'd help out - in two ways:</p>
<br 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;">1. We've made you a special gift to decorate your classroom with: <a href="http://classdojo.s3.amazonaws.com/share/ClassDojo_Classroom_Decoration_Pack.zip" target="_blank" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;color: #00b4ff;font-weight: bold;text-decoration: underline;">the ClassDojo Classroom Decoration Pack!</a> It's full of beautiful free posters, room signs, images, and banners for your classroom - we even threw in a bathroom pass and hall pass! <a href="http://classdojo.s3.amazonaws.com/share/ClassDojo_Classroom_Decoration_Pack.zip" target="_blank" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;color: #00b4ff;font-weight: bold;text-decoration: underline;">Get it here now →</a></p>
</td>
</tr><tr style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">
</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="http://classdojo.s3.amazonaws.com/share/ClassDojo_Classroom_Decoration_Pack.zip" 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;">Get the pack 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;">2. We're running a classroom decoration contest to give you a chance to win a beautiful ClassDojo t-shirt! All you have to do is send a picture of your decorated classroom to <a href="mailto:contest@classdojo.com" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;color: #00b4ff;font-weight: bold;text-decoration: underline;">contest@classdojo.com</a> by September 13th. Bonus points for creativity - we're excited to see what you come up with!</p>
<br 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 one of us know :)</p>
<br 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;">Cheers,<br style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">The ClassDojo team</p>
<br 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;"><small style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;">p.s. reminder: it's your last week to get your <a href="http://www.classdojo.com/classdojolove" target="_blank" style="margin: 0;padding: 0;font-family: "Helvetica Neue", arial, sans-serif;color: #00b4ff;font-weight: bold;text-decoration: underline;">#ClassDojoLove</a> entries in :)</small>
</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>