dojo-templater
Version:
Easy HTML emails with variables
464 lines (388 loc) • 11.2 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ClassDojo Email Template</title>
<link rel="stylesheet" type="text/css" href="./stylesheets/email.css" />
<!-- we'll process and inline styles before sending -->
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family: "Helvetica Neue", arial, sans-serif; }
img {
max-width: 100%;
display: block;
margin: 0 auto;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%;
height: 100%;
}
table {
border-collapse: separate;
border-spacing: 0;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #00b4ff;
font-weight: bold;
text-decoration: underline;
}
.nounderline {
text-decoration: none;
}
.footer-wrap a {
color: #999;
font-weight: normal;
}
/*
.btn {
text-decoration:none;
color: #FFF;
background-color: #666;
padding:10px 16px;
font-weight:bold;
margin-right:10px;
text-align:center;
cursor:pointer;
display: inline-block;
}*/
p.callout {
padding:15px;
background-color:#ECF8FF;
margin-bottom: 15px;
}
.callout a {
font-weight:bold;
color: #2BA6CB;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size:12px;
margin-bottom:10px;
text-decoration:none;
color: #FFF;font-weight:bold;
display:block;
text-align:center;
}
a.fb { background-color: #3B5998; }
a.tw { background-color: #1daced; }
a.gp { background-color: #DB4A39; }
a.ms { background-color: #000; }
.sidebar .soc-btn {
display:block;
width:100%;
}
/* -------------------------------------
HEADER
------------------------------------- */
table.head-wrap { width: 100%;}
.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap { width: 100%;}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap { width: 100%; clear:both;
}
.footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}
.footer-wrap .container td.content p {
font-size:10px;
font-weight: bold;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-family: Georgia, "Lucida Grande", serif;
font-weight: bold;
text-align: center;
/*vertical-align: middle;*/
line-height: 1.1;
margin-bottom:15px;
color:#222;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
h1 { font-weight:200; font-size: 52px;}
h2 { font-weight:200; font-size: 37px;}
h3 { font-weight:500; font-size: 27px;}
h4 { font-weight:500; font-size: 23px;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}
.collapse { margin:0;}
p, ul {
margin-bottom: 10px;
font-weight: normal;
font-size:16px;
line-height:1.6 ;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}
ul li {
margin-left:30px;
list-style-position: inside;
}
/* -------------------------------------
SIDEBAR
------------------------------------- */
ul.sidebar {
background:#ebebeb;
display:block;
list-style-type: none;
}
ul.sidebar li { display: block; margin:0;}
ul.sidebar li a {
text-decoration:none;
color: #666;
padding:10px 16px;
/* font-weight:bold; */
margin-right:10px;
/* text-align:center; */
cursor:pointer;
border-bottom: 1px solid #777777;
border-top: 1px solid #FFFFFF;
display:block;
margin:0;
}
ul.sidebar li a.last { border-bottom-width:0px;}
ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0;}
/* ---------------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display:block;
max-width:600px;
margin:0 auto; /* makes it centered */
clear:both;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
padding:15px;
max-width:600px;
margin:0 auto;
display:block;
}
.paper {
padding: 40px;
/* Exprimental CSS3 box shadow shit here */
-webkit-box-shadow: 0px 0px 5px 2px #e0e0e0;
box-shadow: 0px 0px 5px 2px #e0e0e0;
}
/* Let's make sure tables in the content area are 100% wide */
.content table { width: 100%; }
/* Odds and ends */
.column {
width: 300px;
float:left;
}
.column tr td { padding: 15px; }
.column-wrap {
padding:0;
margin:0 auto;
max-width:600px;
}
.column table { width:100%;}
.social .column {
width: 280px;
min-width: 279px;
float:left;
}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }
/* ---------------------------------------------------------
CLASSDOJO
Custom styling stuff to fit the CD existing template
It might break.
--------------------------------------------------------- */
.btn-left, .btn-right {
background-repeat: no-repeat;
width: 5px;
height: 64px;
}
.btn-left { background-image: url(http://neutyp.com/staging/classdojo/images/btn-bg-left.gif); }
.btn-right { background-image: url(http://neutyp.com/staging/classdojo/images/btn-bg-right.gif); }
.btn-center {
font-size: 28px;
font-weight: bold;
text-shadow: 0px -1px 2px #999999;
color: white;
vertical-align: middle;
text-align: center;
height: 64px;
width: 260px; /* 10px less than buffer-container */
/*text-decoration: underline;*/
background-color: #FEA302;
background-image: url(http://neutyp.com/staging/classdojo/images/btn-bg-mid.gif);
background-repeat: repeat-x;
border: 0;
margin: 0;
}
.buffer-container {
/* Hard width is not fluid… BUT IT WORKS */
width: 300px;
display: table-cell;
float: left;
margin: 30px 0;
}
.buffer {
width: 110px;
height: 1px;
display: table-cell;
float: left;
}
a.call-to-action, a.call-to-action:link, a.call-to-action:visited, a.call-to-action:hover, a.call-to-action:active {
display: block;
width: 100%;
height: 34px;
padding: 15px 0;
/* color: #00b4ff; */
color: #ffffff ;
text-decoration:none;
}
p {
line-height: 1.4em;
font-size: 16px;
}
.dot {
/*font-size: 24px;*/
text-align:center;
color: #ccc;
}
.footer {
text-decoration: none;
font-size: 14px;
margin-top: 30px;
}
.signout {
text-align: center;
font-size: 12px;
color: #777;
}
</style>
</head>
<body bgcolor="#faf9f9">
<!-- HEADER -->
<table class="head-wrap">
<tr>
<td class="header container">
<div class="content">
<table>
<tr>
<td align="center"><img src="http://pstatic.classdojo.com/img/emails/trigger-email-logo.png" width="300" alt="ClassDojo"></img></td>
</tr>
</table>
</div>
</td>
</tr>
</table><!-- /HEADER -->
<!-- BODY -->
<table class="body-wrap">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<div class="content paper">
<table class="body-wrap clear">
<tr>
<td>
<h1>30-Second Video Contest<br>
</h1></td>
</tr>
</table>
<p><a href="http://www.classdojo.com/30secondvideocontest" target="_blank"><img src="http://static.classdojo.com/img/email/selfie.png" alt="Please allow images for this email"></img></a></p>
<table>
<tr>
<td height="450"><p>{{ first name }}, hey!
<br>
<br>
Looking back on 2013, we’ve heard some really inspiring stories of teachers like you using ClassDojo to help their students be happy and successful, delight parents and make their classrooms better for learning. <br />
<br />
It’s your turn: we’d love to share your story! Can you send us a short video telling us how ClassDojo has improved your classroom, and why you love it? Please send a link to your video to <a href="mailto:contest@classdojo.com">contest@classdojo.com</a> by Dec 25, 2013 - or share it on Twitter, using <a href="https://twitter.com/search?q=%22%23classdojolove%22&src=typd" target="_blank">#ClassDojoLove</a> when posting! To say thank you, we’ll be sending ClassDojo t-shirts and DonorsChoose giftcards to our favorite entries :)<br />
<br />
For more details and an example video, please visit our contest page <a href="http://www.classdojo.com/classdojolove" target="_blank">here</a>.
Excited to see your videos :)</p></td>
</tr>
</table>
<!-- Left buffer, ensures button centering in nice clients -->
<div class="buffer"> </div>
<div class="buffer-container">
<table class="body-wrap" border="0">
<tr>
<!-- Left button cap -->
<td class="btn-left"></td>
<!-- Fluid, stretching center button section -->
<td class="btn-center" width="260px" bgcolor="#FEA302">
<a href="http://www.classdojo.com/classdojolove" target="_blank" class="call-to-action">Share your story →</a>
</td>
<!-- Right button cap -->
<td class="btn-right"></td>
</tr>
</table>
</div>
<!-- Right buffer, ensures button centering in nice clients -->
<div class="buffer"> </div>
<br class="clear">
<p>Cheers,<br />
Kalen & the ClassDojo Team</p>
</div>
</td>
<td></td>
</tr>
</table><!-- /BODY -->
<!-- FOOTER -->
<table class="footer-wrap">
<tr>
<td class="container" colspan="3">
<!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
<p class="footer">
<a href="http://www.classdojo.com/about" target="_blank">About ClassDojo</a>
<span class="dot"> • </span>
<a href="http://www.classdojo.com/mission" target="_blank">Our Mission</a>
<span class="dot"> • </span>
<a href="http://teachersupport.classdojo.com" target="_blank">Support</a>
<span class="dot"> • </span>
<a href="%unsubscribe_url%">Unsubscribe</a>
</p>
</td>
</tr>
<tr>
<td align="center" class="signout">
<br></br>
Sent with love from ClassDojo HQ at:<br></br>
322 Sixth Street • Suite 6 • San Francisco, CA 94103
</td>
</tr>
</table>
</div><!-- /content -->
</td>
</tr>
</table><!-- /FOOTER -->
</body>
</html>