dojo-templater
Version:
Easy HTML emails with variables
171 lines (136 loc) • 6.86 kB
HTML
<html>
<head>
<!-- we'll process and inline styles before sending -->
</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" style="text-align: center;">
<a href="#" style="color: #00b4ff;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;"><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>
<tr>
<td style="width:50px;"></td>
<td>
<h1 class="center" style="margin: 25px auto 15px auto;font-weight: normal;font-size: 48px;font-family: "Georgia" serif;color: #4d4d4d;text-align: center;">Welcome to ClassDojo!</h1>
<p style="margin-top: 20px;font-family: "Lucida Grande", 'arial', sans-serif;line-height: 1.4em;font-size: 16px;">
Congratulations on joining ClassDojo!<br>
</p>
<h3 class="center" style="font-size: 28px;font-family: "Lucida Grande" serif;color: #4d4d4d;text-align: center;">Your username is: <b>USERNAME</b></h3>
<p style="margin-top: 20px;font-family: "Lucida Grande", 'arial', sans-serif;line-height: 1.4em;font-size: 16px;">
Log in at <b><a href="http://student.classdojo.com" style="color: #00b4ff;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">www.classdojo.com/student</a></b> now to see how you're doing - and to get your own avatar! </p>
</td>
<td style="width: 50px;"></td>
</tr>
<!-- 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;font-family: "Lucida Grande", arial, sans-serif;">
<span class="btn" style="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;">
Get started
</span>
</a>
</td>
<td style="width: 78px;"></td>
</tr>
</tbody>
</table>
</td>
<td style="width: 50px;"></td>
</tr>
<!-- HEADLINE AND TEXT -->
<tr>
<td style="width:50px;"></td>
<td>
<p style="margin-top: 35px;font-family: "Lucida Grande", 'arial', sans-serif;line-height: 1.4em;font-size: 16px;">
{{ content }}
</p>
</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" 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" style="color: #00b4ff;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">About ClassDojo</a>
•
<a href="http://www.classdojo.com/mission" style="color: #00b4ff;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">Our Mission</a>
•
<a href="{% unsubscribe_url %}" style="color: #00b4ff;text-decoration: none;font-family: "Lucida Grande", arial, sans-serif;">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;">
Sent with love from ClassDojo HQ at:<br>
322 Sixth Street, #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 -->
</tbody>
</table>
</body>
</html>