dojo-templater
Version:
Easy HTML emails with variables
169 lines (131 loc) • 5 kB
HTML
<html>
<head>
<!-- we'll process and inline styles before sending -->
<style>
h1 { font-size: 48px; font-family: "Georgia" serif ; color: #4d4d4d;}
h2 { font-size: 18px; color: silver;}
a { color:#165E8E; text-decoration:none; font-family: "Lucida Grande", arial, sans-serif; }
p { font-family: "Lucida Grande", 'arial', sans-serif; line-height: 1.4em; font-size: 16px;}
.center { text-align: center; }
</style>
</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="#"><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;">
Your weekly ClassDojo roundup
</h1>
<p style='margin-top:35px'>
</p>
</td>
<td style='width: 50px;'></td>
</tr>
<!-- THE INSIGHTS -->
<tr>
<td style='width:50px;'></td>
<td>
<h3>Most Awarded: Cool Hand Luke</h3>
<ul>
<li>You gave 16 positive and 5 negative awards to Cool Hand Luke this week.</li></ul>
<h3>Most Improved: Cool Hand Luke</h3>
<ul>
<li>Cool Hand Luke saw the greatest improvement between the start and end of this week.</li></ul>
<h3>You used ClassDojo on 3 days this week</h3>
<ul>
<li>Most teachers use ClassDojo 4 times per week.</li></ul>
<h3>You gave 76 points</h3>
<ul><li>70% of your awards were positive (53 positive vs 23 negative)</li><li>You gave 32% fewer points than the average ClassDojo teacher.</li></ul>
<h3>Most common award: "Naughty"</h3>
<ul>
<li>You gave "Naughty" 18 times this week</li><li>A popular award on ClassDojo is "Persistence".</li></ul>
</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 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' >About ClassDojo</a>
•
<a href='http://www.classdojo.com/mission' >Our Mission</a>
•
<a href="{% unsubscribe_url %}">Unsubscribe</a>
</td>
</tr>
<!-- end list of links -->
<!-- SPACER -->
<tr>
<td class='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 -->
</tbody>
</table>
</body>
</html>