foundation-emails
Version:
A framework for responsive emails
187 lines • 9.55 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="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>Thanks for your order.</h1>
<p>Thanks for shopping with us! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad earum ducimus, non, eveniet neque dolores voluptas architecto sed, voluptatibus aut dolorem odio. Cupiditate a recusandae, illum cum voluptatum modi nostrum.</p>
<table class="spacer">
<tbody>
<tr>
<td height="16" style="font-size:16px;line-height:16px;"> </td>
</tr>
</tbody>
</table>
<table class="callout">
<tbody>
<tr>
<th class="callout-inner secondary">
<table class="row">
<tbody>
<tr>
<th class="small-12 large-6 columns first">
<table>
<tbody>
<tr>
<th>
<p>
<strong>Payment Method</strong><br> Dubloons </p>
<p>
<strong>Email Address</strong><br> thecapn@pirates.org </p>
<p>
<strong>Order ID</strong><br> 239235983749636 </p>
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-6 columns last">
<table>
<tbody>
<tr>
<th>
<p>
<strong>Shipping Method</strong><br> Boat (1–2 weeks)<br>
<strong>Shipping Address</strong><br> Captain Price<br> 123 Maple Rd<br> Campbell, CA 95112 </p>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
<h4>Order Details</h4>
<table>
<tr>
<th>Item</th>
<th>#</th>
<th>Price</th>
</tr>
<tr>
<td>Ship's Cannon</td>
<td>2</td>
<td>$100</td>
</tr>
<tr>
<td>Ship's Cannon</td>
<td>2</td>
<td>$100</td>
</tr>
<tr>
<td>Ship's Cannon</td>
<td>2</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2"><b>Subtotal:</b></td>
<td>$600</td>
</tr>
</table>
<hr>
<h4>What's Next?</h4>
<p>Our carrier raven will prepare your order for delivery. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi necessitatibus itaque debitis laudantium doloribus quasi nostrum distinctio suscipit, magni soluta eius animi voluptatem qui velit eligendi quam praesentium provident culpa?</p>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍ <table class="row footer text-center">
<tbody>
<tr>
<th class="small-12 large-3 columns first">
<table>
<tbody>
<tr>
<th>
<img src="http://placehold.it/170x30" alt>
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-3 columns">
<table>
<tbody>
<tr>
<th>
<p> Call us at 800.555.1923<br> Email us at support@discount.boat </p>
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-3 columns last">
<table>
<tbody>
<tr>
<th>
<p> 123 Maple Rd<br> Campbell, CA 95112 </p>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>