Advanced Search

Mailchimp HTMLEmail Basic Code Template

/ Published in: Other
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html>
  4. 	<head>
  5. 		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
  6. 		<title>Announcing Cool New Stuff</title>
  7. 		<style type="text/css" media="screen">
  8.  
  9. 			/**
  10. 			* @tab Page
  11. 			* @section background
  12. 			* @tip Specify a color for all the hyperlinks in your email.
  13. 			* @theme link
  14. 			*/
  15. 			body {
  16. 				/*@editable*/ background-color: #314a66;
  17. 				margin: 0;
  18. 				padding: 0;
  19. 			}
  20.  
  21. 			/**
  22. 			* @tab Page
  23. 			* @section link style
  24. 			* @tip Specify a color for all the hyperlinks in your email.
  25. 			* @theme link
  26. 			*/
  27. 			a, a:link, a:visited {
  28. 				/*@editable*/ color: #336699;
  29. 				/*@editable*/ text-decoration: underline;
  30. 				/*@editable*/ font-weight: normal;
  31. 			}
  32.  
  33. 			/**
  34. 			* @tab Header
  35. 			* @section header bar
  36. 			* @tip Choose a set of colors that look good with the colors of your logo image or text header.
  37. 			*/
  38. 			#header {
  39. 				/*@editable*/ background-color: #314a66;
  40. 				/*@editable*/ color: #FFFFFF;
  41. 				/*@editable*/ font-family: Helvetica;
  42. 				/*@editable*/ font-weight: normal;
  43. 				/*@editable*/ text-align: center;
  44. 			}
  45.  
  46. 			/**
  47. 			* @tab Header
  48. 			* @section primary heading
  49. 			* @tip Choose a set of colors that look good with the colors of your logo image or text header.
  50. 			*/
  51. 			#header .primary-heading {
  52. 				/*@editable*/ font-size: 40px;
  53. 				/*@editable*/ font-weight: bold;
  54. 				/*@editable*/ color: #FFFFFF;
  55. 				/*@editable*/ font-family: Helvetica;
  56. 				/*@editable*/ margin: 0;
  57. 			}
  58.  
  59. 			/**
  60. 			* @tab Header
  61. 			* @section secondary heading
  62. 			* @tip Choose a set of colors that look good with the colors of your logo image or text header.
  63. 			*/
  64. 			#header .secondary-heading {
  65. 				/*@editable*/ color:#EEEEEE;
  66. 				/*@editable*/ margin-top: 7px;
  67. 				/*@editable*/ font-size: 14px;
  68. 				/*@editable*/ font-weight: normal;
  69. 			}
  70.  
  71. 			/**
  72. 			* @tab Body
  73. 			* @section content area
  74. 			* @tip This is the default text style for the body of your email.
  75. 			* @theme content
  76. 			*/
  77. 			#content {
  78. 				margin: 0;
  79. 				/*@editable*/ font-size: 12px;
  80. 				/*@editable*/ color: #555555;
  81. 				/*@editable*/ font-style: normal;
  82. 				/*@editable*/ font-weight: normal;
  83. 				/*@editable*/ font-family: Helvetica;
  84. 				/*@editable*/ line-height: 1.6em;
  85. 				/*@editable*/ padding: 0px 30px 0;
  86. 			}
  87.  
  88. 			/**
  89. 			* @tab Body
  90. 			* @section title
  91. 			* @tip This is the byline text that appears immediately underneath your titles/headlines.
  92. 			* @theme subtitle
  93. 			*/
  94. 			#content .title {
  95. 				/*@editable*/ font-size: 20px;
  96. 				/*@editable*/ font-weight: bold;
  97. 				/*@editable*/ color: #333333;
  98. 				/*@editable*/ font-style: normal;
  99. 				/*@editable*/ font-family: Helvetica;
  100. 				/*@editable*/ margin: 15px 0 10px 0;
  101. 				/*@editable*/ text-align: left;
  102. 				padding: 0;
  103. 			}
  104.  
  105. 			/**
  106. 			* @tab Body
  107. 			* @section subtitle
  108. 			* @tip This is the byline text that appears immediately underneath your titles/headlines.
  109. 			* @theme subtitle
  110. 			*/
  111. 			#content .subTitle {
  112. 				/*@editable*/ font-size: 16px;
  113. 				/*@editable*/ font-weight: bold;
  114. 				/*@editable*/ color: #333333;
  115. 				/*@editable*/ font-style: normal;
  116. 				/*@editable*/ font-family: Helvetica;
  117. 				/*@editable*/ margin: 15px 0 5px 0;
  118. 				/*@editable*/ text-align: left;
  119. 				padding: 0;
  120. 			}
  121.  
  122. 			/**
  123. 			* @tab Body
  124. 			* @section copy
  125. 			* @tip This is the byline text that appears immediately underneath your titles/headlines.
  126. 			* @theme subtitle
  127. 			*/
  128. 			#content .copy {
  129. 				/*@editable*/ margin:0 0 15px 0;
  130. 				/*@editable*/ line-height:1.6em;
  131. 				/*@editable*/ font-size:12px;
  132. 			}
  133.  
  134. 			/**
  135. 			* @tab Body
  136. 			* @section lower links
  137. 			* @tip This is the byline text that appears immediately underneath your titles/headlines.
  138. 			* @theme subtitle
  139. 			*/
  140. 			#footer_links {
  141. 				/*@editable*/ text-align:center;
  142. 				/*@editable*/ padding-top:20px;
  143. 				/*@editable*/ font-size:12px;
  144. 			}
  145. 			/**
  146. 			* @tab Footer
  147. 			* @section footer
  148. 			* @tip You might give your footer a light background color and separate it with a top border
  149. 			* @theme footer
  150. 			*/
  151. 			#footer {
  152. 				background-color: #314a66;
  153. 				/*@editable*/ padding: 20px;
  154. 				/*@editable*/ font-size: 10px;
  155. 				/*@editable*/ color: #ccc;
  156. 				/*@editable*/ line-height: 150%;
  157. 				/*@editable*/ font-family: Verdana;
  158. 				/*@editable*/ text-align:center;
  159. 			}
  160.  
  161. 			/**
  162. 			* @tab Footer
  163. 			* @section link style
  164. 			* @tip Specify a color for your footer hyperlinks.
  165. 			* @theme link_footer
  166. 			*/
  167. 			#footer a {
  168. 				/*@editable*/ color: #cc6757;
  169. 				/*@editable*/ text-decoration: underline;
  170. 				/*@editable*/ font-weight: normal
  171. 			}
  172.  
  173. 			/* Static Styles */
  174. 			#layout{margin:0px auto;text-align:left;border-collapse:collapse;background:#ffffff;}
  175. 			.rounded{margin:0;padding:0;line-height:8px;}
  176. 			#social strong{padding:0 10px;}
  177. 			#social{line-height:1.5em;}
  178. 			#social img{margin-right:3px;margin-top:5px;position:relative;top:3px;}
  179. 			#social a{text-decoration:none;}
  180. 			#share{margin-top:15px;}
  181. 			#can-spam{width:70%;margin:auto;}
  182. 			#can-spam td{padding:10px;text-align:left;font-size:12px;color:#ddd;}
  183. 			#copyright{font-size:10px;font-style:italic;}
  184. 			#social,#contact,#share{margin-bottom:20px;font-size:11px;}
  185. 			#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;}
  186. 			#product-table{display:block;border:1px dotted #ddd;border-left:0;border-right:0;margin:15px 0;padding-bottom:15px;}
  187. 			#product-table h3{font-size:12px;}
  188. 			#product-table p.copy{font-size:11px;}
  189. 			#footer_links{}
  190. 			#product-table td{padding-right:8px;}
  191.  
  192. 		</style>
  193. 	</head>
  194. 	<body>
  195. 		<table id="layout" border="0" cellspacing="0" cellpadding="0" width="757">
  196. 			<tr>
  197. 				<td id="header" style="background:#314a66 url(http://gallery.mailchimp.com/799706b3fccc214a076b1ad13/images/header.9.jpg) no-repeat; height:164px;">
  198. 					<h1 class="primary-heading" mc:edit="email-header">
  199. 						Announcing New Features
  200. 					</h1>
  201. 					<h2 class="secondary-heading" mc:edit="copy">
  202. 						We've just released a slew of awesome new features on our site...
  203. 					</h2>
  204. 				</td>
  205. 			</tr>
  206. 			<tr>
  207. 				<td id="content">
  208. 					<table id="content-grid" width="100%">
  209. 						<tr>
  210. 							<td style="vertical-align:top; padding-right:30px;" width="550" valign="top" mc:edit="">
  211. 								<h1 class="title">
  212. 									Super Awesome News!
  213. 								</h1>
  214. 								<p class="copy">
  215. 									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.
  216. 								</p>
  217. 								<h2 class="subTitle">
  218. 									Other Stuff
  219. 								</h2>
  220. 								<p class="copy">
  221. 									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.
  222. 								</p>
  223. 								<p class="copy">
  224. 									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.
  225. 								</p>
  226. 								<p class="copy">
  227. 									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.
  228. 								</p>
  229. 								<p class="copy">
  230. 									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.
  231. 								</p>
  232. 								<p class="copy">
  233. 									Interactively matrix business e-commerce for intuitive intellectual capital.
  234. 								</p>
  235. 							</td>
  236. 							<td style="vertical-align:top; padding-top:20px;" width="180" valign="top">
  237. 								<div id="social" mc:edit="social">
  238. 									<h2>
  239. 										Connect with us:
  240. 									</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 />
  241. 									<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 />
  242. 									<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 />
  243. 									<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>
  244. 								</div>
  245. 								<div id="share" mc:edit="share">
  246. 									<h2>
  247. 										Share this email:
  248. 									</h2>*|MC:SHARE|*
  249. 								</div>
  250. 								<div id="contact" mc:edit="contact">
  251. 									<h2>
  252. 										Contact Us:
  253. 									</h2>*|HTML:LIST_ADDRESS_HTML|*
  254. 								</div>
  255. 							</td>
  256. 						</tr>
  257. 						<tr>
  258. 							<td colspan="2" id="footer_links" mc:edit="footer_links">
  259. 								<p>
  260. 									<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>
  261. 								</p>
  262. 							</td>
  263. 						</tr>
  264. 					</table>
  265. 				</td>
  266. 			</tr>
  267. 			<tr>
  268. 				<td id="footer" mc:edit="footer">
  269. 					<p>
  270. 						*|LIST:DESCRIPTION|*
  271. 					</p>*|REWARDS|*
  272. 					<p id="copyright">
  273. 						Copyright (C) 2009 *|LIST:COMPANY|* All rights reserved.
  274. 					</p>
  275. 				</td>
  276. 			</tr>
  277. 		</table>
  278. 	</body>
  279. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.