foundation-emails
Version:
A framework for responsive emails
264 lines • 13.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">
body,
html,
.body {
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 align="center" class="container float-center">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-4 columns first">
<table>
<tbody>
<tr>
<th>
<center>
<img src="http://placehold.it/125x200" align="center" class="float-center">
</center>
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-8 columns last">
<table>
<tbody>
<tr>
<th>
<h1>Do Something Radical With This App.</h1>
<table class="button large">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Sign Up</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍ <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>
<h3 class="text-center">It's Never Been Easier to Do Things.</h3>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur pariatur unde magni repudiandae totam, accusamus facere eligendi. Ad nobis eius porro saepe et ab, aliquid, sed mollitia cumque suscipit aperiam.</p>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍ <table class="row">
<tbody>
<tr>
<th class="small-12 large-4 columns first">
<table>
<tbody>
<tr>
<th>
<center>
<img src="http://placehold.it/50x50" align="center" class="float-center">
</center>
<h5 class="text-center">Feature One</h5>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tbody>
<tr>
<th>
<center>
<img src="http://placehold.it/50x50" align="center" class="float-center">
</center>
<h5 class="text-center">Feature Two</h5>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-4 columns last">
<table>
<tbody>
<tr>
<th>
<center>
<img src="http://placehold.it/50x50" align="center" class="float-center">
</center>
<h5 class="text-center">Feature Three</h5>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍ <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>
<h3 class="text-center">What Are You Waiting For? Get Started Today.</h3>
<table class="spacer">
<tbody>
<tr>
<td height="16" style="font-size:16px;line-height:16px;"> </td>
</tr>
</tbody>
</table>
<table class="button large expand">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<center><a href="#" align="center" class="float-center">Sign Up</a></center>
</td>
</tr>
</tbody>
</table>
</td>
<td class="expander"></td>
</tr>
</tbody>
</table>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍ <table class="row collapsed footer">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tbody>
<tr>
<th>
<table class="spacer">
<tbody>
<tr>
<td height="16" style="font-size:16px;line-height:16px;"> </td>
</tr>
</tbody>
</table>
<p class="text-center">@copywrite nobody<br>
<a href="#">hello@nocopywrite.com</a> | <a href="#">Manage Email Notifications</a> | <a href="#">Unsubscribe</a></p>
<center>
<table align="center" class="menu float-center">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th class="menu-item float-center"><a href="undefined"><img src="http://placehold.it/25" alt></a></th>
<th class="menu-item float-center"><a href="undefined"><img src="http://placehold.it/25" alt></a></th>
<th class="menu-item float-center"><a href="undefined"><img src="http://placehold.it/25" alt></a></th>
<th class="menu-item float-center"><a href="undefined"><img src="http://placehold.it/25" alt></a></th>
<th class="menu-item float-center"><a href="undefined"><img src="http://placehold.it/25" alt></a></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍ <table class="spacer">
<tbody>
<tr>
<td height="16" style="font-size:16px;line-height:16px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>