Mailchimp HTMLEmail Basic Code Template


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



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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.