Skip to content

Instantly share code, notes, and snippets.

@ashaegupta
Created August 7, 2013 22:06
Show Gist options
  • Select an option

  • Save ashaegupta/6179238 to your computer and use it in GitHub Desktop.

Select an option

Save ashaegupta/6179238 to your computer and use it in GitHub Desktop.
<!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, initial-scale=1.0"/>
<title>Light</title>
<style type="text/css">
/* Styles get inlined when email is sent */
#backgroundTable { width: 100%; margin: 0; border: 0; padding: 0; border-spacing: 0; background-color: #FAFAFA; }
.wrapperCell { text-align: center; padding: 15px 15px; }
#contentTable { width: 600px; background-color: #FFF; border: 1px solid #E5E5E5; }
.headerCell { padding: 15px; border-bottom: 1px solid #E5E5E5; text-align: center; }
.contentCell { padding:20px; text-align: left; color: #333; font-size: 13px; }
body { padding:0; margin: 0; background-color: #FAFAFA; -webkit-font-smoothing: antialiased; font-family: sans-serif; font-size: 13px; }
#footerTable { }
.footerCell { color: #9D9D9D; font-size: 10px; padding-bottom: 20px; }
.footerCell a { color: #777; text-decoration: none;}
h1 { font-weight: 600; color: #E5E5E5; font-size: 24px; line-height: 26px; margin:0; padding:0; };
h2 { color: #444 !important; font-size: 16px; line-height: 24px; margin-bottom: 10px; }
/* Make this awesome on mobile */
@media only screen and (max-device-width: 480px) {
body { width: 320px !important; margin: 0; padding: 0; }
table[id="backgroundTable"] { width: 320px !important; }
td[class="wrapperCell"] { width: 320px !important; }
td[class="headerCell"] h1 { font-size: 20px !important; }
table[id="contentTable"] { width: 320px !important; }
table[id="footerTable"] { width: 320px !important; }
td[class="contentCell"] { padding:0; }
td img { height:auto !important; max-width:100% !important;}
}
</style>
</head>
<body>
<table id="backgroundTable">
<tbody>
<tr>
<td class="wrapperCell">
<table id="contentTable" align="center">
<tbody>
<tr><td class="headerCell">
<h1>Edit this in "Layouts"</h1>
</td></tr>
<tr><td class="contentCell">
<!-- We'll replace this content tag with whatever you write in your email -->
{{ content }}
</td></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="footerWrapper">
<table id="footerTable" align="center">
<tbody>
<tr><td class="footerCell">
Don't want to receive amazing emails from us? <a href="{% unsubscribe_url %}">Unsubscribe</a>
</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment