dojo-templater
Version:
Easy HTML emails with variables
174 lines (147 loc) • 17 kB
HTML
<!-- saved from url=(0061)file:///Users/Tim/Projects/classdojo/dojo-templater/test.html -->
<html xmlns="http://www.w3.org/1999/xhtml" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;"><head style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<title style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">ClassDojo for Students: free for iOS and Android!</title>
<!-- we'll process and inline styles before sending -->
<style style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
/* -------------------------------------------
PHONE
For clients that support media queries.
Nothing fancy.
-------------------------------------------- */
@media only screen and (max-width: 600px) {
ul li { margin-left: 10px; }
h1 {font-size: 48px; }
a[class="btn"] { display:block; margin-bottom:10px; background-image:none; margin-right:0;}
div[class="column"] { width: auto; float:none;}
table.social div[class="column"] { width:auto; }
.paper { padding: 10px; }
.btn-center {
width: auto;
padding: 0 10px;
}
.buffer-container { width: 100% ; }
}
</style>
</head>
<!-- make sure all images are moved to pstatic!-->
<body bgcolor="#faf9f9" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100%; height: 100%;">
<!-- HEADER -->
<table class="head-wrap" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;">
<tbody><tr style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<td class="header container" style="margin: 0 auto; padding: 0; font-family: Helvetica Neue, arial, sans-serif; display: block; max-width: 600px; clear: both;">
<div class="content" style="margin: 0 auto; padding: 15px; font-family: Helvetica Neue, arial, sans-serif; max-width: 520px; display: block;">
<table style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;">
<tbody><tr style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<td align="center" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;"><img src="http://pstatic.classdojo.com/img/emails/trigger-email-logo.png" width="300" alt="ClassDojo" style="margin: 0 auto; padding: 0; font-family: Helvetica Neue, arial, sans-serif; max-width: 100%; display: block;"></td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody></table>
<br style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<!-- End HEADER -->
<!-- BODY -->
<table class="body-wrap" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;">
<tbody><tr style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<td style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;"></td>
<td bgcolor="#faf9f9" class="container" style="margin: 0 auto; padding: 0; font-family: Helvetica Neue, arial, sans-serif; display: block; max-width: 600px; clear: both;">
<div class="content paper" style="margin: 0 auto; padding: 40px; font-family: Helvetica Neue, arial, sans-serif; max-width: 520px; display: block; background-color: #ffffff; -webkit-box-shadow: 0px 0px 5px 2px #e0e0e0; box-shadow: 0px 0px 5px 2px #e0e0e0;">
<!-- THE CONTENT-->
<table class="body-wrap clear" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%; display: block; clear: both;">
<tbody><tr style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<td style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<h2 style="margin: 0; padding: 0; font-family: Georgia, Lucida Grande, serif; font-weight: 200; text-align: center; line-height: 1.1; margin-bottom: 10px; color: #222; font-size: 37px;">ClassDojo for Students: free for iOS and Android!</h2>
<img src="http://static.classdojo.com/img/email/email-parent-top.png" style="margin: 0 auto; padding: 0; font-family: Helvetica Neue, arial, sans-serif; max-width: 100%; display: block;">
<p class="lead" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 17px; line-height: 1.6;">That's right: ClassDojo for Students has launched for your child's Apple and Android devices! Get it for free for your child in the <a href="http://www.classdojo.com/iosapp" target='_blank' style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; color: #00b4ff; font-weight: bold; text-decoration: underline;">Apple App Store</a> or <a href="http://www.classdojo.com/androidapp" target='_blank' style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; color: #00b4ff; font-weight: bold; text-decoration: underline;">Google Play</a>.</p>
</td>
</tr>
</tbody></table>
<br style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<table class="body-wrap clear" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%; display: block; clear: both;">
<tbody><tr style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<td style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<img src="http://static.classdojo.com/img/email/email-parent-ios.png" style="margin: 0 auto; padding: 0; font-family: Helvetica Neue, arial, sans-serif; max-width: 100%; display: block;">
</td>
<td style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<img src="http://static.classdojo.com/img/email/email-parent-android.png" style="margin: 0 auto; padding: 0; font-family: Helvetica Neue, arial, sans-serif; max-width: 100%; display: block;">
</td>
</tr>
</tbody></table>
<!-- Left buffer, ensures button centering in nice clients -->
<div class="buffer-two" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; width: 50px; height: 1px; display: table-cell; float: left;"> </div>
<div class="buffer-two-container" style="margin: 10px 0 30px 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; width: 150px; display: table-cell; float: left;">
<table border="0" class="body-wrap" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;">
<tbody><tr style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<!-- Left button cap -->
<td class="btn-left" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; background-repeat: no-repeat; width: 5px; height: 64px; background-image: url(http://c.classdojo.com/img/email/btn-bg-left.gif);"></td>
<!-- Fluid, stretching center button section -->
<td width="110px" bgcolor="#FEA302" class="btn-center-two" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; font-size: 28px; font-weight: bold; text-shadow: 0px -1px 2px #999999; color: white; vertical-align: middle; text-align: center; height: 64px; width: 140px; background-color: #FEA302; background-image: url(http://c.classdojo.com/img/email/btn-bg-mid.gif); background-repeat: repeat-x; border: 0;"><a href="http://www.classdojo.com/iosapp" target='_blank' class="call-to-action" style="margin: 0; padding: 15px 0; font-family: Helvetica Neue, arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none; display: block; width: 100%; height: 34px;">iOS</a></td>
<!-- Right button cap -->
<td class="btn-right" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; background-repeat: no-repeat; width: 5px; height: 64px; background-image: url(http://c.classdojo.com/img/email/btn-bg-right.gif);"></td>
</tr>
</tbody></table>
</div>
<!-- Mid buffer, ensures button centering in nice clients -->
<div class="buffer-two-mid" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; width: 120px; height: 1px; display: table-cell; float: left;"> </div>
<div class="buffer-two-container" style="margin: 10px 0 30px 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; width: 150px; display: table-cell; float: left;">
<table border="0" class="body-wrap" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;">
<tbody><tr style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<!-- Left button cap -->
<td class="btn-left" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; background-repeat: no-repeat; width: 5px; height: 64px; background-image: url(http://c.classdojo.com/img/email/btn-bg-left.gif);"></td>
<!-- Fluid, stretching center button section -->
<td width="110px" bgcolor="#FEA302" class="btn-center-two" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; font-size: 28px; font-weight: bold; text-shadow: 0px -1px 2px #999999; color: white; vertical-align: middle; text-align: center; height: 64px; width: 140px; background-color: #FEA302; background-image: url(http://c.classdojo.com/img/email/btn-bg-mid.gif); background-repeat: repeat-x; border: 0;"><a href="http://www.classdojo.com/androidapp" target='_blank' class="call-to-action" style="margin: 0; padding: 15px 0; font-family: Helvetica Neue, arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none; display: block; width: 100%; height: 34px;">Android</a></td>
<!-- Right button cap -->
<td class="btn-right" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; background-repeat: no-repeat; width: 5px; height: 64px; background-image: url(http://c.classdojo.com/img/email/btn-bg-right.gif);"></td>
</tr>
</tbody></table>
</div>
<!-- Right buffer, ensures button centering in nice clients -->
<div class="buffer-two" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; width: 50px; height: 1px; display: table-cell; float: left;"> </div><br class="clear" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; display: block; clear: both;">
<table class="body-wrap clear" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%; display: block; clear: both;">
<tbody><tr style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<td style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<!-- <h3>Title Ipsum <small>This is a note.</small></h3> -->
<p style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 16px; line-height: 1.6;">What can your child do with the app?</p>
<ul style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 16px; line-height: 1.6;">
<li style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; margin-left: 30px; list-style-position: inside;">View weekly updates from their teacher</li>
<li style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; margin-left: 30px; list-style-position: inside;">Build a fun avatar that shows up in class</li>
<li style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; margin-left: 30px; list-style-position: inside;">Spot trends, set goals, and more!</li>
</ul>
<p style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 16px; line-height: 1.6;">As always, if there's anything we can do to help, just let us know. :)</p>
<p style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 16px; line-height: 1.6;"></p>Cheers,<br style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">The ClassDojo team
</td>
</tr>
</tbody></table>
<!-- END THE CONTENT-->
</div>
</td>
<td style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;"></td>
</tr>
</tbody></table>
<!-- End BODY -->
<!-- FOOTER -->
<table class="footer-wrap" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%; clear: both;">
<tbody><tr style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<td colspan="3" class="container" style="margin: 0 auto; padding: 0; font-family: Helvetica Neue, arial, sans-serif; display: block; max-width: 600px; clear: both;">
<!-- content -->
<div class="content" style="margin: 0 auto; padding: 15px; font-family: Helvetica Neue, arial, sans-serif; max-width: 520px; display: block;">
<table style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;">
<tbody><tr style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<td align="center" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<p class="footer" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 14px; line-height: 1.6; text-decoration: none; margin-top: 30px;"><a href="http://www.classdojo.com/about" target='_blank' style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; color: #999; font-weight: normal; text-decoration: underline;">About ClassDojo</a><span class="dot" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; text-align: center; color: #ccc;"> • </span><a href="http://www.classdojo.com/mission" target='_blank' style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; color: #999; font-weight: normal; text-decoration: underline;">Our Mission</a><span class="dot" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; text-align: center; color: #ccc;"> • </span><a href="http://studentsupport.classdojo.com/" target="_blank" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; color: #999; font-weight: normal; text-decoration: underline;">Support</a><span class="dot" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; text-align: center; color: #ccc;"> • </span><a href="file:///Users/Tim/Projects/classdojo/dojo-templater/%unsubscribe_url%" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; color: #999; font-weight: normal; text-decoration: underline;">Unsubscribe</a></p>
</td>
</tr>
<tr style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">
<td align="center" class="signout" style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif; text-align: center; font-size: 12px; color: #777;">Sent with love from ClassDojo HQ at:<br style="margin: 0; padding: 0; font-family: Helvetica Neue, arial, sans-serif;">322 Sixth Street • Suite 6 • San Francisco, CA 94103</td>
</tr>
</tbody></table>
</div>
<!-- End content -->
</td>
</tr>
</tbody></table>
<!-- End FOOTER -->
</body></html>