dojo-templater
Version:
Easy HTML emails with variables
310 lines (252 loc) • 21.9 kB
HTML
<html>
<head>
<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 colspan="6" 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 style='border: 0px; border-top: 1px solid rgb(201, 201, 201);'>
</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;">June 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;">
June is here - and so is your Dojo Times! ClassDojo's monthly newsletter is packed with sneak peeks, special announcements, and stories from other ClassDojo teachers. This month, we bring you:
</p>
<ol style="font-family: "Helvetica Neue", 'arial', sans-serif;line-height: 1.6em;font-size: 15px;">
<li>
The chance to join the <span style="font-weight:bold">ClassDojo Translation Team!</span>
</li>
<li>
How students are using ClassDojo student accounts to <span style="font-weight:bold">stamp out bullying</span>
</li>
<li>
<span style="font-weight:bold">Beautiful new ClassDojo PD materials</span> for your summer PD sessions
</li>
<li>
Stories and examples from teachers around the world 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;">
Grab yourself a cup of coffee and enjoy :)
<br>
<br>
Love,
<br>
The ClassDojo Team
</p>
<br>
<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;">Join the ClassDojo Translation Team!</h2>
<br />
<a href="https://classdojo.wufoo.com/forms/join-the-classdojo-translation-team-/" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://static.classdojo.com/img/email/email-globe.jpg" 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;">Know any other languages? We'd love your help translating ClassDojo for teachers, parents, and students all over the world. Together we can build positive behaviors and learning habits worldwide! :)</p>
<br />
<b><a href="https://classdojo.wufoo.com/forms/join-the-classdojo-translation-team-/" target="_blank" class="center" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;text-align: center;margin: auto;display: block; font-size: 16px;">Join the ClassDojo Translation Team here →</a></b><br>
</td>
</tr>
<tr>
<td colspan="6">
<hr style='border: 0px; border-top: 1px solid rgb(201, 201, 201);'>
<h2 style="font-size: 32px;font-family: "Georgia" serif;line-height: 42px;font-weight: 100;color: #4d4d4d;text-align: center;">Students stamp out bullying:<br>Anti-Bullying Week with ClassDojo!</h2>
<a href="http://www.classdojo.com/stories/fulton2" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://static.classdojo.com/img/stories/fulton/blog1.jpg" 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;">Recently we were extremely touched to hear how James Fulton's class at Highland Creek Public School used their ClassDojo student accounts to stamp out bullying during anti-bullying week!
</p>
<br />
<b><a href="http://www.classdojo.com/stories/fulton2" target="_blank" class="center" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;text-align: center;margin: auto;display: block; font-size: 16px;">Read their inspiring story here →</a></b><br>
</td>
</tr>
<tr>
<td colspan="6">
<hr style='border: 0px; border-top: 1px solid rgb(201, 201, 201);'>
<h2 style="font-size: 32px;font-family: "Georgia" serif;line-height: 42px;font-weight: 100;color: #4d4d4d;text-align: center;">Get beautiful new PD materials</h2>
<a href="http://www.classdojo.com/share" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://static.classdojo.com/img/page_share/hero-share.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;">Getting ready for your summer professional development sessions? Here are presentations, handouts, videos, and more that you can use to introduce your friends to ClassDojo! :)
</p>
<br />
<b><a href="http://www.classdojo.com/share" target="_blank" class="center" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;text-align: center;margin: auto;display: block; font-size: 16px;">Get your free PD materials here! →</a></b><br>
</td>
</tr>
<tr>
<td colspan="6">
<hr style='border: 0px; border-top: 1px solid rgb(201, 201, 201);'>
<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 stories page</a></b> highlights teachers who write in to share how they are using ClassDojo in innovative ways. Here are just a few:</p>
<br />
</td>
</tr>
<tr>
<td width="106px" style="height:100px;" colspan="2">
<a href="http://www.classdojo.com/stories/savage" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://c.classdojo.com/img/stories/savage/savage_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/savage" style="float: left;height: 60px;color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif; font-size: 16px;" target="_blank"><b>Sarah Savage tells us how she uses ClassDojo to catch her students doing the right thing →</b></a>
</td>
</tr>
<tr>
<td width="106px" style="height:100px;" colspan="2">
<a href="http://www.classdojo.com/stories/gorcesky" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://c.classdojo.com/img/stories/gorcesky/gorcesky_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/gorcesky" style="float: left;height: 60px;color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif; font-size: 16px;" target="_blank"><b>James Gorcesky shares how he uses ClassDojo to save time in class, and after school →</b></a>
</td>
</tr>
<tr>
<td width="106px" style="height:100px;" colspan="2">
<a href="http://www.classdojo.com/stories/calderwood" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://c.classdojo.com/img/stories/calderwood/calderwood_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/calderwood" style="float: left;height: 60px;color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif; font-size: 16px;" target="_blank"><b>Jake Calderwood explains how he uses ClassDojo with 680 music students →</b></a>
</td>
</tr>
<tr>
<td width="106px" style="height:100px;" colspan="2">
<a href="http://www.classdojo.com/stories/sanders" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><img src="http://c.classdojo.com/img/stories/sanders/sanders_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/sanders" style="float: left;height: 60px;color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif; font-size: 16px;" target="_blank"><b>Chynell Sanders shares 4 ways she's using ClassDojo to help create a high-functioning classroom →</b></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;"><br>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; font-size: 16px;"> Let us know!</a></b></p>
<br />
</td>
</tr>
<tr>
<td colspan="6">
<hr style='border: 0px; border-top: 1px solid rgb(201, 201, 201);'>
<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" /></a><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;"><a href="http://www.twitter.com/classdojo" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><b>Twitter</b></a></p>
</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" /></a><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;"><a href="http://www.twitter.com/classdojo" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><b>Facebook</b></a></p>
</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" /></a><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;"><a href="http://www.twitter.com/classdojo" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><b>Pinterest</b></a></p>
</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" /></a><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;"><a href="http://www.twitter.com/classdojo" target="_blank" style="color: #00b4ff;text-decoration: none;font-family: "Helvetica Neue", arial, sans-serif;"><b>Google+</b></a></p>
</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;">Hope your summer is off to a terrific start :)</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>