Skip to content

Instantly share code, notes, and snippets.

@justinrolston

justinrolston/mailchimp.html

Created November 8, 2012 02:06
Show Gist options
  • Save justinrolston/4036101 to your computer and use it in GitHub Desktop.
Save justinrolston/4036101 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mailchimp.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Facebook sharing information tags -->
<meta property="og:title" content="*|MC:SUBJECT|*" />
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
/* Reset Styles */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table td{border-collapse:collapse;}
#backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
/* Template Styles */
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COMMON PAGE ELEMENTS /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Page
* @section background color
* @tip Set the background color for your email. You may want to choose one that matches your company's branding.
* @theme page
*/
body, #backgroundTable{
/*@editable*/ background-color:#e1ecf2;
}
/**
* @tab Page
* @section email border
* @tip Set the border for your email.
*/
#templateContainer{
/*@editable*/ border: none;
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1, .h1{
/*@editable*/ color:#202020;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:34px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2, .h2{
/*@editable*/ color:#202020;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:30px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3, .h3{
/*@editable*/ color:#202020;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:26px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4, .h4{
/*@editable*/ color:#202020;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:22px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: PREHEADER /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Header
* @section preheader style
* @tip Set the background color for your email's preheader area.
* @theme page
*/
#templatePreheader{
/*@editable*/ background-color:#e1ecf2;
}
/**
* @tab Header
* @section preheader text
* @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
.preheaderContent div{
/*@editable*/ color:#505050;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:10px;
/*@editable*/ line-height:100%;
/*@editable*/ text-align:center;
}
/**
* @tab Header
* @section preheader link
* @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
.preheaderContent div a:link, .preheaderContent div a:visited, /* Yahoo! Mail Override */ .preheaderContent div a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#336699;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Header
* @section header style
* @tip Set the background color and border for your email's header area.
* @theme header
*/
#templateHeader{
/*@editable*/ background-color:#FFFFFF;
/*@editable*/ border-bottom:0;
}
/**
* @tab Header
* @section header text
* @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
.headerContent{
/*@editable*/ color:#202020;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:34px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ padding:0;
/*@editable*/ text-align:left;
/*@editable*/ vertical-align:middle;
}
/**
* @tab Header
* @section header link
* @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/
.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#336699;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
#headerImage{
height:auto;
max-width:600px !important;
}
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: MAIN BODY /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Body
* @section body style
* @tip Set the background color for your email's body area.
*/
#templateContainer, .bodyContent{
/*@editable*/ background-color:#e1ecf2;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent div{
/*@editable*/ color:#505050;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:14px;
/*@editable*/ line-height:150%;
/*@editable*/ text-align:left;
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#336699;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.bodyContent img{
display:inline;
height:auto;
}
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: FOOTER /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and top border for your email's footer area.
* @theme footer
*/
#templateFooter{
/*@editable*/ background-color:#FFFFFF;
/*@editable*/ border-top:0;
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent div{
/*@editable*/ color:#707070;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:12px;
/*@editable*/ line-height:125%;
/*@editable*/ text-align:left;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#ccc;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.footerContent img{
display:inline;
}
/**
* @tab Footer
* @section social bar style
* @tip Set the background color and border for your email's footer social bar.
* @theme footer
*/
#social{
/*@editable*/ background-color:#FAFAFA;
/*@editable*/ border:0;
}
/**
* @tab Footer
* @section social bar style
* @tip Set the background color and border for your email's footer social bar.
*/
#social div{
/*@editable*/ text-align:right;
}
/**
* @tab Footer
* @section utility bar style
* @tip Set the background color and border for your email's footer utility bar.
* @theme footer
*/
#utility{
/*@editable*/ background-color:#FFFFFF;
/*@editable*/ border:0;
}
/**
* @tab Footer
* @section utility bar style
* @tip Set the background color and border for your email's footer utility bar.
*/
#utility div{
/*@editable*/ text-align:center;
}
#monkeyRewards img{
max-width:190px;
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor="#e1ecf2" style="background-color:#e1ecf2;">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" width="190" style="text-align:center;">
<div mc:edit="std_preheader_links">
Is this email not displaying correctly?<br /><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer" >
<tr>
<td align="center" valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader" bgcolor="#e2743e" valign="top" style="background:#e2743e;padding:10px">
<tr>
<td class="headerContent">
<!-- // Begin Module: Standard Header Image \\ -->
<img src="img/dealharbor-email-logo.png" title="Deal Harbor Top Deal's" alt="Deal Harbor Top Deal's" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext >
<!-- // End Module: Standard Header Image \\ -->
</td>
<td><div class="date" style="color:#fff;font-size:12px;font-family:Helvetica,Arial, sans-serif;text-align:right;">Friday, Oct 12 2012</div></td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
<tr>
<td bgcolor="#e1ecf2" height="20px" style="height:20px;background:#e1ecf2"></td>
</tr>
<tr>
<td valign="top" class="bodyContent">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff;" style="background:#ffffff;">
<tr>
<td valign="top" width="350" style="padding:20px 20px 0 20px;text-align:right;">
<div mc:edit="std_content00">
<h2 style="color:#e2743e;font-size:32px;font-weight:bold;text-align:center;font-family:Arial,Helvetica,sans-serif;margin:0;"><a href="" style="color:#e2743e;text-decoration:none;font-weight:bold;">Kate Spade Gallery Row Harmony </a></h2>
</div>
</td>
<td valign="top" width="170" style="padding:20px 20px 0 20px;text-align:right;">
<img src="img/icon-number-one.png" width="56" height="56" alt="Icon Number One">
</td>
</tr>
<tr>
<td valign="top" width="170" style="padding:0 20px 20px 20px;text-align:center;">
<div mc:edit="std_content00" style="font-size:14px;color:#333333;text-align:center;">
<p style="font-size:14px;color:#333333;text-align:left;">Kate Spade drops the <strong>Gallery Row Harmony Bag from $278 to $119 with free shipping</strong>, making it the lowest total price we could find. This bag is made of lightly coated slub cotton and features an open top and interior zip pocket.</p>
<a href="" style="text-align:center;margin:10px 0 0;"><img src="img/btn_viewdeal.png" width="146" height="37" alt="Btn Viewdeal"></a>
</div>
</td>
<td valign="top" width="170" style="padding:0 20px 20px 20px;text-align:center;">
<img src="img/temp-bag2.jpg" width="160" height="180" alt="Temp Bag2">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#e1ecf2" height="20" style="height:20px;background:#e1ecf2"></td>
</tr>
<tr>
<td valign="top" class="bodyContent">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top">
<!-- ******** /deal box ******** -->
<table border="0" cellpadding="0" cellspacing="0" width="290">
<tr>
<td width="40"valign="top" bgcolor="#4a7688" style="padding:10px;">
<img src="img/icon-number-two.png" width="38" height="38" alt="Icon Number Two">
</td>
<td width="220px" valign="top" bgcolor="#4a7688" style="align:left;padding:10px 10px 10px 0;">
<h2 style="color:#ffffff;font-size:20px;font-family:Arial,Helvetica,sans-serif;margin:0;"><a href="" style="color:#ffffff;text-decoration:none;">10pc Calphalon Nonstick Set $180</a></h2>
</td>
</tr>
<tr>
<td valign="top" colspan="2" bgcolor="#ffffff;" style="background:#ffffff;text-align:center;padding:15px 30px 30px;"><div style="margin-bottom:20px;text-align:center;"><a href=""><img src="img/temp-pans.jpg" width="160" height="180" alt="Temp Pans"></a></div>
<div style="background:#ffffff;text-align:center;"><a href=""><img src="img/btn_viewdeal.png" width="146" height="37" alt="Btn Viewdeal"></a></div>
</td>
</tr>
</table>
<!-- ******** /deal box ******** -->
</td>
<td bgcolor="#e1ecf2" width="20" style="width:20pxbackground:#e1ecf2">
</td>
<td valign="top">
<!-- ******** /deal box ******** -->
<table border="0" cellpadding="0" cellspacing="0" width="290">
<tr>
<td width="40"valign="top" bgcolor="#4a7688" style="padding:10px;">
<img src="img/icon-number-three.png" width="38" height="38" alt="Icon Number Two">
</td>
<td width="220px" valign="top" bgcolor="#4a7688" style="align:left;padding:10px 10px 10px 0;">
<h2 style="color:#ffffff;font-size:20px;font-family:Arial,Helvetica,sans-serif;margin:0;"><a href="" style="color:#ffffff;text-decoration:none;">10pc Calphalon Nonstick Set $180</a></h2>
</td>
</tr>
<tr>
<td valign="top" colspan="2" bgcolor="#ffffff;" style="background:#ffffff;text-align:center;padding:15px 30px 30px;"><div style="margin-bottom:20px;text-align:center;"><a href=""><img src="img/temp-pans.jpg" width="160" height="180" alt="Temp Pans"></a></div>
<div style="background:#ffffff;text-align:center;"><a href=""><img src="img/btn_viewdeal.png" width="146" height="37" alt="Btn Viewdeal"></a></div>
</td>
</tr>
</table>
<!-- ******** /deal box ******** -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#e1ecf2" height="20" style="height:20px;background:#e1ecf2"></td>
</tr>
<tr>
<td valign="top" class="bodyContent">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top">
<!-- ******** /deal box ******** -->
<table border="0" cellpadding="0" cellspacing="0" width="290">
<tr>
<td width="40"valign="top" bgcolor="#4a7688" style="padding:10px;">
<img src="img/icon-number-four.png" width="38" height="38" alt="Icon Number Two">
</td>
<td width="220px" valign="top" bgcolor="#4a7688" style="align:left;padding:10px 10px 10px 0;">
<h2 style="color:#ffffff;font-size:20px;font-family:Arial,Helvetica,sans-serif;margin:0;"><a href="" style="color:#ffffff;text-decoration:none;">Michael Kors Brookton Bag $208</a></h2>
</td>
</tr>
<tr>
<td valign="top" colspan="2" bgcolor="#ffffff;" style="background:#ffffff;text-align:center;padding:15px 30px 30px;"><div style="margin-bottom:20px;text-align:center;"><a href=""><img src="img/temp-bag.jpg" width="160" height="180" alt="Temp Pans"></a></div>
<div style="background:#ffffff;text-align:center;"><a href=""><img src="img/btn_viewdeal.png" width="146" height="37" alt="Btn Viewdeal"></a></div>
</td>
</tr>
</table>
<!-- ******** /deal box ******** -->
</td>
<td bgcolor="#e1ecf2" width="20" style="width:20pxbackground:#e1ecf2">
</td>
<td valign="top">
<!-- ******** /deal box ******** -->
<table border="0" cellpadding="0" cellspacing="0" width="290">
<tr>
<td width="40"valign="top" bgcolor="#4a7688" style="padding:10px;">
<img src="img/icon-number-five.png" width="38" height="38" alt="Icon Number Two">
</td>
<td width="220px" valign="top" bgcolor="#4a7688" style="align:left;padding:10px 10px 10px 0;">
<h2 style="color:#ffffff;font-size:20px;font-family:Arial,Helvetica,sans-serif;margin:0;"><a href="" style="color:#ffffff;text-decoration:none;">10pc Calphalon Nonstick Set $180</a></h2>
</td>
</tr>
<tr>
<td valign="top" colspan="2" bgcolor="#ffffff;" style="background:#ffffff;text-align:center;padding:15px 30px 30px;"><div style="margin-bottom:20px;text-align:center;"><a href=""><img src="img/temp-pans.jpg" width="160" height="180" alt="Temp Pans"></a></div>
<div style="background:#ffffff;text-align:center;"><a href=""><img src="img/btn_viewdeal.png" width="146" height="37" alt="Btn Viewdeal"></a></div>
</td>
</tr>
</table>
<!-- ******** /deal box ******** -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
<tr>
<td bgcolor="#e1ecf2" height="20" style="height:20px;background:#e1ecf2"></td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter" bgcolor="#576b74" style="background:#576b74;color:#cccccc;">
<tr>
<td valign="top" class="footerContent">
<!-- // Begin Module: Standard Footer \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="440" >
<div mc:edit="std_footer" style="padding:10px 0 0 0;background:#576b74;color:#cccccc;font-size:11px;">
<em>Copyright &copy; *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
<br /><br />
This email was sent to [email protected] by:
<br />
Pashora LLC, 123 Chicago Ave, Chicago, IL 60654
</div>
<div mc:edit="std_utility" style="padding:10px 0 0 0;background:#576b74;color:#cccccc;font-size:11px;"><a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
</div>
</td>
<td valign="middle" id="social" style="padding:10px 0 0;background:#576b74;color:#cccccc;font-size:11px;">
<div mc:edit="std_social" >
<a href="*|TWITTER:PROFILEURL|*"><img src="img/icon_twitter.png" width="32" height="33" alt="follow on Twitter"></a>
<a href="*|FACEBOOK:PROFILEURL|*"><img src="img/icon_facebook.png" width="33" height="33" alt="friend on Facebook"></a> <br><br>
<a href="http://dealharbor.com/about_us">About Us</a> | <a href="http://dealharbor.com/stores">Stores</a>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Footer \\ -->
</td>
</tr>
</table>
<!-- // End Template Footer \\ -->
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment