foundation-emails
Version:
A framework for responsive emails
198 lines (193 loc) • 9.44 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 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">BASIC</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, Susan Calvin</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio nulla et, fugiat. Maiores accusantium nostrum asperiores provident, quam modi ex inventore dolores id aspernatur architecto odio minima perferendis, explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos quasi itaque beatae natus fugit provident delectus, magnam laudantium odio corrupti sit quam. Optio aut ut repudiandae velit distinctio asperiores?</p>
<table class="callout">
<tbody>
<tr>
<th class="callout-inner primary">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellendus natus, sint ea optio dignissimos asperiores inventore a molestiae dolorum placeat repellat excepturi mollitia ducimus unde doloremque ad, alias eos!</p>
</th>
<th class="expander"></th>
</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 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>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>