dojo-templater
Version:
Easy HTML emails with variables
281 lines (241 loc) • 10.2 kB
HTML
<html>
<head>
<!-- we'll process and inline styles before sending -->
<style>
h1 { font-size: 48px; font-family: "Georgia" serif ; color: #4d4d4d;}
h2 { font-size: 18px; color: silver;}
.btn {
text-align: center;
font-size: 24px;
text-shadow: 0px -1px 2px #999999;
background: 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;
}
a { color:#165E8E; 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>
</head>
<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 ;'>
<table style='width: 620px; margin:auto' cellspacing="0">
<tbody>
<!-- LOGO -->
<tr>
<td class='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'>
<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;'>Next Steps!</h1>
<p style='margin-top:15px'>
{{ content }} Congratulations on getting your first class set up! Here are 3 quick steps you can take to ensure you're getting the most out of your ClassDojo experience.
</p>
</td>
<td style='width: 50px;'></td>
</tr>
<!-- STEP 1 -->
<tr>
<td style='width:50px;'></td>
<td>
<h1 class='center' style='margin: 25px auto 15px auto; font-weight:normal;'>Step 1</h1>
<p style='margin-top:5px'>
<center>Get the Android and Apple apps to give points from your phone or tablet</center>
</p>
</td>
<td style='width: 50px;'></td>
</tr>
<br>
<!-- APP STORE ICON -->
<tr>
<td style='width: 50px;'></td>
<td class='center'>
<a href='http://goo.gl/xqn30'><img src='http://pstatic.classdojo.com/img/emails/btn-app-store.png' /></a>
<a href='http://www.classdojo.com/android'><img src='http://developer.android.com/images/brand/en_generic_rgb_wo_60.png' style='width: 119px; margin-left:20px' /></a>
</td>
</tr>
<!-- STEP 2 -->
<tr>
<td style='width:50px;'></td>
<td>
<h1 class='center' style='margin: 25px auto 15px auto; font-weight:normal;'>Step 2</h1>
<p style='margin-top:5px'>
<center>Promote self-reflection and engagement by handing out students codes</center>
</p>
</td>
<td style='width: 50px;'></td>
</tr>
<!-- THE BUTTON -->
<tr>
<td style='width:50px;'></td>
<td>
<table width='100%' style='margin-top: 5px;'>
<tbody>
<tr>
<td style='width:74px;'></td>
<td class='center'>
<a href='http://goo.gl/h0lxX' style='color:white'>
<span class='btn'>
Get Student Codes
</span>
</a>
</td>
<td style='width: 78px;'></td>
</tr>
</tbody>
</table>
</td>
<td style='width: 50px;'></td>
</tr>
<!-- STEP 3 -->
<tr>
<td style='width:50px;'></td>
<td>
<h1 class='center' style='margin: 25px auto 15px auto; font-weight:normal;'>Step 3</h1>
<p style='margin-top:5px'>
<center>Build stronger connections home by setting up parent reports</center>
</p>
</td>
<td style='width: 50px;'></td>
</tr>
<!-- THE BUTTON -->
<tr>
<td style='width:50px;'></td>
<td>
<table width='100%' style='margin-top: 5px;'>
<tbody>
<tr>
<td style='width:74px;'></td>
<td class='center'>
<a href='http://goo.gl/4E1CV' style='color:white'>
<span class='btn'>
Invite by Parent Code
</span>
</a>
</td>
<td style='width: 78px;'></td>
</tr>
</tbody>
</table>
</td>
<td style='width: 50px;'></td>
</tr>
<!-- THE BUTTON -->
<tr>
<td style='width:50px;'></td>
<td>
<table width='100%' style='margin-top: 5px;'>
<tbody>
<tr>
<td style='width:74px;'></td>
<td class='center'>
<a href='http://goo.gl/2zy5i' style='color:white'>
<span class='btn'>
Invite by Email
</span>
</a>
</td>
<td style='width: 78px;'></td>
</tr>
</tbody>
</table>
</td>
<td style='width: 50px;'></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' >About ClassDojo</a>
•
<a href='http://www.classdojo.com/mission' >Our Mission</a>
•
<a href='http://teachersupport.classdojo.com' >Support</a>
•
<a href="{% unsubscribe_url %}">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'><img src='http://pstatic.classdojo.com/img/emails/btn-app-store.png' style='margin-right:20px' /></a>
<a href='http://www.classdojo.com/android'><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>