Skip to content

Instantly share code, notes, and snippets.

@jakejscott

jakejscott/welcome.html

Created September 24, 2012 07:05
Show Gist options
  • Save jakejscott/3774693 to your computer and use it in GitHub Desktop.
Save jakejscott/3774693 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Email Template
Raw
welcome.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ASOS Marketplace</title>
<style type="text/css">
body, p {
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust:none;
}
a:hover {
text-decoration: underline !important;
}
img {
display: block;
}
/* Mobile stylesheet for iPhone and Android */
@media only screen and (max-width: 480px) {
table {
position: relative;
}
table[class="table"], td[class="cell"] {
width: 320px !important;
}
.stat-title { font-size:12px !important; }
.stat-value { font-size:16px !important; letter-spacing:0px !important; }
.stat-item { font-size:14px !important; letter-spacing:0px !important; }
}
</style>
</head>
<body bgcolor="#ffffff" style="margin: 0; padding: 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff"><!-- page background color -->
<tr>
<td width="100%" bgcolor="#ffffff">
<table width="600" align="center" class="table" cellpadding="0" cellspacing="0" border="0"><!-- center align content -->
<tr>
<td width="600" class="cell"><!-- top of the screen -->
<br>
<table width="100%" cellpadding="26" cellspacing="0" border="0"><!-- 26px gutter -->
<td bgcolor="#ffffff" width="100%">
<table width="100%" cellpadding="0" cellspacing="0" border="0"><!-- logo -->
<tr>
<td valign="top" align="left">
<img border="0" src="http://dl.dropbox.com/u/4161923/images/asos-logo.gif" height="43" width="90" alt="asos marketplace" />
</td>
<td valign="top" align="right">
<p style="color:#333333;line-height:18px;font-family:Georgia,serif;font-size:12px;font-style:italic;font-weight:normal;line-height:15px;margin-top:0;margin-bottom:0px;padding-top:0;padding-bottom:0;">
Buy &amp; Sell,<br> Preowned &amp;<br> Vintage Fashion
</p>
</td>
</tr>
<tr><td><img border="0" src="http://dl.dropbox.com/u/4161923/images/spacer.gif" width="1" height="26"></td></tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0"><!-- heading -->
<tr>
<td>
<p style="color:#000;line-height:18px;font-family:Georgia,serif;font-size:68px;font-style:normal;font-weight:normal;line-height:72px;letter-spacing:-2px; margin-top:0;margin-bottom:0px;padding-top:0;padding-bottom:0;">
welcome
</p>
<p style="color:#333;line-height:18px;font-family:Georgia,serif;font-size:22px;font-style:normal;font-weight:normal;line-height:26px;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;">
to ASOS Marketplace, Jake
</p>
</td>
</tr>
<tr><td><img border="0" src="http://dl.dropbox.com/u/4161923/images/spacer.gif" width="1" height="32"></td></tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0"><!-- people -->
<tr>
<td>
<img border="0" src="http://dl.dropbox.com/u/4161923/images/people.jpg" width="100%" alt="" />
</td>
</tr>
<tr><td><img border="0" src="http://dl.dropbox.com/u/4161923/images/spacer.gif" width="1" height="32"></td></tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0"><!-- 100,000+ Products, 5000+ Sellers, 100+ Countries -->
<tr>
<td>
<p class="stat-title" style="color:#666;font-family: Helvetica, Arial, sans-serif;font-size: 16px;font-style: normal;font-weight: bold;text-transform: uppercase;letter-spacing: normal;line-height: 16px;margin-top:0;margin-bottom:0px;padding-top:0;padding-bottom:0;">
Shop</p>
<p class="stat-value" style="color:#000;font-family: Helvetica, Arial, sans-serif;font-size: 38px;font-style: normal;font-weight: bold;text-transform: uppercase;letter-spacing: -2px;line-height: 1.2em;margin-top:0;margin-bottom:0px;padding-top:0;padding-bottom:0;">
100,000+</p>
<p class="stat-item" style="color:#333;font-family: Helvetica, Arial, sans-serif;font-size: 24px;font-style: normal;font-weight: bold;text-transform: uppercase;letter-spacing: -1px;line-height: 1.1em;margin-top:0;margin-bottom:0px;padding-top:0;padding-bottom:0;">
Products</p>
</td>
<td>
<p class="stat-title" style="color:#666;font-family: Helvetica, Arial, sans-serif;font-size: 16px;font-style: normal;font-weight: bold;text-transform: uppercase;letter-spacing: normal;line-height: 16px;margin-top:0;margin-bottom:0px;padding-top:0;padding-bottom:0;">
From</p>
<p class="stat-value" style="color:#000;font-family: Helvetica, Arial, sans-serif;font-size: 38px;font-style: normal;font-weight: bold;text-transform: uppercase;letter-spacing: -2px;line-height: 1.2em;margin-top:0;margin-bottom:0px;padding-top:0;padding-bottom:0;">
5000+</p>
<p class="stat-item" style="color:#333;font-family: Helvetica, Arial, sans-serif;font-size: 24px;font-style: normal;font-weight: bold;text-transform: uppercase;letter-spacing: -1px;line-height: 1.1em;margin-top:0;margin-bottom:0px;padding-top:0;padding-bottom:0;">
Sellers</p>
</td>
<td>
<p class="stat-title" style="color:#666;font-family: Helvetica, Arial, sans-serif;font-size: 16px;font-style: normal;font-weight: bold;text-transform: uppercase;letter-spacing: normal;line-height: 16px;margin-top:0;margin-bottom:0px;padding-top:0;padding-bottom:0;">
In</p>
<p class="stat-value" style="color:#000;font-family: Helvetica, Arial, sans-serif;font-size: 38px;font-style: normal;font-weight: bold;text-transform: uppercase;letter-spacing: -2px;line-height: 1.2em;margin-top:0;margin-bottom:0px;padding-top:0;padding-bottom:0;">
100+</p>
<p class="stat-item" style="color:#333;font-family: Helvetica, Arial, sans-serif;font-size: 24px;font-style: normal;font-weight: bold;text-transform: uppercase;letter-spacing: -1px;line-height: 1.1em;margin-top:0;margin-bottom:0px;padding-top:0;padding-bottom:0;">
Countries</p>
</td>
</tr>
<tr><td><img border="0" src="http://dl.dropbox.com/u/4161923/images/spacer.gif" width="1" height="26"></td></tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0"><!-- footer -->
<tr>
<td>
<img border="0" src="http://dl.dropbox.com/u/4161923/images/spacer.gif" width="1" height="26">
<img border="0" src="http://dl.dropbox.com/u/4161923/images/fader.jpg" width="100%" height="9" class="fader">
<img border="0" src="http://dl.dropbox.com/u/4161923/images/spacer.gif" width="1" height="26">
</td>
</tr>
<tr>
<td valign="top" align="center">
<p style="color:#333333;line-height:18px;font-family:Georgia,serif;font-size:22px;font-style:italic;font-weight:normal;line-height:28px;margin-top:0;margin-bottom:0px;padding-top:0;padding-bottom:0;">
Thanks,
</p>
<p style="color:#494949;line-height:18px;font-family:Georgia,serif;font-size:12px;font-style:normal;font-weight:normal;line-height:22px;text-transform:uppercase; margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;">
The Marketplace Team
</p>
</td>
</tr>
<tr><td><img border="0" src="http://dl.dropbox.com/u/4161923/images/spacer.gif" width="1" height="20"></td></tr>
<tr>
<td valign="top" align="center">
<table width="128" cellpadding="0" cellspacing="0" border="0"><!-- social -->
<tr>
<td><a href="https://twitter.com/AsosMarketplace/"><img border="0" src="http://dl.dropbox.com/u/4161923/images/social-twitter.jpg" height="24" width="24" alt="Twitter" /></a></td>
<td><a href="https://plus.google.com/+AsosMarketplace/"><img border="0" src="http://dl.dropbox.com/u/4161923/images/social-plus.jpg" height="24" width="24" alt="Google+" /></a></td>
<td><a href="https://pinterest.com/AsosMarketplace/"><img border="0" src="http://dl.dropbox.com/u/4161923/images/social-pinterest.jpg" height="24" width="24" alt="Pinterest" /></td>
<td><a href="https://www.youtube.com/user/AsosMarketplace/"><img border="0" src="http://dl.dropbox.com/u/4161923/images/social-youtube.jpg" height="24" width="24" alt="YouTube" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment