dojo-templater
Version:
Easy HTML emails with variables
359 lines (301 loc) • 16.1 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; display: block}
</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 monthly newsletter where we'll share sneak peeks at new features, make special announcements, and bring you stories from other ClassDojo teachers. In this edition:
</p>
<ol>
<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>
We hope you enjoy it :)
</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 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 with 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 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>New Feature: 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" class="center">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> -->
</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>
<br/>
</td>
</tr>
<tr>
<td width='106px' style='height:100px;' 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>
</td>
<td width='250px' style='height:100px;' colspan='3'>
<a href='http://www.classdojo.com/stories/seyfert' style='float:left; height:60px' 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"><img src='http://c.classdojo.com/img/stories/wiggins/wiggins_photo_prof.jpg' class='header photo' style="margin-bottom:20px; height:100px; width: 100px"></a>
</td>
<td width='250px' style='height:100px;' colspan='3'>
<a href='http://www.classdojo.com/stories/wiggins' style='float:left; height:60px' 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"><img src='http://c.classdojo.com/img/stories/west/west_photo_prof.jpg' class='header photo' style="margin-bottom:20px; height:100px; width: 100px"></a>
</td>
<td width='250px' style='height:100px;' colspan='3'>
<a href='http://www.classdojo.com/stories/west' style='float:left; height:60px' target="_blank"><b>Angela West explains how 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"><img src='http://c.classdojo.com/img/stories/badiner/badiner_photo_prof.jpg' class='header photo' style='height:100px; width:100px' ></a>
</td>
<td width='250px' style='height:100px;' colspan='3'>
<a href='http://www.classdojo.com/stories/badiner' style='float:left; height:60px' target="_blank"><b>Jeremy Badiner tells 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">
<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 (while your browser is logged into ClassDojo) 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
</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>