dojo-templater
Version:
Easy HTML emails with variables
185 lines (147 loc) • 7.71 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 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 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>
<!-- HEADLINE AND TEXT -->
<tr>
<td style="width:50px;"></td>
<td>
<h1 style="margin: 25px auto 15px auto;font-weight: normal;font-size: 32px;font-family: "Georgia" serif;color: #4d4d4d;">
Your child's weekly report is ready!
</h1>
<p style="font-family: "Lucida Grande", 'arial', sans-serif;line-height: 1.4em;font-size: 16px;">
Your child's behavior and skills report for this week is now available to view on ClassDojo. <b><a href="%recipient.invite_url%" target='_blank' style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;">Check it out!</a></b>
</p>
</td>
</tr>
<!-- THE BUTTON -->
<tr>
<td style="width:50px;"></td>
<td>
<table width="100%" style="margin-top: 35px;">
<tbody>
<tr>
<td style="width:74px;"></td>
<td style="text-align:center">
<a href="%recipient.invite_url%" style="color: white;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">
<span style="text-align: center; font-size: 24px; text-shadow: 0px -1px 2px #999999; background-color: 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;">
Get report now
</span>
</a>
</td>
<td style="width: 78px;"></td>
</tr>
</tbody>
</table>
</td>
<td style="width: 50px;"></td>
</tr>
<tr>
<td colspan="6" style="text-align: center;"><br>
<h2 style="font-size: 18px;color: silver;">New: Check reports on the ClassDojo Parent App!:</h2>
<a href="http://www.classdojo.com/ios" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", 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" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width: 119px; margin-left:20px"></a>
</h2></td>
</tr>
<!-- THE MONSTERS -->
<tr>
<td colspan="3" style="text-align:center">
<a href="%recipient.invite_url%"><img src="http://static.classdojo.com/img/parent-email.png"></a>
</td>
</tr>
<!-- end monsters -->
</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 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="%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 style="text-align:center">
<div style="height:20px"></div>
</td>
</tr>
<!-- end spacer -->
<!-- APP ICONS -->
<tr>
<td class="center" style="text-align: center;margin: auto;display: block;">
<a href="http://www.classdojo.com/ios" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", 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" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", 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>