dojo-templater
Version:
Easy HTML emails with variables
261 lines (214 loc) • 9.56 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" href="../css/ink.css"> <!-- For testing only -->
<style>
</style>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<center>
<!-- header logo -->
<img src="../img/logo@2x.png" width="300px" height="99px" class="center logo">
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table class="container paper">
<tr>
<td class="padding">
<!-- content start -->
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<!-- main headline -->
<h2 class="serif center">Welcome, Daneel Olivan</h2>
<!-- sentence -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<br>
<!-- big image! -->
<img width="580" height="300" src="http://placehold.it/580x300">
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<br> <!-- Break Tag for row -->
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<!-- paragraph content -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <a href="">eiusmod tempor incididunt</a> ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
</td>
<td class="expander"></td> <!-- Used to fix columns on small screens -->
</tr>
</table>
</td>
</tr>
</table>
<!-- the big button 2.0 -->
<table class="row">
<tr>
<!-- empty left buffer -->
<td class="wrapper">
<table class="three columns">
<tr>
<td></td>
<td class="expander"></td> <!-- Used to fix columns on small screens -->
</tr>
</table>
</td>
<td class="wrapper">
<center>
<!-- to resize button, adjust number of columns here, and reduce accordingly for the left and right buffers -->
<table class="six columns center">
<tr>
<td>
<a class="button large-button radius" href="#">
<table>
<tr>
<td>
Share Video →
</td>
</tr>
</table>
</a>
</td>
<td class="expander"></td> <!-- Used to fix columns on small screens -->
</tr>
</table>
</center>
</td>
<!-- empty left buffer -->
<td class="wrapper last">
<table class="three columns">
<tr>
<td></td>
<td class="expander"></td> <!-- Used to fix columns on small screens -->
</tr>
</table>
</td>
</tr>
</table>
<br> <!-- Break Tag for row -->
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
</td>
<td class="expander"></td> <!-- Used to fix columns on small screens -->
</tr>
</table>
</td>
</tr>
</table>
<!-- container end below -->
</td>
</tr>
</table>
<br>
<table class="container">
<tr>
<td>
<!-- Legal + Unsubscribe -->
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td align="center">
<center>
<p class="center footer"><a href="#">About ClassDojo</a> • <a href="#">Our Mission</a> • <a href="#">Support</a> • <a href="#"><unsubscribe>Unsubscribe</unsubscribe></a></p>
</center>
</td>
<td class="expander"></td> <!-- Used to fix columns on small screens -->
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td align="center">
<center>
<p class="center signout">
Sent with love from ClassDojo HQ at:
<br> 322 Sixth Street • Suite 6 • San Francisco, CA 94103
</p>
</center>
</td>
<td class="expander"></td> <!-- Used to fix columns on small screens -->
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper">
<table class="six columns">
<tr>
<td>
<a href=""><img src="../img/applestore.png" style="float: right"></a>
</td>
<td class="expander"></td> <!-- Used to fix columns on small screens -->
</tr>
</table>
</td>
<td class="wrapper last">
<table class="six columns">
<tr>
<td>
<a href=""><img src="../img/googleplay.png" style="float: left"></a>
</td>
<td class="expander"></td> <!-- Used to fix columns on small screens -->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>