dojo-templater
Version:
Easy HTML emails with variables
176 lines (141 loc) • 6.93 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: #00b4ff;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; display: none'>Welcome to ClassDojo!</h1> -->
<p style="margin-top: 20px;font-family: "Lucida Grande", 'arial', sans-serif;line-height: 1.4em;font-size: 16px;">
Hi - your child has asked you to let them create a free ClassDojo student account.
<br><br>Your child's teacher is using ClassDojo to help your child build good behavior and learning habits, and improve their academic results.<br>
</p>
<h3 class="center" style="text-align: center;">Your child created this username: <b>USERNAME</b></h3>
<p style="margin-top: 20px;font-family: "Lucida Grande", 'arial', sans-serif;line-height: 1.4em;font-size: 16px;">
Your consent is needed to allow your child to use ClassDojo with the rest of their class. Please click below to approve:
</p>
</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="FILL IN" 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;">
Accept
</span>
</a>
</td>
<td style="width: 78px;"></td>
</tr>
</tbody>
</table>
</td>
<td style="width: 50px;"></td>
</tr>
<!-- 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 }}
<br>
<br>Cheers,<br>
The ClassDojo Team
</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: #00b4ff;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">About ClassDojo</a>
•
<a href="http://www.classdojo.com/mission" style="color: #00b4ff;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">Our Mission</a>
•
<a href="{% unsubscribe_url %}" style="color: #00b4ff;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>