dojo-templater
Version:
Easy HTML emails with variables
327 lines (265 loc) • 22.2 kB
HTML
<html>
<head>
<!-- we'll process and inline styles before sending -->
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>
<body style="color: #4d4d4d; margin: 0; background: url(http://pstatic.classdojo.com/img/emails/bg-texture1.png); padding: 20px 0px ;">
<table style="width: 610px; margin:auto;" cellspacing="0">
<tbody>
<!-- LOGO -->
<tr>
<td class="center" style="text-align: center;margin: auto;display: block;">
</td>
</tr>
<!-- END LOGO -->
<!-- SPACER -->
<tr>
<td class="center" style="text-align: center;margin: auto;display: block;">
<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 style="margin:auto; padding: 0px 30px;">
<tbody>
<!-- image -->
<tr>
<td colspan="6">
<h1 class="center" style="font-size: 60px;font-family: "Georgia" serif;line-height: 48px;font-weight: normal;color: #4d4d4d;text-align: center;margin: auto;display: block;"> The Dojo Times </h1>
<hr>
</td>
</tr>
<tr>
<td colspan="6">
<p class="center" style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;text-align: center;margin: auto;display: block;">April 2013</p>
</td>
</tr>
<tr>
<td colspan="6">
<p style="margin-top: 20px;font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;">
Welcome to the first-ever Dojo Times! This is ClassDojo's monthly newsletter where we'll share sneak peeks of new features, make special announcements, and bring you stories from other ClassDojo teachers. In this edition:
</p>
<ol style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;">
<li>
Find out who won the <span style="font-weight:bold">ClassDojo 2013 Resolution Contest</span>
</li>
<li>
<span style="font-weight:bold">Send daily updates to parents</span> - with just one click!
</li>
<li>
See how other teachers around the world are using ClassDojo
</li>
</ol>
<p style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;">
We hope you enjoy it :)
</p>
<hr>
</td>
</tr>
<!-- image -->
<tr>
<td colspan="6">
<h2 style="margin: 25px auto 5px auto;font-size: 32px;font-family: "Georgia" serif;line-height: 42px;font-weight: 100;color: #4d4d4d;text-align: center;">The ClassDojo Resolution Contest</h2>
<br>
<a href="http://www.classdojo.com/stories/owen" target="_blank"><img src="http://c.classdojo.com/img/page_resolution/hero-nye.png" class="header" style="width: 60%;margin: auto;display: block;"></a>
</td>
</tr>
<!-- text -->
<tr>
<td colspan="6">
<p style="margin-top: 20px;font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;">
In January we asked:
<b> "What learning habits, behaviors, or skills do you want to build with your students in 2013?"</b> We were amazed and inspired by all the responses highlighting the ways thousands of teachers around the world are using ClassDojo to build positive behavior with their students, enhance amazing classrooms, and engage parents.
<br>
<br>
The iPad-winning tweet came from Katie Owen, who teaches K-6 in Illinois:
<br>
<br>
</p>
<a href="https://twitter.com/MsKatieOwen/status/291935200320032768" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://static.classdojo.com/img/stories/owen/blog1.jpg" width="80%" style="margin:auto; display: block"></a>
<p style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;">
<b><a href="http://www.classdojo.com/stories/owen" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;">Read our interview with Katie</a></b> to hear the full story of how she's using ClassDojo in her classroom. Congratulations Katie, and thank you to everyone who participated :)
</p>
</td>
</tr>
<tr>
<td colspan="6">
<hr>
<h2 style="font-size: 32px;font-family: "Georgia" serif;line-height: 42px;font-weight: 100;color: #4d4d4d;text-align: center;">New Feature: Engage Parents with Daily Updates - with One Click!</h2>
<a href="http://www.classdojo.com/midweekupdate" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://static.classdojo.com/img/parent-email.png" class="header" style="width: 60%;margin: auto;display: block;"></a>
<p style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;"> You've told us you love easily engaging parents with ClassDojo's reports - so we've made it even easier. :) Now you can send reports home whenever you want!
</p>
<ul style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;">
<li>Send updates home as often as you'd like - with just one click</li>
<li>Send reports for the whole class or just for specific students</li>
<li>Add a short message to the reports</li>
</ul>
<b><a href="http://www.classdojo.com/midweekupdate" target="_blank" class="center" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;text-align: center;margin: auto;display: block;">Learn how to easily send parent updates here →</a></b>
<!-- <a href='http://www.classdojo.com/android' style='color:white'>
<span class='btn'>
Get The App Now!
</span>
</a> -->
</td>
</tr>
<tr>
<td colspan="6">
<hr>
<h2 style="font-size: 32px;font-family: "Georgia" serif;line-height: 42px;font-weight: 100;color: #4d4d4d;text-align: center;">Stories from ClassDojo teachers</h2>
<p style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;"> <b><a href="http://www.classdojo.com/stories" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;">Our new stories page</a></b> highlights teachers who are using ClassDojo in their classroom in innovative ways. Read some here! </p>
<br>
</td>
</tr>
<tr>
<td width="106px" style="height:100px;" colspan="2">
<a href="http://www.classdojo.com/stories/seyfert" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://c.classdojo.com/img/stories/seyfert/seyfert_photo_prof.jpg" class="header photo" style="margin-bottom: 20px;height: 100px;width: 100px;border: 4px solid white;box-shadow: 0px 2px 4px #ddd;margin: auto;display: block;"></a>
</td>
<td width="250px" style="height:100px;" colspan="3">
<a href="http://www.classdojo.com/stories/seyfert" style="float: left;height: 60px;color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;" target="_blank"><b>Troy Seyfert explains how he introduced ClassDojo to his class →</b></a>
</td>
</tr>
<tr>
<td width="106px" style="height:100px;" colspan="2">
<a href="http://www.classdojo.com/stories/wiggins" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://c.classdojo.com/img/stories/wiggins/wiggins_photo_prof.jpg" class="header photo" style="margin-bottom: 20px;height: 100px;width: 100px;border: 4px solid white;box-shadow: 0px 2px 4px #ddd;margin: auto;display: block;"></a>
</td>
<td width="250px" style="height:100px;" colspan="3">
<a href="http://www.classdojo.com/stories/wiggins" style="float: left;height: 60px;color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;" target="_blank"><b>Adrienne Wiggins shares how she set up a classroom rewards system using ClassDojo! →</b></a>
</td>
</tr>
<tr>
<td width="106px" style="height:100px;" colspan="2">
<a href="http://www.classdojo.com/stories/west" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://c.classdojo.com/img/stories/west/west_photo_prof.jpg" class="header photo" style="margin-bottom: 20px;height: 100px;width: 100px;border: 4px solid white;box-shadow: 0px 2px 4px #ddd;margin: auto;display: block;"></a>
</td>
<td width="250px" style="height:100px;" colspan="3">
<a href="http://www.classdojo.com/stories/west" style="float: left;height: 60px;color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;" target="_blank"><b>Angela West explains how she uses ClassDojo to improve academic results in her class →</b></a>
</td>
</tr>
<tr>
<td width="106px" style="height:100px;" colspan="2">
<a href="http://www.classdojo.com/stories/badiner" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://c.classdojo.com/img/stories/badiner/badiner_photo_prof.jpg" class="header photo" style="height: 100px;width: 100px;border: 4px solid white;box-shadow: 0px 2px 4px #ddd;margin: auto;display: block;"></a>
</td>
<td width="250px" style="height:100px;" colspan="3">
<a href="http://www.classdojo.com/stories/badiner" style="float: left;height: 60px;color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;" target="_blank"><b>Jeremy Badiner shares how he builds student ownership of behavior using ClassDojo →</b></a>
</td>
</tr>
<td colspan="6">
<a href="http://www.classdojo.com/stories" class="btn" target="_blank" style="color: white;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;text-align: center;font-size: 24px;text-shadow: 0px -1px 2px #999999;border-radius: 3px;background-image: url(http://pstatic.classdojo.com/img/emails/btn-bg.png);background-repeat: no-repeat;height: 68px;line-height: 68px;display: block;font-weight: bold;margin: auto;background-position: center;">
<h4 style="text-align: center; margin: auto; margin-top:15px; padding: 0px 30px;">
Read More!
</h4>
</a>
</td>
</tr><tr>
<td colspan="6">
<p class="center" ; style="margin-top: 15px;font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;text-align: center;margin: auto;display: block;"> Want to be featured on the stories page? <b><a href="https://classdojo.wufoo.com/forms/classdojo-stories-page-signup/" target='_blank' style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"> Let us know! </a></b></p>
<br>
</td>
</tr>
<tr>
<td colspan="6">
<hr>
<h2 style="font-size: 32px;font-family: "Georgia" serif;line-height: 42px;font-weight: 100;color: #4d4d4d;text-align: center;">Never miss another update!</h2>
<p style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;">
Connect with ClassDojo and be first to get new features:
</p>
<br>
</td>
</tr>
<tr style="margin-bottom:-30px">
<td colspan="2">
<a href="http://www.twitter.com/classdojo" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://static.classdojo.com/img/page_share/mojo-twitter.png" width="120px"><p class="center" style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;text-align: center;margin: auto;display: block;"><b>Twitter</b></p></a>
</td>
<td colspan="1">
<a href="http://www.facebook.com/classdojo" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://static.classdojo.com/img/page_share/mojo-fb.png" width="120px"><p class="center" style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;text-align: center;margin: auto;display: block;"><b>Facebook</b></p></a>
</td>
<td colspan="1">
<a href="http://www.pinterest.com/classdojo" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://static.classdojo.com/img/page_share/mojo-pinterest.png" width="120px"><p class="center" style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;text-align: center;margin: auto;display: block;"><b>Pinterest</b></p></a>
</td>
<td colspan="2">
<a href="https://plus.google.com/105152349849488862702" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://static.classdojo.com/img/page_share/mojo-google.png" width="120px"><p class="center" style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;text-align: center;margin: auto;display: block;"><b>Google+</b></p></a>
</td>
<br>
</tr>
<tr>
<td colspan="6">
<p style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;">Phew - if you made it this far, we're impressed! As a treat, visit this link (while your browser is logged into ClassDojo) to get ClassDojo VIP status:
<b><a href="http://teach.classdojo.com/#!/launchpad/vip" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;">http://teach.classdojo.com/#!/launchpad/vip</a></b>. Once you're a VIP you'll get access to all new features first!<br><br> As always, if there's ever anything we can do to help, just let us know :)</p>
<p style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;-webkit-margin-before: 1em;-webkit-margin-after: 0em;">Love,<br>
The ClassDojo Team
</p>
<br>
</td>
</tr>
</tbody>
</table>
<!-- end the content -->
<!-- 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;margin: auto;display: block;">
<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: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;">About ClassDojo</a>
•
<a href="http://www.classdojo.com/mission" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;">Our Mission</a>
•
<a href="http://teachersupport.classdojo.com" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;">Support</a>
•
<a href="%unsubscribe_url%" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;">Unsubscribe</a>
</td>
</tr>
<!-- end list of links -->
<!-- SPACER -->
<tr>
<td class="center" style="text-align: center;margin: auto;display: block;">
<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;margin: auto;display: block;">
<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 -->
</body>
</html>