dojo-templater
Version:
Easy HTML emails with variables
167 lines (134 loc) • 6.51 kB
HTML
<!-- Dojo Layout -->
<html>
<head>
</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>
<!-- HEADLINE AND TEXT -->
<tr>
<td style="width:50px;"></td>
<td>
{{ content }}
<h1 style="margin: 25px auto 15px auto;font-weight: normal;font-size: 32px;font-family: "Georgia" serif;color: #4d4d4d;">
View {{ event.student_name}} report on ClassDojo
</h1>
<p style="margin-top: 35px;font-family: "Lucida Grande", 'arial', sans-serif;line-height: 1.4em;font-size: 16px;">
{{ event.teacher_name }} would like to share <b><a href="{{ event.invite_link }}" target='_blank' style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;">your child's behavior and skills report</a></b> on ClassDojo.
</p>
</td>
<td style="width: 50px;"></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 class="center" style="text-align: center;">
<a href="{{ event.invite_link }}" target="_blank" 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;border-radius: 3px;background: orange;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>
<!-- THE MONSTERS -->
<tr>
<td colspan="3" class="center" style="text-align: center;">
<a href="{{ event.invite_link }}" target="_blank"><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 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" target="_blank" style="color: #165E8E;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">About ClassDojo</a>
•
<a href="http://www.classdojo.com/mission" target="_blank" style="color: #165E8E;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">Our Mission</a>
•
<a href="{% unsubscribe_url %}" target="_blank" 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 -->
</tbody>
</table>
</body>
</html>