Return to Snippet

Revision: 18507
at October 1, 2009 06:59 by lister


Initial Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Announcing Cool New Stuff</title>
		<style type="text/css" media="screen">

			/**
			* @tab Page
			* @section background
			* @tip Specify a color for all the hyperlinks in your email.
			* @theme link
			*/
			body {
				/*@editable*/ background-color: #314a66;
				margin: 0;
				padding: 0;
			}

			/**
			* @tab Page
			* @section link style
			* @tip Specify a color for all the hyperlinks in your email.
			* @theme link
			*/
			a, a:link, a:visited {
				/*@editable*/ color: #336699;
				/*@editable*/ text-decoration: underline;
				/*@editable*/ font-weight: normal;
			}

			/**
			* @tab Header
			* @section header bar
			* @tip Choose a set of colors that look good with the colors of your logo image or text header.
			*/
			#header {
				/*@editable*/ background-color: #314a66;
				/*@editable*/ color: #FFFFFF;
				/*@editable*/ font-family: Helvetica;
				/*@editable*/ font-weight: normal;
				/*@editable*/ text-align: center;
			}

			/**
			* @tab Header
			* @section primary heading
			* @tip Choose a set of colors that look good with the colors of your logo image or text header.
			*/
			#header .primary-heading {
				/*@editable*/ font-size: 40px;
				/*@editable*/ font-weight: bold;
				/*@editable*/ color: #FFFFFF;
				/*@editable*/ font-family: Helvetica;
				/*@editable*/ margin: 0;
			}

			/**
			* @tab Header
			* @section secondary heading
			* @tip Choose a set of colors that look good with the colors of your logo image or text header.
			*/
			#header .secondary-heading {
				/*@editable*/ color:#EEEEEE;
				/*@editable*/ margin-top: 7px;
				/*@editable*/ font-size: 14px;
				/*@editable*/ font-weight: normal;
			}

			/**
			* @tab Body
			* @section content area
			* @tip This is the default text style for the body of your email.
			* @theme content
			*/
			#content {
				margin: 0;
				/*@editable*/ font-size: 12px;
				/*@editable*/ color: #555555;
				/*@editable*/ font-style: normal;
				/*@editable*/ font-weight: normal;
				/*@editable*/ font-family: Helvetica;
				/*@editable*/ line-height: 1.6em;
				/*@editable*/ padding: 0px 30px 0;
			}

			/**
			* @tab Body
			* @section title
			* @tip This is the byline text that appears immediately underneath your titles/headlines.
			* @theme subtitle
			*/
			#content .title {
				/*@editable*/ font-size: 20px;
				/*@editable*/ font-weight: bold;
				/*@editable*/ color: #333333;
				/*@editable*/ font-style: normal;
				/*@editable*/ font-family: Helvetica;
				/*@editable*/ margin: 15px 0 10px 0;
				/*@editable*/ text-align: left;
				padding: 0;
			}

			/**
			* @tab Body
			* @section subtitle
			* @tip This is the byline text that appears immediately underneath your titles/headlines.
			* @theme subtitle
			*/
			#content .subTitle {
				/*@editable*/ font-size: 16px;
				/*@editable*/ font-weight: bold;
				/*@editable*/ color: #333333;
				/*@editable*/ font-style: normal;
				/*@editable*/ font-family: Helvetica;
				/*@editable*/ margin: 15px 0 5px 0;
				/*@editable*/ text-align: left;
				padding: 0;
			}

			/**
			* @tab Body
			* @section copy
			* @tip This is the byline text that appears immediately underneath your titles/headlines.
			* @theme subtitle
			*/
			#content .copy {
				/*@editable*/ margin:0 0 15px 0;
				/*@editable*/ line-height:1.6em;
				/*@editable*/ font-size:12px;
			}

			/**
			* @tab Body
			* @section lower links
			* @tip This is the byline text that appears immediately underneath your titles/headlines.
			* @theme subtitle
			*/
			#footer_links {
				/*@editable*/ text-align:center;
				/*@editable*/ padding-top:20px;
				/*@editable*/ font-size:12px;
			}
			/**
			* @tab Footer
			* @section footer
			* @tip You might give your footer a light background color and separate it with a top border
			* @theme footer
			*/
			#footer {
				background-color: #314a66;
				/*@editable*/ padding: 20px;
				/*@editable*/ font-size: 10px;
				/*@editable*/ color: #ccc;
				/*@editable*/ line-height: 150%;
				/*@editable*/ font-family: Verdana;
				/*@editable*/ text-align:center;
			}

			/**
			* @tab Footer
			* @section link style
			* @tip Specify a color for your footer hyperlinks.
			* @theme link_footer
			*/
			#footer a {
				/*@editable*/ color: #cc6757;
				/*@editable*/ text-decoration: underline;
				/*@editable*/ font-weight: normal
			}

			/* Static Styles */
			#layout{margin:0px auto;text-align:left;border-collapse:collapse;background:#ffffff;}
			.rounded{margin:0;padding:0;line-height:8px;}
			#social strong{padding:0 10px;}
			#social{line-height:1.5em;}
			#social img{margin-right:3px;margin-top:5px;position:relative;top:3px;}
			#social a{text-decoration:none;}
			#share{margin-top:15px;}
			#can-spam{width:70%;margin:auto;}
			#can-spam td{padding:10px;text-align:left;font-size:12px;color:#ddd;}
			#copyright{font-size:10px;font-style:italic;}
			#social,#contact,#share{margin-bottom:20px;font-size:11px;}
			#social h2,#contact h2,#share h2{margin-top:0;text-transform:uppercase;font-size:12px;letter-spacing:1px;border-bottom:1px dotted #ccc;color:#333;margin-bottom:10px;}
			#product-table{display:block;border:1px dotted #ddd;border-left:0;border-right:0;margin:15px 0;padding-bottom:15px;}
			#product-table h3{font-size:12px;}
			#product-table p.copy{font-size:11px;}
			#footer_links{}
			#product-table td{padding-right:8px;}

		</style>
	</head>
	<body>
		<table id="layout" border="0" cellspacing="0" cellpadding="0" width="757">
			<tr>
				<td id="header" style="background:#314a66 url(http://gallery.mailchimp.com/799706b3fccc214a076b1ad13/images/header.9.jpg) no-repeat; height:164px;">
					<h1 class="primary-heading" mc:edit="email-header">
						Announcing New Features
					</h1>
					<h2 class="secondary-heading" mc:edit="copy">
						We've just released a slew of awesome new features on our site...
					</h2>
				</td>
			</tr>
			<tr>
				<td id="content">
					<table id="content-grid" width="100%">
						<tr>
							<td style="vertical-align:top; padding-right:30px;" width="550" valign="top" mc:edit="">
								<h1 class="title">
									Super Awesome News!
								</h1>
								<p class="copy">
									Uniquely deploy excellent services vis-a-vis emerging architectures. Continually conceptualize orthogonal partnerships through client-centered portals. Progressively harness focused strategic theme areas with e-business technologies. Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec.
								</p>
								<h2 class="subTitle">
									Other Stuff
								</h2>
								<p class="copy">
									Assertively productivate open-source meta-services and pandemic collaboration and idea-sharing. Conveniently integrate emerging growth strategies through robust data. Synergistically optimize cross-unit testing procedures without vertical channels. Conveniently parallel task interactive action items without team building web-readiness. Efficiently reintermediate customer directed catalysts for change whereas revolutionary methods of empowerment. Objectively redefine resource sucking technologies before ubiquitous schemas.
								</p>
								<p class="copy">
									Progressively formulate timely technology after backend growth strategies. Authoritatively innovate superior niche markets before goal-oriented channels. Collaboratively pursue transparent platforms and error-free e-business. Dynamically plagiarize cross-platform methodologies without goal-oriented solutions. Energistically exploit user-centric benefits vis-a-vis compelling metrics. Dramatically plagiarize robust services before collaborative meta-services.
								</p>
								<p class="copy">
									Assertively unleash competitive total linkage rather than robust channels. Appropriately redefine efficient core competencies for distinctive expertise. Distinctively underwhelm market-driven relationships without an expanded array of alignments.
								</p>
								<p class="copy">
									Interactively drive dynamic deliverables vis-a-vis interactive potentialities. Continually facilitate vertical models rather than extensible expertise. Phosfluorescently supply customized systems before best-of-breed total linkage.
								</p>
								<p class="copy">
									Interactively matrix business e-commerce for intuitive intellectual capital.
								</p>
							</td>
							<td style="vertical-align:top; padding-top:20px;" width="180" valign="top">
								<div id="social" mc:edit="social">
									<h2>
										Connect with us:
									</h2><a rel="external" title="Follow us on Twitter!" href="http://twitter.com/mailchimp" target="_blank"><img width="16" height="16" border="0" alt="Follow us on Twitter!" src="http://www.mailchimp.com/img/icons/Twitter-24x24.png" />Follow us on Twitter</a><br />
									<a rel="external" title="Follow us on Twitter!" href="http://www.facebook.com/pages/MailChimp/43929265776" target="_blank"><img width="16" height="16" border="0" alt="Follow us on Facebook!" src="http://www.mailchimp.com/img/icons/FaceBook-24x24.png" />Become a fan</a><br />
									<a title="Read the MailChimp blog" href="http://www.mailchimp.com/blog/"><img width="16" height="16" border="0" alt="Read the MailChimp blog" src="http://www.mailchimp.com/img/icons/rss.png" />Read our blog</a><br />
									<a rel="external" title="Learn MailChimp on iTunes" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=306802337" target="_blank"><img width="16" height="16" border="0" alt="Learn MailChimp on iTunes" src="http://www.mailchimp.com/img/icons/itunes.png" />Watch our podcast</a>
								</div>
								<div id="share" mc:edit="share">
									<h2>
										Share this email:
									</h2>*|MC:SHARE|*
								</div>
								<div id="contact" mc:edit="contact">
									<h2>
										Contact Us:
									</h2>*|HTML:LIST_ADDRESS_HTML|*
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" id="footer_links" mc:edit="footer_links">
								<p>
									<a href="*|ARCHIVE|*" class="adminText">view email in browser</a> | <a href="*|UNSUB|*">unsubscribe</a> | <a href="*|UPDATE_PROFILE|*">update your profile</a> | <a href="*|FORWARD|*">forward to a friend</a>
								</p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td id="footer" mc:edit="footer">
					<p>
						*|LIST:DESCRIPTION|*
					</p>*|REWARDS|*
					<p id="copyright">
						Copyright (C) 2009 *|LIST:COMPANY|* All rights reserved.
					</p>
				</td>
			</tr>
		</table>
	</body>
</html>

Initial URL


Initial Description


Initial Title
Mailchimp HTMLEmail Basic Code Template

Initial Tags
email, textmate, template, html

Initial Language
Other