Skip to content

Instantly share code, notes, and snippets.

@stefangrund

stefangrund/shortfilms_newsletter.html

Last active August 29, 2015 14:17
Show Gist options
  • Save stefangrund/cd67dcfb974e13eaaff7 to your computer and use it in GitHub Desktop.
Save stefangrund/cd67dcfb974e13eaaff7 to your computer and use it in GitHub Desktop.
Download ZIP
Mailchimp-Template for the http://shortfil.ms Newsletter
Raw
shortfilms_newsletter.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
/* ========== CLIENT-SPECIFIC STYLES ========== */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .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%;} /* Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* ========== RESET STYLES ========== */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none; display:block;}
table{border-collapse:collapse !important;}
body, #bodyTable, .bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
/* ========== Page Styles ========== */
.bodyCell{
padding:20px;
}
.tableContainer{
width:600px;
}
body, #bodyTable{
background-color:#1A1719;
}
em {
color: #ffffff;
}
h1, h2 {
color:#ffffff !important;
display:block;
font-family:Helvetica;
font-style:normal;
font-weight:bold;
line-height:100%;
letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
font-size:20px;
}
/* ========== Header Styles ========== */
#templatePreheader{
background-color:#433b41;
}
.preheaderContent{
color:#736670;
font-family:Helvetica;
font-size:10px;
line-height:125%;
text-align:left;
}
.preheaderContent a:link, .preheaderContent a:visited, /* Yahoo! Mail Override */ .preheaderContent a .yshortcuts /* Yahoo! Mail Override */{
color:#736670;
font-weight:normal;
text-decoration:underline;
}
#templateHeader{
background-color:#1A1719;
border-top:0;
border-bottom:0;
}
.headerContent{
color:#505050;
font-family:Helvetica;
font-size:20px;
font-weight:bold;
line-height:100%;
padding-top:0;
padding-right:0;
padding-bottom:0;
padding-left:0;
text-align:left;
vertical-align:middle;
}
.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
color:#EB4102;
font-weight:normal;
text-decoration:underline;
}
#headerImage{
height:auto;
max-width:600px;
}
/* ========== Body Styles ========== */
#templateBody{
background-color:#433b41;
border-top:0;
border-bottom: 5px #322c31 solid;
}
.bodyContent {
color:#ffffff;
font-family:Helvetica;
font-size:14px;
line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:0px;
padding-left:20px;
text-align:left;
}
.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */ {
color: #389bd1;
font-weight:normal;
text-decoration:underline;
}
.bodyContent h1 a:link, .bodyContent h1 a:visited {
font-size:20px;
color: #fff;
text-decoration: none;
font-weight: bold;
}
.bodyContent img{
display:inline;
height:auto;
max-width:560px;
}
.filmContent a:link, .filmContent a:visited, /* Yahoo! Mail Override */ .filmContent a .yshortcuts /* Yahoo! Mail Override */ {
color: #389bd1;
font-weight: normal;
text-decoration:underline;
}
.filmContent h2, .filmContent h2 a:link, .filmContent h2 a:visited {
color: #389bd1;
font-weight:bold;
text-decoration: underline;
margin: 10px 0 0 0;
}
.filmTable {
border-bottom: 5px #322c31 solid;
margin: 0 0 20px 0;
}
.filmTable img{
display:inline;
height:auto;
max-width:600px;
}
.filmContent {
color:#ffffff;
font-family:Helvetica;
font-size:14px;
line-height:150%;
background-color: #433b41;
padding: 10px 20px 5px 20px;
}
.filmText p a {
color: color: #389bd1;;
}
#canspamBarWrapper img {
display: inline;
}
#canspamBarWrapper em {
color: #606060;
}
/* ========== MOBILE STYLES ========== */
@media only screen and (max-width: 480px){
/* ========== CLIENT-SPECIFIC MOBILE STYLES ========== */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
/* ========== MOBILE RESET STYLES ========== */
.bodyCell{padding:10px !important;}
/* ========== MOBILE TEMPLATE STYLES ========== */
/* ======== Page Styles ======== */
.tableContainer{
max-width:600px !important;
width:100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
#headerImage{
height:auto !important;
max-width:600px !important;
width:100% !important;
}
.headerContent{
font-size:20px !important;
line-height:125% !important;
}
/* ======== Body Styles ======== */
.mc-rss-item-img {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" class="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" class="tableContainer">
<tr>
<td align="center" valign="top">
<!-- BEGIN PREHEADER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px;" mc:edit="preheader_content00">
Week #*|DATE:W|* on <a href="http://shortfil.ms">shortfil.ms</a>
</td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" width="180" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:0; text-align: right;" mc:edit="preheader_content01">
<a href="*|ARCHIVE|*" target="_blank">View this email in your browser</a>.
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // END PREHEADER -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
<tr>
<td valign="top" class="headerContent">
<a href="http://shortfil.ms" target="_blank"><img src="https://gallery.mailchimp.com/0261667e6c36412873a5c3d4c/images/617bd8ac-95b5-4d1e-93f8-1343a58752de.png" style="max-width:600px;" id="headerImage" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext /></a>
</td>
</tr>
</table>
<!-- // END HEADER -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content">
<h1>This week on <a href="http://shortfil.ms">shortfil.ms</a></h1>
<p>We hope you've had a great week. We sure did – watching a lot of great short films. Like every week we've added dozens of new and old films from a variety of genres, countries and languages to our catalog. Here are a few of this week's best shorts, check them out!</p>
<p>Have a nice sunday and a great week!<br /><em>- Stefan, Peer &amp; Sebastian</em></p>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
<tr>
<td align="center" valign="top" class="bodyCell">
<!-- BEGIN RSS FILMS // -->
<table border="0" cellpadding="0" cellspacing="0" class="tableContainer">
<tr>
<td valign="top">
*|FEEDBLOCK:http://shortfil.ms/newsletterfeed|*
*|FEEDITEMS:[$count=10]|*
<table border="0" cellpadding="0" cellspacing="0" class="filmTable">
<tr>
<td class="filmImage"><a href="*|FEEDITEM:URL|*">*|FEEDITEM:IMAGE|*</a></td>
</tr>
<tr>
<td class="filmContent">
<h2><a href="*|FEEDITEM:URL|*">*|FEEDITEM:TITLE|*</a></h2>
<div class="filmText">*|FEEDITEM:CONTENT_FULL|*</div>
</td>
</tr>
</table>
*|END:FEEDITEMS|*
*|END:FEEDBLOCK|*
</td>
</tr>
</table>
<!-- // END RSS FILMS -->
</td>
</tr>
</table>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment