dojo-templater
Version:
Easy HTML emails with variables
377 lines (300 loc) • 12.6 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" type="text/css" href="ink.css">
<link rel="stylesheet" type="text/css" href="custom.css">
<style>
/* REPONSIVE FOR MOBILE */
@media only screen and (max-width: 600px) {
img#logo {
width: 150px ;
height: 49px ;
}
table[class="body"] .container {
width: 100% ;
}
table[class="body"] table.twelve.columns {
margin: 0;
width: 95% ;
}
table[class="body"] .text-pad {
padding-left: 10px;
padding-right: 10px;
}
table[class="body"] .right-text-pad {
padding-left: 10px ;
}
table[class="body"] .left-text-pad {
padding-right: 10px ;
}
}
/* END REPONSIVE FOR MOBILE */
</style>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top" bgcolor="#f0f0f0">
<center>
<table class="row header">
<tr>
<td class="center" align="center">
<center>
<table class="container">
<tr>
<td class="wrapper last">
<center>
<table class="twelve columns">
<tr>
<td class="twelve columns">
<img class="center" id="logo" src="http://pstatic.classdojo.com/img/emails/trigger-email-logo.png" width="150px" height="49px">
</td>
<td class="expander"></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="container" id="paper" bgcolor="#ffffff">
<tr>
<td class="paper-padding">
<!-- content start -->
<table class="row">
<tr>
<td class="wrapper last">
<center>
<table class="twelve columns">
<tr>
<td class="text-pad">
<h2>Join your school on ClassDojo</h2>
<!-- <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p> -->
<br />
<img width="500px" height="353px" class="center" src="http://static.classdojo.com/img/join_school/join_school3.png">
</td>
<td class="expander"></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<center>
<table class="twelve columns">
<tr>
<td class="text-pad">
<!-- <h5>Ut enim ad minim veniam</h5> -->
<!-- <small>This is a note.</small> -->
<p class="lead">Tim, hey! We noticed you haven't joined your school yet. We’ve been hard at work on some exciting new <a href="#">features for you</a> - and you'll need to join your school to get them...</p>
</td>
<td class="expander"></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<center>
<table class="twelve columns">
<tr>
<td>
<center>
<!-- REMEMBER TO UPDATE THIS MSO VERSION WITH THE LINK AND TEXT OF YOUR CTA -->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://classdojo.com" style="height: 60px; width: 300px; v-text-anchor: middle;" arcsize="7%" strokecolor="#fcb030" fill="t">
<v:fill type="tile" src="http://c.classdojo.com/img/email/template3/orange-btn-reg.png" color="#fcb030" />
<w:anchorlock/>
<center style="color: #ffffff; font-family: sans-serif; font-size: 28px; font-weight: bold;">Join your school!</center>
</v:roundrect>
<![endif]-->
<a href="http://classdojo.com" id="orange-button">Join your school!</a>
</center>
</td>
<td class="expander"></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row callout">
<tr>
<td class="wrapper last">
<center>
<table class="twelve columns">
<tr>
<td class="text-pad">
<div class="panel">
<p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
</div>
</td>
<td class="expander"></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<center>
<table class="twelve columns">
<tr>
<td class="text-pad">
<p>
Cheers,<br />
The ClassDojo team
</p>
</td>
<td class="expander"></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<!-- container end below -->
</td>
</tr>
</table>
<table class="row footer-links">
<tr>
<td class="center" align="center">
<center>
<table class="container">
<tr>
<td class="wrapper last">
<table class="twelve columns links">
<tr>
<td align="center">
<center>
<p style="text-align: center; color: #787878;">
<a href="#">About ClassDojo</a> • <a href="#">Our mission</a> • <a href="#">Support</a> • <a href="#">Unsubscribe</a>
</p>
</center>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row footer-address">
<tr>
<td class="center" align="center">
<center>
<table class="container">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td align="center">
<center>
<p style="text-align: center; color: #787878;">
Sent with love from ClassDojo HQ at:<br />
735 Tehama Street • San Francisco, CA 94103
</p>
</center>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="center" align="center">
<center>
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper">
<table class="five columns">
<tr>
<td>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper">
<table class="three columns">
<tr>
<td>
<a href=""><img src="http://c.classdojo.com/img/email/template3/ios@2x.png" width="130px" height="40px" /></a>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper">
<table class="three columns">
<tr>
<td>
<a href=""><img src="http://c.classdojo.com/img/email/template3/android@2x.png" width="130px" height="40px" /></a>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="five columns">
<tr>
<td>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>