dojo-templater
Version:
Easy HTML emails with variables
381 lines (330 loc) • 17.9 kB
HTML
<html>
<head>
<!-- we'll process and inline styles before sending -->
<style>
h1 { font-size: 60px; font-family: "Georgia" serif ; line-height: 48px; font-weight: normal; color: #4d4d4d;}
h2 { font-size: 32px; font-family: "Georgia" serif ; line-height: 42px; font-weight: 100; color: #4d4d4d; text-align: center; }
h3 { font-size: 25px; font-family: "Georgia" serif ; line-height: 42px; font-weight: 100; color: #4d4d4d; text-align: center; }
ul { font-family: "Helvetica Neue", 'arial', sans-serif; line-height: 1.6em; font-size: 15px;}
ol { font-family: "Helvetica Neue", 'arial', sans-serif; line-height: 1.6em; font-size: 15px;}
.btn {
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;
color: white;
display:block;
font-weight: bold;
font-family: "Lucida Grande", arial, sans-serif;
display: block;
margin: auto;
background-position:center;
}
.photo {border: 4px solid white; box-shadow: 0px 2px 4px #ddd;}
.dashed {border: 1px dashed #ddd;}
.header { width:60%; margin: auto; display: block;}
a { color:#00b4ff; text-decoration:none; font-family: "Helvetica Neue", arial, sans-serif; }
p { font-family: "Helvetica Neue", 'arial', sans-serif; line-height: 1.6em; font-size: 15px; -webkit-margin-before: 1em; -webkit-margin-after: 0em;}
sup { font-size:20px;}
.center { text-align: center; margin:auto; }
</style>
<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'>
</td>
</tr>
<!-- END LOGO -->
<!-- SPACER -->
<tr>
<td class='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 style='margin:auto; padding: 0px 30px;'>
<tbody>
<!-- image -->
<tr>
<td colspan='6' >
<h1 class='center'> The Dojo Times </h1>
<hr>
</td>
</tr>
<tr>
<td colspan='6'>
<p class='center'>April 2013</p>
</td>
</tr>
<tr>
<td colspan='6'>
<p style='margin-top:20px'>
Welcome to the first-ever 'Dojo Times'! This is ClassDojo's action-packed newsletter, full of new features, sneak peeks at what's coming up, stories from teachers and special announcements. In this edition:
</p>
<ol>
<li>
Find out who won the <span style='font-weight:bold'>ClassDojo 2013 New Years' Resolution Contest!</span>
</li>
<li>
Get the new <span style='font-weight:bold'>free ClassDojo Android app</span>!
</li>
<li>
<span style='font-weight:bold'>Easily run class contests:</span> you can now reset individual students' ClassDojo scores!
</li>
<li>
<span style='font-weight:bold'>Send daily updates to parents</span> - with just one click
</li>
<li>
Engage your class with the<span style='font-weight:bold'> new ClassDojo timer</span>!
</li>
<li>
See how other teachers around the world are using ClassDojo
</li>
</ol>
<p>
We hope you love these new ClassDojo features as much as we love making them for you :) as ever, if there's anything we can do to help, just let us know.
</p>
<p>
Cheers,
</p>
<p style='margin-bottom:20px'>
The ClassDojo Team (insert logo / handwritten one?) XXX
</p>
<hr>
</td>
</tr>
<!-- image -->
<tr>
<td colspan='6'>
<h2 style='margin: 25px auto 5px auto;'>The ClassDojo Resolution Contest</h2>
<br>
<img src="http://c.classdojo.com/img/page_resolution/hero-nye.png" class='header'>
</td>
</tr>
<!-- text -->
<tr>
<td colspan='6'>
<p style='margin-top:20px'>
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 ways millions of teachers around the world are using ClassDojo to build positive behavior with their students, save time in class and engage their students.
<br />
<br />
Our 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"><img src='http://static.classdojo.com/img/stories/owen/blog1.jpg' width='80%' style='margin:auto; display: block'></a>
<p>
<b><a href='http://www.classdojo.com/stories/owen' target="_blank">Read our interview with Katie</a></b> to hear 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>A Beautiful ClassDojo Android App</h2>
<a href='http://www.classdojo.com/android' target="_blank"><img src='http://static.classdojo.com/img/email/email-android_release.png' class='header'></a>
<p>A lightning-fast, smooth, beautiful ClassDojo experience - now free for teachers, on Android! You can:
</p>
<ul>
<li>Award feedback from anywhere on your Android device</li>
<li>Easily award multiple students</li>
<li>Randomly select students, and make class more engaging</li>
</ul>
<b><a href='http://www.classdojo.com/android' target="_blank">Get the free ClassDojo Android app here now →</a></b></li>
<!--<a href='http://www.classdojo.com/android' style='color:white'>
<span class='btn'>
Get The App Now!
</span>
</a> -->
<hr>
<h2>Reset Individual ClassDojo Scores</h2>
<a href='http://youtu.be/uPnQKgzSfPs' target="_blank"><img src='http://static.classdojo.com/img/email/email-reset.jpg' class='header' style='margin-bottom:20px'></a>
<p>Want to run a class competition with ClassDojo? Redeem ClassDojo awards for special privileges? Reset students' ClassDojo scores when they reach a goal? Now you can :)
<ul>
<li>Reset any students' ClassDojo scores, right in class!</li>
<li>Reset students' points when they achieve goals</li>
<li>All your data is still saved in student reports!</li>
</ul>
<b><a href='http://www.youtube.com/watch?v=uPnQKgzSfPs' target="_blank">Learn more about resetting individual scores here →</a></b>
<hr>
<h2>Engage Parents with Daily Updates - with One Click!</h2>
<a href='http://youtu.be/a3ZWUjxSN4M' target="_blank"><img src='http://static.classdojo.com/img/parent-email.png' class='header'></a>
<p> 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>
<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://youtu.be/a3ZWUjxSN4M' target="_blank">Learn how to easily send parent updates here →</a></b> </li>
<!-- <a href='http://www.classdojo.com/android' style='color:white'>
<span class='btn'>
Get The App Now!
</span>
</a> -->
<hr>
<h2>The ClassDojo Timer</h2>
<a href='http://www.youtube.com/watch?v=52TdIMpyLDk' target="_blank"><img src='http://static.classdojo.com/img/email/email-timer.jpg' class='header'></a>
<p>You asked for it - so we built it! An easy-to-use timer for your classroom. Use it to:
</p>
<ul>
<li>Do timed classroom activities with ClassDojo</li>
<li>Count time spent on-task - or count down!</li>
<li>Time quizzes and group work while you use Classdojo</li>
</ul>
<p><b><a href='http://www.youtube.com/watch?v=52TdIMpyLDk' target="_blank">Learn more about the new ClassDojo timer here →</a></b> </p>
</td>
</tr>
<tr>
<td colspan='6'>
<hr>
<h2>Stories from ClassDojo teachers</h2>
<p> <b><a href='http://www.classdojo.com/stories' target="_blank">Our new stories page</a></b> highlights teachers who are using ClassDojo in their classroom in innovative ways. Read some here! </p>
</td>
</tr>
<tr>
<td width='106px' style='height:250px;' colspan='2'>
<a href='http://www.classdojo.com/stories/seyfert' target="_blank"><img src='http://c.classdojo.com/img/stories/seyfert/seyfert_photo_prof.jpg' class='header photo' style="margin-bottom:20px; height:100px; width: 100px"></a>
<a href='http://www.classdojo.com/stories/wiggins' target="_blank"><img src='http://c.classdojo.com/img/stories/wiggins/wiggins_photo_prof.jpg' class='header photo' style='height:100px; width:100px' ></a>
</td>
<td width='250px' style='height:250px;' colspan='2'>
<a href='http://www.classdojo.com/stories/seyfert' style='float:left; height:130px' target="_blank"><b>Troy Seyfert explains how he introduced ClassDojo to his class →</b></a>
<a href='http://www.classdojo.com/stories/wiggins' style='height:130px;' target="_blank"><b>Adrienne Wiggins shares how she set up a classroom rewards system using ClassDojo! →</b></a>
</td>
</tr>
<td colspan='6'>
<a href="http://www.classdojo.com/stories" class="btn" target="_blank">
<h4 style="text-align: center; margin: auto; margin-top:15px; padding: 0px 30px;">
Read More!
</h4>
</a>
</td>
<tr>
<td colspan='6'>
<p class='center'; style='margin-top:15px'> Want to be featured on the stories page? <b><a href="https://classdojo.wufoo.com/forms/classdojo-stories-page-signup/"> Let us know! </a></b></p>
<br/>
</td>
</tr>
<tr>
<td colspan='6'>
<hr>
<h2>Never miss another update!</h2>
<p>
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"><img src="http://static.classdojo.com/img/page_share/mojo-twitter.png" width='120px' ><p class='center'><b>Twitter</p></a>
</td>
<td colspan='1'>
<a href='http://www.facebook.com/classdojo' target="_blank"><img src="http://static.classdojo.com/img/page_share/mojo-fb.png" width='120px' ><p class='center'><b>Facebook</p></a>
</td>
<td colspan='1'>
<a href='http://www.pinterest.com/classdojo' target="_blank"><img src="http://static.classdojo.com/img/page_share/mojo-pinterest.png" width='120px' ><p class='center'><b>Pinterest</p></a>
</td>
<td colspan='2'>
<a href='https://plus.google.com/105152349849488862702' target="_blank"><img src="http://static.classdojo.com/img/page_share/mojo-google.png" width='120px' ><p class='center'><b>Google+</p></a>
</td>
<br/>
</tr>
<tr>
<td colspan='6'>
<p>Phew - if you made it this far, we're impressed! As a treat, visit this link to get ClassDojo VIP status:
<b><a href ="http://teach.classdojo.com/#!/launchpad/vip" target="_blank">http://teach.classdojo.com/#!/launchpad/vip</a></b>. As always, if there's ever anything we can do to help, just let us know :)</p>
<br>
<p>Love,<br>
The ClassDojo Team (XXX / add handwritten logo?)
</p>
<br/>
</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'>
<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">About ClassDojo</a>
•
<a href='http://www.classdojo.com/mission' target="_blank">Our Mission</a>
•
<a href='http://http://support.classdojo.com/knowledgebase' target="_blank">Support</a>
•
<a href="%unsubscribe_url%" target="_blank">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 class='center'>
<div style='height:20px'></div>
</td>
</tr>
<!-- end spacer -->
<!-- APP ICONS -->
<tr class='center'>
<td>
<a href='http://www.classdojo.com/ios' target="_blank"><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"><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 -->
</tbody>
</table>
</body>
</html>