Skip to content

Instantly share code, notes, and snippets.

@jeremymoore

jeremymoore/email.html Secret

Created November 23, 2013 19:18
Show Gist options
  • Save jeremymoore/6c70f018383c153db05f to your computer and use it in GitHub Desktop.
Save jeremymoore/6c70f018383c153db05f to your computer and use it in GitHub Desktop.
Download ZIP
Email HTML
Raw
email.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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"/>
<link rel="stylesheet" href="ink-590-10.css"> <!-- For testing only, modified for 590px width and 10px horizontal column padding. -->
<style type="text/css">
</style>
<style type="text/css">
/* Remove the top and bottom padding */
/*.row.no-gutter td.wrapper, .row td.wrapper > table.columns td {*/
/*padding-top: 0;*/
/*padding-bottom: 0;*/
/*}*/
body, .body {
background: #ebebeb;
}
table.main-container {
background: #ffffff;
}
#banner-main {
background: #69be28;
min-height: 160px;
}
#aside {
background: #009fda;
}
</style>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<table class="main-container container">
<tr>
<td>
<!-- HEADER -->
<table class="row">
<tr>
<td class="wrapper">
<table id="header-main" class="eight columns">
<tr>
<td class="left-text-pad">
<div class="mktEditable" id="header-1">
<img src="http://placehold.it/300x150" width="250" height="100" alt="HealthMarkets" />
</div>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table id="header-aside" class="four columns">
<tr>
<td class="three sub-columns">
<a title="Facebook" href="https://www.facebook.com/HealthMarketsAgency"><img src="http://info.insphere.com/rs/megalife/images/facebook.png" alt="Facebook" /></a>
</td>
<td class="three sub-columns">
<a title="Twitter" href="https://twitter.com/HealthMarkets4U"><img src="http://info.insphere.com/rs/megalife/images/twitter.png" alt="Twitter" /></a>
</td>
<td class="three sub-columns">
<a title="LinkedIn" href="http://www.linkedin.com/company/healthmarkets-insurance-agency"><img src="http://info.insphere.com/rs/megalife/images/linkedin.png" alt="LinkedIn" /></a></td>
<td class="three sub-columns last">
<a title="Youtube" href="http://www.youtube.com/user/HealthMarkets4U"><img src="http://info.insphere.com/rs/megalife/images/youtube.png" alt="Youtube" /> </a>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- BANNER -->
<table id="banner" class="row no-gutter">
<tr>
<td class="wrapper">
<table id="banner-main" class="seven columns">
<tr>
<td class="text-pad">
<h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h4>
<p>Duis autem vel eum iriure dolor in hendrerit.</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table id="banner-aside" class="five columns">
<tr>
<td class="">
<img src="http://placehold.it/480x320" width="240" height="160" alt="img" />
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- BODY -->
<table class="row">
<tr>
<td id="main" class="wrapper">
<table id="body-main" class="seven columns">
<tr>
<td class="left-text-pad">
<p>Dear Jeremy,</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td id="aside" class="wrapper last">
<table id="body-aside" class="five columns">
<tr>
<td class="text-pad">
Body Aside
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>
<!-- FOOTER -->
<table class="row">
<tr>
<td class="wrapper last">
<table id="footer" class="twelve columns">
<tr>
<td class="left-text-pad">
Footer Content
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment