dojo-templater
Version:
Easy HTML emails with variables
212 lines (174 loc) • 9.02 kB
HTML
<html>
<head>
<!-- we'll process and inline styles before sending -->
</head>
<body style="font-size: 17px; font-family: "Lucida Grande", Arial, sans-serif; color: #4d4d4d; margin: 0; background: url(http://pstatic.classdojo.com/img/emails/bg-texture1.png); padding: 20px 0px ;">
<table style="width: 620px; margin:auto" cellspacing="0">
<tbody>
<!-- LOGO -->
<tr>
<td class="center" style="text-align: center;">
<a href="#" style="color: #165E8E;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;"><img src="http://pstatic.classdojo.com/img/emails/trigger-email-logo.png" width="300" alt="ClassDojo"></a>
</td>
</tr>
<!-- END LOGO -->
<!-- SPACER -->
<tr>
<td class="center" style="text-align: center;">
<div style="height:20px"></div>
</td>
</tr>
<!-- end spacer -->
<!-- TOP OF BODY -->
<tr>
<td style="background: url(http://pstatic.classdojo.com/img/emails/background-top.png) no-repeat">
<div style="height:19px"></div>
</td>
</tr>
<!-- end top of body -->
<!-- MIDDLE OF BODY -->
<tr>
<td style="background: url(http://pstatic.classdojo.com/img/emails/background-middle.png) repeat-y">
<!-- THE CONTENT -->
<table>
<tbody>
<tr>
<td style="width:50px;"></td>
<td>
<h1 class="center" style="margin: 25px auto 15px auto;font-weight: normal;font-size: 48px;font-family: "Georgia" serif;color: #4d4d4d;text-align: center;">Great new features in ClassDojo!</h1>
<p style="margin-top: 20px;font-family: "Lucida Grande", 'arial', sans-serif;line-height: 1.4em;font-size: 16px;">
Hey there,<br>
<br>
You haven't used <b><a href="http://teach.classdojo.com" style="color: #165E8E;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">ClassDojo</a></b> in a while, so we'd like to point out 3 new features we've added since you've been gone.
<br>
<br>
<b><a href="http://teach.classdojo.com" style="color: #165E8E;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">Check out our new features today</a></b> and be ready for next week!
</p>
<ul>
<li>New Android and iOS apps</li>
<li>Send parents updates whenever you want</li>
<li>New timer feature in class mode</li>
</ul>
</td>
<td style="width: 50px;"></td>
</tr>
<!-- THE BUTTON -->
<tr>
<td style="width:50px;"></td>
<td>
<table width="100%" style="margin-top: 15px;">
<tbody>
<tr>
<td style="width:74px;"></td>
<td class="center" style="text-align: center;">
<a href="http://teach.classdojo.com/#!/launchpad/add" style="color: white;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">
<span class="btn" style="text-align: center;font-size: 24px;text-shadow: 0px -1px 2px #999999;background: orange;border-radius: 3px;background-image: url(http://pstatic.classdojo.com/img/emails/btn-bg.png);background-repeat: no-repeat;height: 68px;line-height: 68px;color: white;display: block;font-weight: bold;">
Check out these features
</span>
</a>
</td>
<td style="width: 78px;"></td>
</tr>
</tbody>
</table>
</td>
<td style="width: 50px;"></td>
</tr>
<!-- BELOW BUTTON TEXT -->
<tr>
<td style="width:50px;"></td>
<td>
<p style="margin-top: 25px;font-family: "Lucida Grande", 'arial', sans-serif;line-height: 1.4em;font-size: 16px;">
<font size="2">
As always, please let us know if there's anything we can do to help.<br>
<br>
Cheers,<br>
The ClassDojo team
</font></p>
</td>
<td style="width: 50px;"></td>
</tr>
<!-- THE MONSTERS -->
<tr>
<td colspan="3" class="center" style="text-align: center;">
<img src="http://pstatic.classdojo.com/img/emails/trigger-emails-hero.png">
</td>
</tr>
<!-- end monsters -->
<!-- HEADLINE AND TEXT -->
<tr>
<td style="width:50px;"></td>
<td>
<p style="margin-top: 35px;font-family: "Lucida Grande", 'arial', sans-serif;line-height: 1.4em;font-size: 16px;">
{{ content }}
</p>
</td>
<td style="width: 50px;"></td>
</tr>
</tbody>
</table>
<!-- end the content -->
</td>
</tr>
<!-- middle of body -->
<!-- BOTTOM OF BODY -->
<tr>
<td class="" style="background: url(http://pstatic.classdojo.com/img/emails/background-bottom.png) no-repeat">
<div style="height:31px"></div>
</td>
</tr>
<!-- end bottom of body -->
<!-- SPACER -->
<tr>
<td class="center" style="text-align: center;">
<div style="height:20px"></div>
</td>
</tr>
<!-- end spacer -->
<!-- LIST OF LINKS -->
<tr>
<td style="font-size:14px;text-align:center; color: #ccc">
<a href="http://www.classdojo.com/about" style="color: #165E8E;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">About ClassDojo</a>
•
<a href="http://www.classdojo.com/mission" style="color: #165E8E;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">Our Mission</a>
•
<a href="http://teachersupport.classdojo.com" style="color: #165E8E;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">Support</a>
•
<a href="{% unsubscribe_url %}" style="color: #165E8E;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">Unsubscribe</a>
</td>
</tr>
<!-- end list of links -->
<!-- SPACER -->
<tr>
<td class="center" style="text-align: center;">
<div style="height:20px"></div>
</td>
</tr>
<!-- end spacer -->
<!-- ADDRESS -->
<tr>
<td style="text-align: center; font-size: 12px; font-family: "Lucida Grande", arial, sans-serif;">
Sent with love from ClassDojo HQ at:<br>
322 Sixth Street • Suite 6 • San Francisco, CA 94103
</td>
</tr>
<!-- end of address -->
<!-- SPACER -->
<tr>
<td class="center" style="text-align: center;">
<div style="height:20px"></div>
</td>
</tr>
<!-- end spacer -->
<!-- APP ICONS -->
<tr class="center" style="text-align: center;">
<td>
<a href="http://www.classdojo.com/ios" style="color: #165E8E;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;"><img src="http://pstatic.classdojo.com/img/emails/btn-app-store.png" style="margin-right:20px"></a>
<a href="http://www.classdojo.com/android" style="color: #165E8E;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;"><img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width: 119px; margin-left:20px"></a>
</td>
</tr>
<!-- end app icons -->
</tbody>
</table>
</body>
</html>