Skip to content

Instantly share code, notes, and snippets.

@procload

procload/zephyr.html

Created February 11, 2015 21:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save procload/f5289e3fa2f69c7b6a40 to your computer and use it in GitHub Desktop.
Save procload/f5289e3fa2f69c7b6a40 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
zephyr.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<style type="text/css">
/* Responsive Media Queries */
/* //////////////////////////////////// */
/* Generic Element MQs */
@media only screen and (max-width: 480px){
img{
max-width:100% !important;
height:auto !important;
}
}
/* Provisions Nav MQs */
@media only screen and (max-width: 490px) {
table[class="provisions-nav"] { display: none; }
}
/* Side-by Text &amp; Image MQs */
@media only screen and (max-width: 480px) {
table[class="side-by"] td[class="side-by-content"],
table[class="side-by"] td[class="side-by-image right"],
table[class="side-by"] td[class="side-by-image left"] {
padding: 0 !important;
text-align: center;
display: block;
width: 100%;
}
table[class="side-by"] td[class="side-by-content"] p {
margin: 0 auto 10px;
width: 90%;
}
table[class="side-by"] td[class="side-by-content"] &gt; a &gt; img {
margin-bottom: 20px;
}
table[class="side-by"] table[class="side-by-grid"] {
margin: 0 auto;
}
}
</style>
</head>
<body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background: #fff; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0; width: 100% !important" bgcolor="#fff">
<center style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">
<div class="frame all-the-things" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 auto; max-width: 600px; padding: 0">
<!--[if !mso]><!--><table width="100%" cellpadding="0" cellspacing="0" class="container" style="border-collapse: collapse; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 auto; max-width: 600px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%"><!--<![endif]-->
<!--[if gte mso 9]><table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600" ><![endif]-->
<tr style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">
<td valign="top" style="border-collapse: collapse; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">
<!-- Pre-Header -->
<div class="pre-header" style="color: #ccc; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; font-weight: normal; padding-top: 5px; text-align: center" align="center">
<a href="http://food52.com/" style="color: #ccc; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: none">The best of the week from Food52 and Provisions.</a>
| <a href="{view_url}" style="color: #ccc; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: none">View in browser</a>
</div>
<!-- /Pre-Header -->
<!-- Divider -->
<table border="0" cellpadding="0" cellspacing="0" class="section-divider blank" style="border-bottom-color: #fff; border-bottom-style: solid; border-bottom-width: 5px; border-collapse: collapse; border-top-color: #fff; border-top-style: solid; border-top-width: 5px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 5px; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%">
<tr style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">
<td class="gutter" style="background: #FFF; border-collapse: collapse; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 5px; line-height: 5px; width: 0" bgcolor="#FFF"></td>
<td style="background: #FFF; border-collapse: collapse; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 5px; line-height: 5px" bgcolor="#FFF"> </td>
<td class="gutter" style="background: #FFF; border-collapse: collapse; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 5px; line-height: 5px; width: 0" bgcolor="#FFF"></td>
</tr>
</table>
<!-- /Divider -->
<!-- Header -->
<div class="email-header" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 15px 0; text-align: center" align="center">
<a href="http://food52.com/" title="Food52" target="_blank" style="color: #666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: none">
<img src="http://media.sailthru.com/3sg/1jy/6/n/53a86b7ba93a4.png" alt="Food52" width="212" height="40" style="-ms-interpolation-mode: bicubic; border: none; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; max-width: 100%; outline: none; text-decoration: none" />
</a>
</div>
<!-- /Header -->
<!-- Divider -->
<table border="0" cellpadding="0" cellspacing="0" class="section-divider header" style="border-bottom-color: #fff; border-bottom-width: 20px; border-collapse: collapse; border-top-color: #fff; border-top-width: 20px; border: none; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 5px; margin: 0 auto 15px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%">
<tr style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">
<td class="gutter" style="background: #f7f7f7; border-collapse: collapse; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 5px; line-height: 5px; width: 0" bgcolor="#f7f7f7"></td>
<td style="background: #f7f7f7; border-collapse: collapse; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 5px; line-height: 5px" bgcolor="#f7f7f7"> </td>
<td class="gutter" style="background: #f7f7f7; border-collapse: collapse; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 5px; line-height: 5px; width: 0" bgcolor="#f7f7f7"></td>
</tr>
</table>
<!-- /Divider -->
<!-- Three Column Content Block -->
<table cellpadding="0" cellspacing="0" border="0" class="content-block" style="border-collapse: collapse; color: #666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.5; margin: 0 0 15px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: center; width: 100%">
<!-- Start of Three Columns -->
<tr style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">
<td class="three-col three-data" style="border-collapse: collapse; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-bottom: 24px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%">
<tr style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">
{foreach slice(content,0,3) as i, c}
<td valign="top" style="border-collapse: collapse; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">
{if i == 0}
<div class="col first" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0 19px 0 0; text-align: center; width: 174px" align="center">
{else if i == 1}
<div class="col" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0 19px; text-align: center; width: 174px" align="center">
{else}
<div class="col last" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0 0 0 19px; text-align: center; width: 174px" align="center">
{/if}
<div class="content-item" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">
<div class="content-image" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">
<a target="_blank" href="{c.url}" style="color: #666; display: block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 6px; text-align: center; text-decoration: none"><img width="174px" alt="{c.title}" src="{c.image}" style="-ms-interpolation-mode: bicubic; border: none; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: auto !important; max-width: 100%; outline: none; text-decoration: none" /></a>
</div>
<div class="content-description" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center" align="center">
<a target="_blank" href="{c.url}" style="color: #555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: none">{c.title}</a>
</div>
</div>
</div>
</td>
{/foreach}
</tr>
</table>
</td>
</tr>
</table>
<!-- Footer -->
<div class="email-footer" style="color: #666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; line-height: 1.7em; padding: 14px 0 40px; text-align: center" align="center">
<div class="social-icons" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0 0 10px">
<a href="http://facebook.com/food52" target="_blank" style="color: #666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0 5px; text-decoration: none"><img src="http://media.sailthru.com/3sg/1jy/6/n/53a86c5ac0309.png" alt="Facebook" style="-ms-interpolation-mode: bicubic; border: none; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: auto !important; max-width: 100%; outline: none; text-decoration: none" /></a>
<a href="http://twitter.com/food52" target="_blank" style="color: #666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0 5px; text-decoration: none"><img src="http://media.sailthru.com/3sg/1jy/6/n/53a86c747f14b.png" alt="Twitter" style="-ms-interpolation-mode: bicubic; border: none; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: auto !important; max-width: 100%; outline: none; text-decoration: none" /></a>
<a href="http://pinterest.com/food52" target="_blank" style="color: #666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0 5px; text-decoration: none"><img src="http://media.sailthru.com/3sg/1jy/6/n/53a86c6d92653.png" alt="Pinterest" style="-ms-interpolation-mode: bicubic; border: none; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: auto !important; max-width: 100%; outline: none; text-decoration: none" /></a>
<a href="http://instagram.com/food52" target="_blank" style="color: #666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0 5px; text-decoration: none"><img src="http://media.sailthru.com/3sg/1jy/6/n/53a86c6219ea8.png" alt="Instagram" style="-ms-interpolation-mode: bicubic; border: none; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: auto !important; max-width: 100%; outline: none; text-decoration: none" /></a>
</div>
<div class="footer-text" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">
<a href="{forward_url}" target="_blank" style="color: #666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: underline">Forward this email</a> to a friend.
<a href="{optout_confirm_url}" target="_blank" style="color: #666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: underline">Click here to unsubscribe or manage your preferences.</a>
<br style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif" />
© {date(yyy)} Food52. All Rights Reserved.
<br style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif" />
251 W 30th St. Suite 13W New York, NY 10001 USA
</div>
{beacon}
</div>
<!-- /Footer -->
</td>
</tr>
</table>
</div> <!-- /frame -->
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment