Skip to content

Instantly share code, notes, and snippets.

@Flobin
Last active December 18, 2015 21:48
Show Gist options
  • Save Flobin/5849501 to your computer and use it in GitHub Desktop.
Save Flobin/5849501 to your computer and use it in GitHub Desktop.
HTML email for VIA stedebouw
<!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, initial-scale=1.0"/>
<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">
/* Based on The MailChimp Reset INLINE: Yes. */
/* Client-specific Styles */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
/* Forces Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
/* End reset */
/* Some sensible defaults for images
Bring inline: Yes. */
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}
/* Yahoo paragraph fix
Bring inline: Yes. */
p {margin: 1em 0;}
/* Hotmail header color reset
Bring inline: Yes. */
h1, .h1 {color: #ff0000 !important;}
h2, .h2 {color: #ffffff !important;}
h3, .h3, h4, .h4, h5, .h5, h6, .h6 {color: #000000 !important;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: #ff0000 !important;}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
color: red !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
/* Outlook 07, 10 Padding issue fix
Bring inline: No.*/
table td {border-collapse: collapse;}
/* Remove spacing around Outlook 07, 10 tables
Bring inline: Yes */
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
/* Styling your links has become much simpler with the new Yahoo. In fact, it falls in line with the main credo of styling in email and make sure to bring your styles inline. Your link colors will be uniform across clients when brought inline.
Bring inline: Yes. */
a {color: #ff0000;}
/**
* @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:#FEFEFE;
}
html, body, table, tr, td, div, p, a, h1, h2, h3, h4, h5, h6, span {
font-family:"Gill Sans", "Gill Sans MT", Verdana, Geneva, Tahoma, sans-serif;
}
/**
* @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.
* @theme heading1
*/
h1, .h1{
/*@editable*/ color:#FF0000;
display:block;
/*@editable*/ font-family:"Gill Sans", "Gill Sans MT", Verdana, Geneva, Tahoma, sans-serif;
/*@editable*/ font-size:34px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:34px;
/*@editable*/ text-align:right;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @theme heading2
*/
h2, .h2{
/*@editable*/ color:#FFFFFF;
display:block;
/*@editable*/ font-family:"Gill Sans", "Gill Sans MT", Verdana, Geneva, Tahoma, sans-serif;
/*@editable*/ font-size:20px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:24px;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @theme heading3
*/
h3, .h3{
/*@editable*/ color:#202020;
display:block;
/*@editable*/ font-family:"Gill Sans", "Gill Sans MT", Verdana, Geneva, Tahoma, sans-serif;
/*@editable*/ font-size:16px;
/*@editable*/ font-weight:bold;
/*@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.
* @theme heading4
*/
h4, .h4{
/*@editable*/ color:#202020;
display:block;
/*@editable*/ font-family:"Gill Sans", "Gill Sans MT", Verdana, Geneva, Tahoma, sans-serif;
/*@editable*/ font-size:15px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ text-align:left;
}
.header {
width: 600px;
height: 140px!important;
}
.logo {
width: 140px;
height: 140px;
}
/**
* @tab Header
* @section title
* @tip Set the styling for your email's title.
*/
.titel {
/*@editable*/ color: #ff0000;
/*@editable*/ background-color: #000000;
padding-top: 0;
padding-right: 7px;
padding-bottom: 0;
padding-left: 7px;
width: 446px;
height: 126px;
}
.subtitel {
color: #ffffff;
padding: 7px;
width: 586px;
}
/**
* @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:"Gill Sans", "Gill Sans MT", Verdana, Geneva, Tahoma, sans-serif;
/*@editable*/ font-size:10px;
/*@editable*/ line-height:100%;
/*@editable*/ text-align:center;
padding: 7px;
width: 586px;
}
/**
* @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{
/*@editable*/ color:#ff0000;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.banner {
width: 600px!important;
height: 222px!important;
}
.bannerimg {
width: 600px!important;
height: 222px!important;
}
/**
* @tab Content
* @section content general
* @tip Set the styling for your email's text.
*/
.content {
/*@editable*/ color:#505050;
/*@editable*/ font-family:"Gill Sans", "Gill Sans MT", Verdana, Geneva, Tahoma, sans-serif;
/*@editable*/ font-size:14px;
/*@editable*/ line-height:150%;
/*@editable*/ text-align:left;
padding: 7px;
width: 586px;
}
/**
* @tab Content
* @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.
*/
.content div a:link, .content div a:visited{
/*@editable*/ color:#ff0000;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.bodyContent img{
display:inline;
margin-bottom:10px;
}
/**
* @tab Footer
* @section social
* @tip Set the background color and border for your email's footer .
*/
.social {
/*@editable*/ font-size:12px;
padding: 7px;
width: 586px;
}
/**
* @tab Footer
* @section general footer
* @tip Set the background color and border for your email's footer .
*/
.footer {
/*@editable*/ background-color:#000000;
/*@editable*/ color:#999999;
}
.sponsor {
padding: 7px;
width: 286px;
background-color: #000000;
}
.sponsorImg {
background-color: #000000;
}
.bbd {
background-color: #000000;
}
.buroLubbers {
background-color: #000000;
}
#afzender{
width: 370px;
padding: 7px;
font-size: 10px;
}
/**
* @tab Footer
* @section utility bar style
* @tip Set the background color and border for your email's footer utility bar.
*/
#utility{
/*@editable*/ background-color:#FEFEFE;
/*@editable*/ border-top: none;
}
/**
* @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 {
width: 170px;
}
#monkeyRewards img{
max-width:160px;
}
/***************************************************
****************************************************
MOBILE TARGETING
****************************************************
***************************************************/
@media only screen and (max-device-width: 480px) {
/* Part one of controlling phone number linking for mobile. */
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #ff0000; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #ff0000 !important;
pointer-events: auto;
cursor: default;
}
}
/* More Specific Targeting */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* You guessed it, ipad (tablets, smaller screens, etc) */
/* repeating for the ipad */
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #ff0000; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #ff0000 !important;
pointer-events: auto;
cursor: default;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* Put your iPhone 4g styles in here */
}
/* Android targeting */
@media only screen and (-webkit-device-pixel-ratio:.75){
/* Put CSS for low density (ldpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1){
/* Put CSS for medium density (mdpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1.5){
/* Put CSS for high density (hdpi) Android layouts in here */
}
/* end Android targeting */
</style>
<!-- Targeting Windows Mobile -->
<!--[if IEMobile 7]>
<style type="text/css">
</style>
<![endif]-->
<!-- ***********************************************
****************************************************
END MOBILE TARGETING
****************************************************
************************************************ -->
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
</style>
<![endif]-->
</head>
<body>
<!-- Wrapper/Container Table: Use a wrapper table to control the width and the background color consistently of your email. Use this approach instead of setting attributes on the body tag. -->
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tr>
<td valign="top">
<!-- Tables are the most common way to format your email consistently. Set your table widths inside cells and in most cases reset cellpadding, cellspacing, and border to zero. Use nested tables as a way to space effectively in your message. -->
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
<tr>
<td width="140">
</td>
<td width="460">
</td>
</tr>
<tr>
<td class="preheaderContent" width="600" colspan="2">
<!-- // Begin Module: Standard Preheader \\ -->
<div mc:edit="std_preheader_links">
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
Wordt deze email niet correct weergegeven? <a href="*|ARCHIVE|*" target="_blank">Bekijk hem in uw browser</a>.<!-- *|END:IF|* -->
</div>
<!-- // End Module: Standard Preheader \\ -->
</td>
</tr>
<tr class="header" bgcolor="#000000">
<td width="140" class="logo" bgcolor="#000000">
<a href="//viastedebouw.nl/">
<img src="http://i0.wp.com/viastedebouw.nl/wp-content/uploads/2013/04/via_logo_normaal_140.png" width="140" height="140" class="image_fix" alt="VIA Stedebouw logo" />
</td>
<td width="446" class="titel" bgcolor="#000000">
<div mc:edit="mailTitle">
<h1 class="h1">VIA Newsflash Maand Jaar</h1>
</div>
</td>
</tr>
<tr>
<td class="banner" width="600" colspan="2">
<!-- // Begin Module: Standard Header Image \\ -->
<img src="http://placehold.it/851x315" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" height="222" width="600" class="image_fix bannerimg" />
<!-- // End Module: Standard Header Image \\ -->
</td>
</tr>
<tr>
<td width="586" class="subtitel" bgcolor="#ff0000" colspan="2">
<div mc:edit="title00" mc:hideable="">
<span class="h2" style="margin-top: 0px!important;">Titel</span>
</div>
</td>
</tr>
<tr>
<td width="586" colspan="2">
<div mc:edit="std_content00" mc:hideable="" class="content">
<strong>Getting started:</strong> Customize your template by clicking on the style editor tabs up above. Set your fonts, colors, and styles. After setting your styling is all done you can click here in this area, delete the text, and start adding your own awesome content!
<br />
<br />
After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to <a href="http://www.mailchimp.com/kb/article/im-using-the-style-designer-and-i-cant-get-my-formatting-to-change" target="_blank">get rid of styling on a bit of text</a>, but having trouble doing it? Just use the "clear styles" button to strip the text of any formatting and reset your style.
</div>
</td>
</tr>
<tr>
<td width="586" class="subtitel" bgcolor="#ff0000" colspan="2">
<div mc:edit="title01" mc:hideable="">
<span class="h2" style="margin-top: 0px!important;">Titel</span>
</div>
</td>
</tr>
<tr>
<td width="586" colspan="2">
<div mc:edit="std_content01" mc:hideable="" class="content">
<strong>Getting started:</strong> Customize your template by clicking on the style editor tabs up above. Set your fonts, colors, and styles. After setting your styling is all done you can click here in this area, delete the text, and start adding your own awesome content!
<br />
<br />
After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to <a href="http://www.mailchimp.com/kb/article/im-using-the-style-designer-and-i-cant-get-my-formatting-to-change" target="_blank">get rid of styling on a bit of text</a>, but having trouble doing it? Just use the "clear styles" button to strip the text of any formatting and reset your style.
</div>
</td>
</tr>
<tr>
<td width="586" class="subtitel" bgcolor="#ff0000" colspan="2">
<div mc:edit="title02" mc:hideable="">
<span class="h2" style="margin-top: 0px!important;">Titel</span>
</div>
</td>
</tr>
<tr>
<td width="586" colspan="2">
<div mc:edit="std_content02" mc:hideable="" class="content">
<strong>Getting started:</strong> Customize your template by clicking on the style editor tabs up above. Set your fonts, colors, and styles. After setting your styling is all done you can click here in this area, delete the text, and start adding your own awesome content!
<br />
<br />
After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to <a href="http://www.mailchimp.com/kb/article/im-using-the-style-designer-and-i-cant-get-my-formatting-to-change" target="_blank">get rid of styling on a bit of text</a>, but having trouble doing it? Just use the "clear styles" button to strip the text of any formatting and reset your style.
</div>
</td>
</tr>
<tr>
<td width="586" class="subtitel" bgcolor="#ff0000" colspan="2">
<div mc:edit="title03" mc:hideable="">
<span class="h2" style="margin-top: 0px!important;">Titel</span>
</div>
</td>
</tr>
<tr>
<td width="586" colspan="2">
<div mc:edit="std_content03" mc:hideable="" class="content">
<strong>Getting started:</strong> Customize your template by clicking on the style editor tabs up above. Set your fonts, colors, and styles. After setting your styling is all done you can click here in this area, delete the text, and start adding your own awesome content!
<br />
<br />
After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to <a href="http://www.mailchimp.com/kb/article/im-using-the-style-designer-and-i-cant-get-my-formatting-to-change" target="_blank">get rid of styling on a bit of text</a>, but having trouble doing it? Just use the "clear styles" button to strip the text of any formatting and reset your style.
</div>
</td>
</tr>
<tr>
<td width="586" class="subtitel" bgcolor="#ff0000" colspan="2">
<div mc:edit="title04" mc:hideable="">
<span class="h2" style="margin-top: 0px!important;">Titel</span>
</div>
</td>
</tr>
<tr>
<td width="586" colspan="2">
<div mc:edit="std_content04" mc:hideable="" class="content">
<strong>Getting started:</strong> Customize your template by clicking on the style editor tabs up above. Set your fonts, colors, and styles. After setting your styling is all done you can click here in this area, delete the text, and start adding your own awesome content!
<br />
<br />
After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to <a href="http://www.mailchimp.com/kb/article/im-using-the-style-designer-and-i-cant-get-my-formatting-to-change" target="_blank">get rid of styling on a bit of text</a>, but having trouble doing it? Just use the "clear styles" button to strip the text of any formatting and reset your style.
</div>
</td>
</tr>
<tr>
<td class="social" colspan="2">
<div mc:edit="std_social">
// Do you have any questions, or would you like to talk to us? <br />
// VIA is open daily from 12:30 - 13:30. Find us in Vertigo, on floor 5!<br />
// Don't forget our <a href="*|TWITTER:PROFILEURL|*">Twitter</a>, <a href="*|FACEBOOK:PROFILEURL|*">Facebook</a>, and <a href="http://viastedebouw.nl">website</a>. <a href="*|FORWARD|*">Forward deze email</a>.<br />
// VIA is sponsored by:
</div>
</td>
</tr>
<tr bgcolor="#000000">
<td valign="middle" width="286" class="sponsor" bgcolor="#0000000">
<a href="http://www.burolubbers.nl/"><img src="http://viastedebouw.nl/wp-content/uploads/2013/04/burolubbers_wit.png" class="buroLubbers sponsorImg" height="64" width="250" alt="Buro Lubbers"></a>
</td>
<td valign="top" width="286" class="sponsor" bgcolor="#0000000">
<a href="http://www.bouwkundebedrijvendagen.nl/"><img src="http://viastedebouw.nl/wp-content/uploads/2013/04/Logo-BBD-witopzwart-CMYK.png" class="bbd sponsorImg" height="109" width="299" alt="Bouwkunde Bedrijvendagen"></a>
</td>
</tr>
<tr bgcolor="#000000">
<td valign="top" width="370" bgcolor="#0000000" class="footer" id="afzender">
<div mc:edit="std_footer">
*|IF:LIST|*
<em>Copyright &copy; *|CURRENT_YEAR|* *|LIST:COMPANY|*, Alle rechten voorbehouden.</em>
<br>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
*|LIST:DESCRIPTION|*
<br>
<strong>Ons adres is:</strong>
<br>
*|HTML:LIST_ADDRESS_HTML|*
<br>
<!-- *|END:IF|* -->
*|ELSE:|*
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<em>Copyright &copy; *|CURRENT_YEAR|* *|USER:COMPANY|*, Alle rechten voorbehouden.</em>
<br>
<strong>Ons adres is:</strong>
<br>
*|USER:ADDRESS_HTML|*
<!-- *|END:IF|* -->
*|END:IF|*
</div>
</td>
<td valign="top" width="170" id="monkeyRewards" class="footer" bgcolor="#0000000">
<br>
<div mc:edit="monkeyrewards">
*|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
</div>
<br>
</td>
</tr>
<tr>
<td valign="middle" id="utility" width="600" colspan="2">
<div mc:edit="std_utility">
&nbsp;<a href="*|UNSUB|*">Uitschrijven</a> // <a href="*|UPDATE_PROFILE|*">Voorkeuren wijzigen</a><!-- *|IFNOT:ARCHIVE_PAGE|* --> // <a href="*|ARCHIVE|*">Deze email in uw browser bekijken</a><!-- *|END:IF|* -->&nbsp;
</div>
</td>
</tr>
</table>
<!-- End example table -->
</td>
</tr>
</table>
<!-- End of wrapper table -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment