foundation-emails
Version:
A framework for responsive emails
234 lines (229 loc) • 11.2 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">
<title>Title</title>
<link rel="stylesheet" href="../assets/css/foundation-emails.css">
</head>
<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<style type="text/css" align="center" class="float-center">
.header {
background: #8a8a8a;
}
.header .columns {
padding-bottom: 0;
}
.header p {
color: #fff;
margin-bottom: 0;
}
.header .wrapper-inner {
padding: 20px;
/*controls the height of the header*/
}
.header .container {
background: #8a8a8a;
}
.wrapper.secondary {
background: #f3f3f3;
}
</style>
<!-- move the above styles into your custom stylesheet -->
<table align="center" class="wrapper header float-center">
<tbody>
<tr>
<td class="wrapper-inner">
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row collapse">
<tbody>
<tr>
<th class="small-6 large-6 columns first">
<table>
<tbody>
<tr>
<th>
<img src="http://placehold.it/200x50/663399">
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-6 large-6 columns last">
<table>
<tbody>
<tr>
<th>
<p class="text-right">HERO</p>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" class="container float-center">
<tbody>
<tr>
<td>
<table class="spacer">
<tbody>
<tr>
<td height="16" style="font-size:16px;line-height:16px;"> </td>
</tr>
</tbody>
</table>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tbody>
<tr>
<th>
<h1>Hi, Elijah Baily</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
<img src="http://placehold.it/548x300" alt>
<table class="callout">
<tbody>
<tr>
<th class="callout-inner primary">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="#">Click it!</a></p>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
<h2>Title Ipsum <small>This is a note.</small></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repellat, harum. Quas nobis id aut, aspernatur, sequi tempora laborum corporis cum debitis, ullam, dolorem dolore quisquam aperiam! Accusantium, ullam, nesciunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus consequuntur commodi, aut sed, quas quam optio accusantium recusandae nesciunt, architecto veritatis. Voluptatibus sunt esse dolor ipsum voluptates, assumenda quisquam.</p>
<table class="button large secondary">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Click Me!</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍ <table class="wrapper secondary" align="center">
<tbody>
<tr>
<td class="wrapper-inner">
<table class="spacer">
<tbody>
<tr>
<td height="16" style="font-size:16px;line-height:16px;"> </td>
</tr>
</tbody>
</table>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-6 columns first">
<table>
<tbody>
<tr>
<th>
<h5>Connect With Us:</h5>
<table align="left" class="menu vertical">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th style="text-align: left;" class="menu-item float-center"><a href="#">Twitter</a></th>
<th style="text-align: left;" class="menu-item float-center"><a href="#">Facebook</a></th>
<th style="text-align: left;" class="menu-item float-center"><a href="#">Google +</a></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-6 columns last">
<table>
<tbody>
<tr>
<th>
<h5>Contact Info:</h5>
<p>Phone: 408-341-0600</p>
<p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</td>
</tr>
</tbody>
</table>
<center>
<table align="center" class="menu float-center">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th class="menu-item float-center"><a href="#">Terms</a></th>
<th class="menu-item float-center"><a href="#">Privacy</a></th>
<th class="menu-item float-center"><a href="#">Unsubscribe</a></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>