dojo-templater
Version:
Easy HTML emails with variables
246 lines (205 loc) • 8.49 kB
HTML
<html>
<head>
<!-- we'll process and inline styles before sending -->
<style>
h1 { font-size: 38px; font-family: "Georgia" serif ; line-height: 38px; font-weight: normal; 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:#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;}
sup { font-size:20px;}
.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>
<tr>
<td style='width:50px;'></td>
<td>
<h1 class='center' style='margin: 25px auto 15px auto; font-weight:normal;'>The ClassDojo Android App: free in Google Play<sup>TM</sup> now!</h1>
</td>
<td style='width: 50px;'></td>
</tr>
<!-- image -->
<tr>
<td colspan='3' class='center'>
<a href="http://www.classdojo.com/android"><img src='http://static.classdojo.com/img/email/email-android_release.png'/></a>
</td>
</tr>
<!-- image -->
<!-- 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'>
<a href='http://www.classdojo.com/android' style='color:white'>
<span class='btn'>
Get The App Now!
</span>
</a>
</td>
<td style='width: 78px;'></td>
</tr>
</tbody>
</table>
</td>
<td style='width: 50px;'></td>
</tr>
<!-- text -->
<tr>
<td style='width:50px;'></td>
<td>
<p style='margin-top:20px'>
That's right: the ClassDojo Android app has launched for your Android phones and tablets! <b><a href="http://www.classdojo.com/android">Get it for free in Google Play</a></b>, or by going to <b><a href="http://www.classdojo.com/android">www.classdojo.com/android</a></b> now!
</p>
<p>
What's new with the app?
<ul>
<li>The fastest, smoothest ClassDojo experience</li>
<li>Award multiple students</li>
<li>Randomly select a student</li>
</ul>
</p>
<p>
As always, if there's anything we can do to help, just let us know.
</p>
<p>
Cheers,<br>The ClassDojo Team
</p>
</td>
<td style='width: 50px;'></td>
</tr>
<!-- THE BUTTON 2 -->
<tr>
<td style='width:50px;'></td>
<td>
<table width='100%' style='margin-top: 15px;'>
<tbody>
<tr>
<td style='width:74px;'></td>
<td class='center'>
<a href='http://www.classdojo.com/android' style='color:white'>
<span class='btn'>
Get The App Now!
</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://http://support.classdojo.com/knowledgebase' >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>