dojo-templater
Version:
Easy HTML emails with variables
327 lines (264 loc) • 22.4 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 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>
<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;">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;">
Welcome to June's 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>
Join the <span style="font-weight:bold">ClassDojo Translation Team!</span>
</li>
<li>
Students use ClassDojo to <span style="font-weight:bold">celebrate anti-bullying week!</span>
</li>
<li>
<span style="font-weight:bold">Get cool PD materials</span> for this summer!
</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;">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://a2.ec-images.myspacecdn.com/images01/128/91c1585b0fc57ffb58c7f94547b70f5f/l.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;">Are you multilingual? We'd love your help making ClassDojo available in the native language of teachers, parents, and students all over the world. Together we can help build positive learning habits world-wide! :)</p>
<br />
<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;">Join the ClassDojo Translation Team here →</a></b>
</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;">Students Celebrate Anti-Bullying Week</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://fc06.deviantart.net/fs15/f/2007/013/0/e/pink_monsters_are_cute_by_elyoo.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 about how students James Fulton's class at Highland Creek Public School used their student accounts to celebrate anti-bullying week!
</p>
<br />
<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;">Read their inspiring story 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;">Get free 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, 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;">Get your free PD materials 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 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/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;" target="_blank"><b>Sarah Savage explains 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;" target="_blank"><b>James Gorcesky shares how he uses ClassDojo to save time →</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;" target="_blank"><b>Jake Claderwood 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;" target="_blank"><b>Chynell Sanders shares how she uses ClassDojo to help with classroom organization →</b></a>
</td>
</tr>
<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" /></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 class="center" style="text-align: center;margin: auto;display: block;">
<td>
<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>