dojo-templater
Version:
Easy HTML emails with variables
333 lines (282 loc) • 15.3 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 monthly newsletter where we'll share secrets: sneak peeks at new features, special announcements and stories from other ClassDojo teachers. In this edition:
</p>
<ol>
<li>
Find out who won the <span style='font-weight:bold'>ClassDojo Resolution Contest 2013</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: the ways thousands of teachers around the world are using ClassDojo to build positive behavior with their students, create 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://www.classdojo.com/midweekupdate' 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://www.classdojo.com/midweekupdate' 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> -->
</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="margin-bottom:20px; height:100px; width: 100px"></a>
<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>
<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: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>
<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>
<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 (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>