dojo-templater
Version:
Easy HTML emails with variables
204 lines (167 loc) • 6.79 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://static.classdojo.com/img/email/email-dld_classdojo.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; display: none'>A gift for you on Digital Learning Day :)</h1>
<p style='margin-top:15px'>
Digital Learning Day (that's today!) honors educators like you who use technology like ClassDojo to improve students' lives.
<br>
<br>
To say 'thank you!' to you on Digital Learning Day, we're giving you a new feature: connecting to your school in ClassDojo. <b><a href="http://teach.classdojo.com/#!/school/search">Check it out now</a></b> - we hope you love it :)
<br>
<br>
</p>
</td>
<td style='width: 50px;'></td>
</tr>
<!-- THE MONSTERS -->
<tr>
<td style='width: 50px;'></td>
<td class='center'>
<a href='http://teach.classdojo.com/#!/school/search'><img src='http://static.classdojo.com/img/email/email-addschool.jpg' /></a>
</td>
</tr>
<!-- end monsters -->
<!-- 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://teach.classdojo.com/#!/school/search' style='color:white'>
<span class='btn'>
Connect to your school!
</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' >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'>
<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 ClassDojoHQ:<br>
322 6th 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 STORE ICON -->
<tr>
<td class='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>