Skip to content

Instantly share code, notes, and snippets.

@shiawuen

shiawuen/gist:e5a014e75eef0b9bd375

Created May 22, 2015 10:48
Show Gist options
  • Save shiawuen/e5a014e75eef0b9bd375 to your computer and use it in GitHub Desktop.
Save shiawuen/e5a014e75eef0b9bd375 to your computer and use it in GitHub Desktop.
Download ZIP
email.html
Raw
gistfile1.txt
<!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"/>
<title>Modular Template Patterns</title>
<!--
This email is an experimental proof-of-concept based on the
idea that the most common design patterns seen in email can
be placed in modular blocks and moved around to create
different designs.
The same principle is used to build the email templates in
MailChimp's Drag-and-Drop email editor.
This email is optimized for mobile email clients, and even
works relatively well in the Android Gmail App, which does
not support Media Queries, but does have limited mobile-
friendly functionality.
While this coding method is very flexible, it can be more
brittle than traditionally-coded emails, particularly in
Microsoft Outlook 2007-2010. Outlook-specific conditional
CSS is included to counteract the inconsistencies that
crop up.
For more information on HTML email design and development,
visit http://templates.mailchimp.com
-->
<style type="text/css">
/*////// RESET STYLES //////*/
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
table{border-collapse:collapse;}
img, a img{border:0; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
p{margin: 1em 0;}
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/*////// FRAMEWORK STYLES //////*/
.flexibleContainerCell{padding-top:20px; padding-Right:20px; padding-Left:20px;}
.flexibleImage{height:auto;}
.bottomShim{padding-bottom:20px;}
.imageContent, .imageContentLast{padding-bottom:20px;}
.nestedContainerCell{padding-top:20px; padding-Right:20px; padding-Left:20px;}
/*////// GENERAL STYLES //////*/
body, #bodyTable{background-color:#F5F5F5;}
#bodyCell{padding-top:40px; padding-bottom:40px;}
#emailBody{background-color:#FFFFFF; border:1px solid #DDDDDD; border-collapse:separate; border-radius:4px;}
h1, h2, h3, h4, h5, h6{color:#202020; font-family:Helvetica; font-size:20px; line-height:125%; text-align:Left;}
.textContent, .textContentLast{color:#404040; font-family:Helvetica; font-size:16px; line-height:125%; text-align:Left; padding-bottom:20px;}
.textContent a, .textContentLast a{color:#2C9AB7; text-decoration:underline;}
.nestedContainer{background-color:#E5E5E5; border:1px solid #CCCCCC;}
.emailButton{background-color:#2C9AB7; border-collapse:separate; border-radius:4px;}
.buttonContent{color:#FFFFFF; font-family:Helvetica; font-size:18px; font-weight:bold; line-height:100%; padding:15px; text-align:center;}
.buttonContent a{color:#FFFFFF; display:block; text-decoration:none;}
.emailCalendar{background-color:#FFFFFF; border:1px solid #CCCCCC;}
.emailCalendarMonth{background-color:#2C9AB7; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; padding-top:10px; padding-bottom:10px; text-align:center;}
.emailCalendarDay{color:#2C9AB7; font-family:Helvetica, Arial, sans-serif; font-size:60px; font-weight:bold; line-height:100%; padding-top:20px; padding-bottom:20px; text-align:center;}
/*////// MOBILE STYLES //////*/
@media only screen and (max-width: 480px){
/*////// CLIENT-SPECIFIC STYLES //////*/
body{width:100% !important; min-width:100% !important;} /* Force iOS Mail to render the email at full width. */
/*////// FRAMEWORK STYLES //////*/
/*
CSS selectors are written in attribute
selector format to prevent Yahoo Mail
from rendering media query styles on
desktop.
*/
table[id="emailBody"], table[class="flexibleContainer"]{width:100% !important;}
/*
The following style rule makes any
image classed with 'flexibleImage'
fluid when the query activates.
Make sure you add an inline max-width
to those images to prevent them
from blowing out.
*/
img[class="flexibleImage"]{height:auto !important; width:100% !important;}
/*
Make buttons in the email span the
full width of their container, allowing
for left- or right-handed ease of use.
*/
table[class="emailButton"]{width:100% !important;}
td[class="buttonContent"]{padding:0 !important;}
td[class="buttonContent"] a{padding:15px !important;}
td[class="textContentLast"], td[class="imageContentLast"]{padding-top:20px !important;}
/*////// GENERAL STYLES //////*/
td[id="bodyCell"]{padding-top:10px !important; padding-Right:10px !important; padding-Left:10px !important;}
}
</style>
<!--
Outlook Conditional CSS
These two style blocks target Outlook 2007 & 2010 specifically, forcing
columns into a single vertical stack as on mobile clients. This is
primarily done to avoid the 'page break bug' and is optional.
More information here:
http://templates.mailchimp.com/development/css/outlook-conditional-css
-->
<!--[if mso 12]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]-->
<!--[if mso 14]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]-->
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- EMAIL CONTAINER // -->
<!--
The table "emailBody" is the email's container.
Its width can be set to 100% for a color band
that spans the width of the page.
-->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="emailBody">
<!-- MODULE ROW // -->
<!--
To move or duplicate any of the design patterns
in this email, simply move or copy the entire
MODULE ROW section for each content block.
-->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<!--
The centering table keeps the content
tables centered in the emailBody table,
in case its width is set to 100%.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<!--
The flexible container has a set width
that gets overridden by the media query.
Most content tables within can then be
given 100% widths.
-->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The content table is the first element
that's entirely separate from the structural
framework of the email.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
<h3>Title</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
In multi-column content blocks, the
content tables are given set widths
and the flexibleContainer class.
-->
<table align="Left" border="0" cellpadding="0" cellspacing="0" width="186" class="flexibleContainer">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="flexibleContainer">
<tr>
<td valign="top" class="imageContent">
<img src="http://placekitten.com/560/300" width="186" border="0" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="flexibleContainer">
<tr>
<td valign="top" class="textContent">
<h3>Left Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<table align="Left" border="0" cellpadding="0" cellspacing="0" width="186" class="flexibleContainer">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="flexibleContainer">
<tr>
<td valign="top" class="imageContent">
<img src="http://placekitten.com/560/300" width="186" border="0" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="flexibleContainer">
<tr>
<td valign="top" class="textContent">
<h3>Left Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table align="right" border="0" cellpadding="0" cellspacing="0" width="186" class="flexibleContainer">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="flexibleContainer">
<tr>
<td valign="top" class="imageContent">
<img src="http://placekitten.com/560/300" width="186" border="0" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="flexibleContainer">
<tr>
<td valign="top" class="textContent">
<h3>Left Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<!-- CONTENT TABLE // -->
<!--
The emailButton table's width can be changed
to affect the look of the button. To make the
button width dependent on the text inside, leave
the width blank. When a button is placed in a column,
it's helpful to set the width to 100%.
-->
<table border="0" cellpadding="0" cellspacing="0" width="260" class="emailButton">
<tr>
<td align="center" valign="middle" class="buttonContent">
<a href="#" target="_blank">Purchase Now</a>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td align="center" valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
<h3>Title</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table align="Left" border="0" cellpadding="0" cellspacing="0" width="240" class="flexibleContainer">
<tr>
<td valign="top" class="textContent">
<h3>Left Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table align="Right" border="0" cellpadding="0" cellspacing="0" width="240" class="flexibleContainer">
<tr>
<td valign="top" class="textContentLast">
<h3>Right Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td align="center" valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
<h3>Callout</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
<tr>
<td align="center" valign="top" class="bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="260" class="emailButton">
<tr>
<td align="center" valign="middle" class="buttonContent">
<a href="#" target="_blank">Purchase Now</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The table cell imageContent has padding
applied to the bottom as part of the framework,
ensuring images space correctly in Android Gmail.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="imageContent">
<img src="http://placekitten.com/g/1120/800" width="560" class="flexibleImage" style="max-width:560px;" />
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table align="Left" border="0" cellpadding="0" cellspacing="0" width="260" class="flexibleContainer">
<tr>
<td align="Left" valign="top" class="imageContent">
<img src="http://placekitten.com/g/520/520" width="260" class="flexibleImage" style="max-width:260px;" />
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table align="Right" border="0" cellpadding="0" cellspacing="0" width="260" class="flexibleContainer">
<tr>
<td align="Left" valign="top" class="imageContentLast">
<img src="http://placekitten.com/g/520/520" width="260" class="flexibleImage" style="max-width:260px;" />
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="imageContentLast">
<img src="http://placekitten.com/g/1120/800" width="560" class="flexibleImage" style="max-width:560px;" />
</td>
</tr>
<tr>
<td valign="top" class="textContent">
<h3>Title</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table align="Left" border="0" cellpadding="0" cellspacing="0" width="260" class="flexibleContainer">
<tr>
<td valign="top" class="imageContent">
<img src="http://placekitten.com/g/520/520" width="260" class="flexibleImage" style="max-width:260px;" />
</td>
</tr>
<tr>
<td valign="top" class="textContent">
<h3>Left Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table align="Right" border="0" cellpadding="0" cellspacing="0" width="260" class="flexibleContainer">
<tr>
<td valign="top" class="imageContentLast">
<img src="http://placekitten.com/g/520/520" width="260" class="flexibleImage" style="max-width:260px;" />
</td>
</tr>
<tr>
<td valign="top" class="textContent">
<h3>Right Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table align="Left" border="0" cellpadding="0" cellspacing="0" width="200" class="flexibleContainer">
<tr>
<td align="Left" valign="top" class="imageContent">
<img src="http://placekitten.com/g/400/400" width="200" class="flexibleImage" style="max-width:200px;" />
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table align="Right" border="0" cellpadding="0" cellspacing="0" width="340" class="flexibleContainer">
<tr>
<td valign="top" class="textContent">
<h3>Right Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td valign="top" width="600" class="flexibleContainerCell">
<!--
Keeping the table markup in its original
order and swapping the align attribute values
allows the tables to wrap in the correct order
on small displays.
-->
<!-- CONTENT TABLE // -->
<table align="Right" border="0" cellpadding="0" cellspacing="0" width="200" class="flexibleContainer">
<tr>
<td align="Left" valign="top" class="imageContent">
<img src="http://placekitten.com/g/400/400" width="200" class="flexibleImage" style="max-width:200px;" />
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table align="Left" border="0" cellpadding="0" cellspacing="0" width="340" class="flexibleContainer">
<tr>
<td valign="top" class="textContent">
<h3>Left Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td align="center" valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="imageContent">
<img src="http://placekitten.com/g/1040/800" width="520" class="flexibleImage" style="max-width:520px;" />
</td>
</tr>
<tr>
<td valign="top" class="textContent">
<h3>Title</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table align="Left" border="0" cellpadding="0" cellspacing="0" width="240" class="flexibleContainer">
<tr>
<td valign="top" class="imageContent">
<img src="http://placekitten.com/g/480/480" width="240" class="flexibleImage" style="max-width:240px;" />
</td>
</tr>
<tr>
<td valign="top" class="textContent">
<h3>Left Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table align="Right" border="0" cellpadding="0" cellspacing="0" width="240" class="flexibleContainer">
<tr>
<td valign="top" class="imageContentLast">
<img src="http://placekitten.com/g/480/480" width="240" class="flexibleImage" style="max-width:240px;" />
</td>
</tr>
<tr>
<td valign="top" class="textContent">
<h3>Right Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table align="Left" border="0" cellpadding="0" cellspacing="0" width="200" class="flexibleContainer">
<tr>
<td align="Left" valign="top" class="imageContent">
<img src="http://placekitten.com/g/400/400" width="200" class="flexibleImage" style="max-width:200px;" />
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table align="Right" border="0" cellpadding="0" cellspacing="0" width="280" class="flexibleContainer">
<tr>
<td valign="top" class="textContent">
<h3>Right Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table align="Right" border="0" cellpadding="0" cellspacing="0" width="200" class="flexibleContainer">
<tr>
<td align="Left" valign="top" class="imageContent">
<img src="http://placekitten.com/g/400/400" width="200" class="flexibleImage" style="max-width:200px;" />
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table align="Left" border="0" cellpadding="0" cellspacing="0" width="280" class="flexibleContainer">
<tr>
<td valign="top" class="textContent">
<h3>Left Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table align="Left" border="0" cellpadding="0" cellspacing="0" width="160" class="flexibleContainer">
<tr>
<td align="center" valign="top" class="bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="160" class="emailCalendar">
<tr>
<td align="center" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="emailCalendarMonth">
September
</td>
</tr>
<tr>
<td align="center" valign="top" class="emailCalendarDay">
16
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table align="Right" border="0" cellpadding="0" cellspacing="0" width="320" class="flexibleContainer">
<tr>
<td valign="top" class="textContent">
<h3>Right Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table align="Right" border="0" cellpadding="0" cellspacing="0" width="160" class="flexibleContainer">
<tr>
<td align="center" valign="top" class="bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="160" class="emailCalendar">
<tr>
<td align="center" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="emailCalendarMonth">
September
</td>
</tr>
<tr>
<td align="center" valign="top" class="emailCalendarDay">
16
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table align="Left" border="0" cellpadding="0" cellspacing="0" width="320" class="flexibleContainer">
<tr>
<td valign="top" class="textContent">
<h3>Left Column</h3>
<br />
A kitten or kitty is a juvenile domesticated cat. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
</table>
<!-- // EMAIL CONTAINER -->
</td>
</tr>
</table>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment