foundation-emails
Version:
A framework for responsive emails
290 lines (285 loc) • 15.3 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="spacer float-center">
<tbody>
<tr>
<td height="16" style="font-size:16px;line-height:16px;"> </td>
</tr>
</tbody>
</table>
<table bgcolor="#8a8a8a" 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" valign="middle">
<table>
<tbody>
<tr>
<th>
<img src="http://placehold.it/200x50/663399">
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-6 large-6 columns last" valign="middle">
<table>
<tbody>
<tr>
<th>
<p class="text-right">Sidebar</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-7 columns first">
<table>
<tbody>
<tr>
<th>
<h2>Hello, Han Fastolfe</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nobis velit, aliquid pariatur at fugit. Omnis at quae, libero iusto quisquam animi blanditiis neque, alias minima corporis, ab in explicabo?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos voluptas minus, cupiditate voluptatem, voluptatum iste molestiae consectetur temporibus quae dolore nam possimus reprehenderit blanditiis laborum iusto sit. Perspiciatis, dolor.</p>
<table class="callout">
<tbody>
<tr>
<th class="callout-inner secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quas optio totam quidem, placeat sunt, sit iusto fugit. Harum omnis deleniti enim nihil iure, quis laudantium veniam velit animi debitis. <a href="#">Click It!</a>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus eius amet alias odit accusantium, fugit perspiciatis nulla suscipit nisi. Laborum aliquid, voluptatum consectetur fugiat maxime architecto enim molestias aperiam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eveniet veritatis, magnam ipsam et vero necessitatibus. Deserunt facilis impedit, adipisci illo laboriosam assumenda fugiat dolorum nam odio aliquid, sit est.</p>
<table class="button expand">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<center><a href="#" align="center" class="float-center">Click Me!</a></center>
</td>
</tr>
</tbody>
</table>
</td>
<td class="expander"></td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
<th class="sidebar small-12 large-5 columns last">
<table>
<tbody>
<tr>
<th>
<table class="callout">
<tbody>
<tr>
<th class="callout-inner secondary">
<h5>Header</h5>
<p class="lead">Sub-header</p>
<p><a href="#">Just a Plain Link »</a></p>
<p><a href="#">Just a Plain Link »</a></p>
<p><a href="#">Just a Plain Link »</a></p>
<p><a href="#">Just a Plain Link »</a></p>
<p><a href="#">Just a Plain Link »</a></p>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
<table class="callout">
<tbody>
<tr>
<th class="callout-inner secondary">
<h6>CONNECT WITH US:</h6>
<table class="button facebook expand">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<center><a href="#" align="center" class="float-center">Facebook</a></center>
</td>
</tr>
</tbody>
</table>
</td>
<td class="expander"></td>
</tr>
</tbody>
</table>
<table class="button twitter expand">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<center><a href="#" align="center" class="float-center">Twitter</a></center>
</td>
</tr>
</tbody>
</table>
</td>
<td class="expander"></td>
</tr>
</tbody>
</table>
<table class="button google expand">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<center><a href="#" align="center" class="float-center">Google+</a></center>
</td>
</tr>
</tbody>
</table>
</td>
<td class="expander"></td>
</tr>
</tbody>
</table>
<p>CONTACT INFO:</p>
<p>Phone: 408-341-0600</p>
<p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍ <table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tbody>
<tr>
<th>
<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>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>