Skip to content

Instantly share code, notes, and snippets.

@lqb2

lqb2/index.html

Last active August 29, 2015 14:11
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 lqb2/cbdc0294cdd52663cae5 to your computer and use it in GitHub Desktop.
Save lqb2/cbdc0294cdd52663cae5 to your computer and use it in GitHub Desktop.
Download ZIP
GB2030EmailTemplate
Raw
index.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" />
<title>GoBoston2030: Your Personalized Email!</title>
<style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
.header {padding: 40px 30px 20px 30px;}
.col425 {width: 425px!important;}
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 0px; font-weight: bold;}
.h1 {font-size: 3em; line-height: 2.5em; font-weight: bold; color:#000;font-family: sans-serif}
.h2, .bodycopy {color: #153643; font-family: sans-serif;}
.footerAddress {font-size: 12px; text-transform: uppercase; letter-spacing: 2px; line-height: 1.5em;}
.innerpadding {padding: 30px 30px 30px 30px;}
.titlepadding {padding: 30px 30px 0px 30px;}
.bottompadding {padding: 0px 0px 30px 0px;}
.borderbottom {border-bottom: 1px solid #f2eeed;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;}
img {height: auto;}
.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #000;}
.footercopy a {color: #ffffff; text-decoration: underline;}
@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body[yahoo] .buttonwrapper {background-color: transparent!important;}
body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;}
}
</style>
</head>
<body yahoo bgcolor="#fff">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="header" bgcolor="#000">
<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;" style="width: 100%; max-width: 425px;">
<tr>
<td height="70">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" height="70" style="padding: 0 20px 20px 0;">
<img src="http://i.imgur.com/oHpGyVR.png" width="200" height="200" border="0" alt="" / >
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class=" ">
<table class = "titlepadding" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h1">
Email Title
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="innerpadding">
<img src="http://i.imgur.com/Z7YFn4a.jpg" width="100%" border="0" alt="" />
</td>
</tr>
<tr>
<td class="innerpadding ">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h2">
Check out our first section
</td>
</tr>
<tr>
<td class="bodycopy bottompadding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
<tr>
<td class="bodycopy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="innerpadding borderbottom">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h2">
Stats about your question here
</td>
</tr>
<tr>
<td class="bodycopy bottompadding">
Your question got <b>100</b> likes!
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer" bgcolor="#f3f3f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="footercopy">
<a href="#"><font color="#00b2d2">
Unsubscribe</font></a>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0 0 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="37" style="text-align: center; padding: 0 10px 0 10px;">
<a href="http://www.facebook.com/goboston2030">
<img src="http://i.imgur.com/FpKbN8w.png" width="37" height="37" alt="Facebook" border="0" />
</a>
</td>
<td width="37" style="text-align: center; padding: 0 10px 0 10px;">
<a href="http://www.twitter.com/goboston2030">
<img src="http://i.imgur.com/VSjEs7d.png" width="37" height="37" alt="Twitter" border="0" />
</a>
</td>
<td width="37" style="text-align: center; padding: 0 10px 0 10px;">
<a href="http://www.instagram.com/goboston2030">
<img src="http://i.imgur.com/0Tunao6.png" width="37" height="37" alt="Instagram" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="footercopy">
<p class="footerAddress">70 Fargo Street<br>Boston, MA 02210</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment