dojo-templater
Version:
Easy HTML emails with variables
178 lines (145 loc) • 6.58 kB
HTML
<html>
<body style='font-size: 17px; font-family: "Lucida Grande", Arial, sans-serif; color: #4d4d4d; margin: 0; background: url(http://pstatic.classdojo.com/img/emails/bg-texture1.png); padding: 20px 0px ;'>
<style>
h1 { font-size: 48px; font-family: "Georgia" serif ; color: #4d4d4d;}
h2 { font-size: 18px; color: silver;}
a { color:#00b4ff; text-decoration:none; font-family: "Lucida Grande", arial, sans-serif; }
p { font-family: "Lucida Grande", 'arial', sans-serif; line-height: 1.4em; font-size: 16px;}
.center { text-align: center; }
</style>
<table style='width: 620px; margin:auto' cellspacing="0">
<tbody>
<!-- LOGO -->
<tr>
<td class='center' style= 'text-align: center'>
<a href="#"><img src="http://pstatic.classdojo.com/img/emails/trigger-email-logo.png" width="300" alt="ClassDojo"></a>
</td>
</tr>
<!-- END LOGO -->
<!-- SPACER -->
<tr>
<td class='center' style= 'text-align: 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>
<tbody>
<!-- HEADLINE AND TEXT -->
<tr>
<td style='width:50px;'></td>
<td>
<h1 class='center' style='margin: 25px auto 15px auto; font-weight:normal; display: none; text-align: center'>Welcome Back!</h1>
<p style='margin-top:15px'>
Hello - welcome back! Hope you've had a great break :)
<br>
<br>
Join thousands of teachers in Australia using ClassDojo to easily engage students and improve behavior - <a href="http://teach.classdojo.com/#!/launchpad/add"><b>click here to add your classes for 2013.</b></a> It takes less than 30 seconds!
<!-- THE BUTTON -->
<tr>
<td style='width:50px;'></td>
<td>
<table width='100%' style='margin-top: 15px;'>
<tbody>
<tr>
<td style='width:74px;'></td>
<td class='center' style= 'text-align: center'>
<a href='http://teach.classdojo.com/#!/launchpad/add' style='color:white; text-decoration: none'>
<span class='btn' style= "text-align: center; font-size: 24px; text-shadow: 0px -1px 2px #999999; background-color: orange; 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; text-decoration: none">
Add Your Class
</span>
</a>
</td>
<td style='width: 78px;'></td>
</tr>
</tbody>
</table>
</td>
<td style='width: 50px;'></td>
</tr>
</tbody>
</table>
<!-- end the content -->
<br>
<!-- THE MONSTERS -->
<table style='margin: auto'>
<tbody>
<tr>
<td colspan='3' class='center' style= 'text-align: center'>
<a href="http://teach.classdojo.com/#!/launchpad/add"><img src='http://static.classdojo.com/img/email/email-faces.jpg'/></a>
</td>
</tr>
</tbody>
</table>
<!-- end monsters -->
<!-- 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'>
<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' >How to use ClassDojo</a>
•
<a href='http://www.classdojo.com/privacy' >Privacy policy</a>
•
<a href='http://support.classdojo.com/knowledgebase' >Help</a>
•
<a href="{% unsubscribe_url %}">Unsubscribe</a>
</td>
</tr>
<!-- end list of links -->
<!-- SPACER -->
<tr>
<td class='center' style= 'text-align: 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;'>
322 6th Street • Suite 6 • San Francisco, CA 94103
</td>
</tr>
<!-- end of address -->
<!-- SPACER -->
<tr>
<td class='center' style= 'text-align: center'>
<div style='height:20px'></div>
</td>
</tr>
<!-- end spacer -->
<!-- APP STORE ICON -->
<tr>
<td class='center' style= 'text-align: center'>
<a href='http://classdojo.com/ios'><img src='http://pstatic.classdojo.com/img/emails/btn-app-store.png' /></a>
</td>
</tr>
<!-- end app store icon -->
</tbody>
</table>
</body>
</html>