Skip to content

Instantly share code, notes, and snippets.

@drakemccabe

drakemccabe/index.html

Created January 20, 2016 03:13
Show Gist options
  • Save drakemccabe/10c14a9cf96649f46338 to your computer and use it in GitHub Desktop.
Save drakemccabe/10c14a9cf96649f46338 to your computer and use it in GitHub Desktop.
Download ZIP
basic responsive design template for marketo email
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">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->
</head>
<body style="margin: 0;padding: 0;min-width: 100%;background-color: #ffffff;">
<center class="wrapper" style="width: 100%;table-layout: fixed;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">
<div class="webkit" style="max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center">
<tr>
<td>
<![endif]-->
<table class="outer" align="center" style="border-spacing: 0;font-family: sans-serif;color: #333333;margin: 0 auto;width: 100%;max-width: 600px;">
<tr>
<td class="full-width-image" style="padding: 0;">
<img src="images/header.jpg" width="600" alt="" style="border: 0;width: 100%;max-width: 600px;height: auto;">
</td>
</tr>
<tr>
<td class="one-column" style="padding: 0;">
<table width="100%" style="border-spacing: 0;font-family: sans-serif;color: #333333;">
<tr>
<td class="inner contents" style="padding: 10px;width: 100%;text-align: left;"><p class="h1" style="margin: 0;font-size: 14px;font-weight: bold;margin-bottom: 10px;">Lorem ipsum dolor sit amet</p><p style="margin: 0;font-size: 14px;margin-bottom: 10px;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="two-column" style="padding: 0;text-align: center;font-size: 0;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column" style="width: 100%;max-width: 300px;display: inline-block;vertical-align: top;">
<table width="100%" style="border-spacing: 0;font-family: sans-serif;color: #333333;">
<tr>
<td class="inner" style="padding: 10px;">
<table class="contents" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;font-size: 14px;text-align: left;">
<tr>
<td style="padding: 0;">
<img src="images/two-column-01.jpg" width="280" alt="" style="border: 0;width: 100%;max-width: 280px;height: auto;">
</td>
</tr>
<tr>
<td class="text" style="padding: 0;padding-top: 10px;">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="column" style="width: 100%;max-width: 300px;display: inline-block;vertical-align: top;">
<table width="100%" style="border-spacing: 0;font-family: sans-serif;color: #333333;">
<tr>
<td class="inner" style="padding: 10px;">
<table class="contents" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;font-size: 14px;text-align: left;">
<tr>
<td style="padding: 0;">
<img src="images/two-column-02.jpg" width="280" alt="" style="border: 0;width: 100%;max-width: 280px;height: auto;">
</td>
</tr>
<tr>
<td class="text" style="padding: 0;padding-top: 10px;">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="three-column" style="padding: 0;text-align: center;font-size: 0;padding-top: 10px;padding-bottom: 10px;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="200" valign="top">
<![endif]-->
<table class="column" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;">
<tr>
<td class="inner" style="padding: 10px;">
<table class="contents" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;font-size: 14px;text-align: center;">
<tr>
<td style="padding: 0;">
<img src="images/three-column-01.jpg" width="180" alt="" style="border: 0;width: 100%;max-width: 180px;height: auto;">
</td>
</tr>
<tr>
<td class="text" style="padding: 0;padding-top: 10px;">
Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. </td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top">
<![endif]-->
<table class="column" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;">
<tr>
<td class="inner" style="padding: 10px;">
<table class="contents" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;font-size: 14px;text-align: center;">
<tr>
<td style="padding: 0;">
<img src="images/three-column-02.jpg" width="180" alt="" style="border: 0;width: 100%;max-width: 180px;height: auto;">
</td>
</tr>
<tr>
<td class="text" style="padding: 0;padding-top: 10px;">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. </td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top">
<![endif]-->
<table class="column" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;">
<tr>
<td class="inner" style="padding: 10px;">
<table class="contents" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;font-size: 14px;text-align: center;">
<tr>
<td style="padding: 0;">
<img src="images/three-column-03.jpg" width="180" alt="" style="border: 0;width: 100%;max-width: 180px;height: auto;">
</td>
</tr>
<tr>
<td class="text" style="padding: 0;padding-top: 10px;">
Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="three-column" style="padding: 0;text-align: center;font-size: 0;padding-top: 10px;padding-bottom: 10px;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="200" valign="top">
<![endif]-->
<table class="column" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;">
<tr>
<td class="inner contents" style="padding: 10px;width: 100%;font-size: 14px;text-align: center;"><p class="h2" style="margin: 0;font-size: 18px;font-weight: bold;margin-bottom: 12px;">Fashion</p><p style="margin: 0;">Class eleifend aptent taciti sociosqu ad litora torquent conubia</p><p style="margin: 0;"><a href="#" style="color: #ee6a56;text-decoration: underline;">Read requirements</a></p></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top">
<![endif]-->
<table class="column" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;">
<tr>
<td class="inner contents" style="padding: 10px;width: 100%;font-size: 14px;text-align: center;"><p class="h2" style="margin: 0;font-size: 18px;font-weight: bold;margin-bottom: 12px;">Photography</p><p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor</p><p style="margin: 0;"><a href="#" style="color: #ee6a56;text-decoration: underline;">See examples</a></p></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top">
<![endif]-->
<table class="column" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;">
<tr>
<td class="inner contents" style="padding: 10px;width: 100%;font-size: 14px;text-align: center;"><p class="h2" style="margin: 0;font-size: 18px;font-weight: bold;margin-bottom: 12px;">Design</p><p style="margin: 0;">Class aptent taciti sociosqu eleifend ad litora per conubia nostra</p><p style="margin: 0;"><a href="#" style="color: #ee6a56;text-decoration: underline;">See the winners</a></p></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
<tr>
<td width="200" valign="top">
<![endif]-->
<table class="column" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;">
<tr>
<td class="inner contents" style="padding: 10px;width: 100%;font-size: 14px;text-align: center;"><p class="h2" style="margin: 0;font-size: 18px;font-weight: bold;margin-bottom: 12px;">Cooking</p><p style="margin: 0;">Class aptent taciti eleifend sociosqu ad litora torquent conubia</p><p style="margin: 0;"><a href="#" style="color: #ee6a56;text-decoration: underline;">Read recipes</a></p></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top">
<![endif]-->
<table class="column" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;">
<tr>
<td class="inner contents" style="padding: 10px;width: 100%;font-size: 14px;text-align: center;"><p class="h2" style="margin: 0;font-size: 18px;font-weight: bold;margin-bottom: 12px;">Woodworking</p><p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor</p><p style="margin: 0;"><a href="#" style="color: #ee6a56;text-decoration: underline;">See examples</a></p></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top">
<![endif]-->
<table class="column" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;">
<tr>
<td class="inner contents" style="padding: 10px;width: 100%;font-size: 14px;text-align: center;"><p class="h2" style="margin: 0;font-size: 18px;font-weight: bold;margin-bottom: 12px;">Craft</p><p style="margin: 0;">Class aptent taciti sociosqu ad eleifend litora per conubia nostra</p><p style="margin: 0;"><a href="#" style="color: #ee6a56;text-decoration: underline;">Vote now</a></p></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="left-sidebar" style="padding: 0;text-align: center;font-size: 0;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="100">
<![endif]-->
<table class="column left" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;display: inline-block;vertical-align: middle;max-width: 100px;">
<tr>
<td class="inner" style="padding: 10px;">
<img src="images/sidebar-01.jpg" width="80" alt="" style="border: 0;">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="500">
<![endif]-->
<table class="column right" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;display: inline-block;vertical-align: middle;max-width: 500px;">
<tr>
<td class="inner contents" style="padding: 10px;width: 100%;font-size: 14px;text-align: center;">
Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.
<a href="#" style="color: #85ab70;text-decoration: underline;">Read&nbsp;on</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="right-sidebar" dir="rtl" style="padding: 0;text-align: center;font-size: 0;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" dir="rtl">
<tr>
<td width="100">
<![endif]-->
<table class="column left" dir="ltr" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;display: inline-block;vertical-align: middle;max-width: 100px;">
<tr>
<td class="inner contents" style="padding: 10px;width: 100%;font-size: 14px;text-align: center;">
<img src="images/sidebar-02.jpg" width="80" alt="" style="border: 0;">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="500">
<![endif]-->
<table class="column right" dir="ltr" style="border-spacing: 0;font-family: sans-serif;color: #333333;width: 100%;display: inline-block;vertical-align: middle;max-width: 500px;">
<tr>
<td class="inner contents" style="padding: 10px;width: 100%;font-size: 14px;text-align: center;">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra.
<a href="#" style="color: #70bbd9;text-decoration: underline;">Per&nbsp;inceptos</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment