stevereinhardt of Spear Code Hub
4/6/2018 - 9:49 PM
ALGO Email Template
Cool template for inspiration I built. Has a couple pretty advanced "background hack" headers I had to finagle to work. Feel free to grab sections from this. Also made comments throughout to keep things easier to navigate in the code.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<meta charset="UTF-8">
<meta name="x-apple-disable-message-reformatting">
<!-- START Universal Variables -->
<meta class="mktoNumber" id="spacerheight" mktoName="Spacer Height" default="20" min="0" max="1000" units="px" step="1">
<meta class="mktoString" id="headerbg1" mktoName="Header BG" default="http://www2.allego.com/rs/671-EJG-732/images/ALGO-2001R-Nurture-Email_07.png" allowHtml="false">
<meta class="mktoString" id="headerbg2" mktoName="Header BG" default="http://www2.allego.com/rs/671-EJG-732/images/ALGO-2001R-Nurture-Email_09.png" allowHtml="false">
<meta class="mktoColor" id="ctabg1" mktoName="CTA Color" default="#0bb3e4">
<meta class="mktoColor" id="ctabg2" mktoName="CTA Color" default="#9b1829">
<!-- END Universal Variables -->
<!-- START Mod1 Variables -->
<!-- END Mod1 Variables -->
<title>Allego</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@media {
body {
font-family: 'Roboto', sans-serif !important;
}
}
body {
-webkit-text-size-adjust: none;
font-family: arial, helvetica;
font-size: 15px;
text-align: left;
color: #455560;
line-height: 20px;
}
p {
margin-top: 0;
padding-top: 0;
}
li {
margin-bottom: 12px;
}
a:link, a:visited {
color: #0bb3e4
}
a:hover, a:active {
color: #0bb3e4
}
#logo img {
display: block;
}
.paddinglr {
padding-left: 20px;
padding-right: 20px;
}
/* START Responsive */
@media screen and (max-width: 480px) {
.table100 {
width: 100% !important;
float: none !important;
}
#headline {
font-size: 27px !important;
line-height: 31px !important;
}
#headline, #headline2 {
padding-right: 0 !important;
}
.tablemargin {
margin: 0 !important;
}
.headerbg {
background-position: center !important;
}
.headerpad {
padding: 0 20px;
}
.headermargin {
margin: 0 20px !important;
}
#headergraphic {
display: none !important;
}
#contentgraphic3 img {
width: 100% !important;
height: auto !important;
}
#contentgraphic2, #contentgraphic {
float: none !important;
margin: 0 0 20px 0 !important;
}
.sectionpad {padding-left: 0 !important;}
}
/* END Responsive */
</style>
</head>
<body style="background: #cdd4d9; margin:0; padding: 0;">
<div align="center" id="wrap" style="background: #cdd4d9">
<table width="600" border="0" cellpadding="0" cellspacing="0" class="table100" style="width:600px">
<tbody>
<tr>
<!-- START CONTAINER -->
<td class="mktoContainer" style="background: #ffffff" id="container"><!-- START PREMod1 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoModule" id="Mod0" mktoName="Preheader">
<tbody>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="table100">
<tbody>
<tr>
<td style="background: #cdd4d9; padding: 15px; font-size: 10px; color: #455560; line-height: 14px; text-align: center;" class="mktoText" mktoName="pretext" id="pretext1">Maecenas sed diam eget risus varius <a href="#">blandit sit amet non magna.</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<!-- END PREMod1 -->
<!-- START Mod1 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoModule" id="Mod1" mktoName="Logo">
<tbody>
<tr>
<td style="padding: 10px 20px;"><table width="50" style="width:50px;" border="0" align="left" cellpadding="0" cellspacing="0" class="table100">
<tbody>
<tr>
<td><table width="50" style="width:50px;" border="0" align="center" cellpadding="0" cellspacing="0" class="table100">
<tbody>
<tr>
<td><div class="mktoImg" id="logo" mktoName="Logo" mktoImgLink="#" mktoLockImgStyle="true" mktoLockImgSize="false"> <a><img src="http://www2.allego.com/rs/671-EJG-732/images/ALGO-2001R-Nurture-Email_03.png" width="113" height="51" style="display: block;" alt=""></a> </div></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<!-- END Mod1 -->
<!-- START Mod2 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoModule" id="Mod2" mktoName="Header1">
<tbody>
<tr>
<td background="${headerbg1}" bgcolor="#38bce5" height="250" valign="top" class="headerbg"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:250px;">
<v:fill type="tile" src="${headerbg1}" color="#38bce5" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="250" valign="middle" style="font-family: arial, helvetica;"><div align="center" class="headermargin">
<table width="560" border="0" align="center" cellpadding="0" cellspacing="0" style="width:560px;" class="table100">
<tbody>
<tr>
<td id="prehead" style="font-weight: bold; color: #edbc06; font-size: 16px; line-height: 20px; text-transform: uppercase; padding-bottom: 4px; text-align: left;" class="mktoText" mktoName="PreHeadline">Pharetra Lorem</td>
</tr>
<tr>
<td id="headline" style="font-weight: 300; font-size: 28px; color: #ffffff; line-height: 34px; padding-bottom: 20px; padding-right:175px; text-align: left" class="mktoText" mktoName="Headline">Morbi leo risus, porta ac consecte vestibulum at eros.</td>
</tr>
<tr>
<td style="text-align: left;"><table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-align: center; text-transform: uppercase; font-weight: bold; color: #fff; font-size: 16px; border: 2px solid #fff; background: ${ctabg1}; padding:10px 34px; " class="cta mktoText" id="cta1" mktoName="CTA"><a href="#" style="color: #fff; text-decoration: none;">CALL TO ACTION</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div></td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</tbody>
</table>
<!-- END Mod2 -->
<!-- START Mod3 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoModule" id="Mod3" mktoName="Header2">
<tbody>
<tr>
<td background="${headerbg2}" bgcolor="#38bce5" height="250" valign="top" class="headerbg"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:250px;">
<v:fill type="tile" src="${headerbg2}" color="#38bce5" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="250" valign="middle" style="font-family: arial, helvetica;"><div align="center" class="headermargin">
<table width="560" border="0" align="center" cellpadding="0" cellspacing="0" style="width:560px;" class="table100">
<tbody>
<tr>
<td valign="middle"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="table100">
<tbody>
<tr>
<td id="prehead2" style="font-weight: bold; color: #edbc06; font-size: 16px; line-height: 20px; text-transform: uppercase; padding-bottom: 4px; text-align: left;" class="mktoText" mktoName="PreHeadline">Pharetra Lorem</td>
</tr>
<tr>
<td id="headline2" style="font-weight: 300; font-size: 28px; color: #ffffff; line-height: 34px; padding-bottom: 20px; padding-right:20px; text-align: left" class="mktoText" mktoName="Headline">Morbi leo risus, porta ac consecte vestibulum at eros.</td>
</tr>
<tr>
<td style="text-align: left;"><table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-align: center; text-transform: uppercase; font-weight: bold; color: #fff; font-size: 16px; border: 2px solid #fff; background: ${ctabg2}; padding:10px 34px; " class="cta mktoText" id="cta2" mktoName="CTA"><a href="#" style="color: #fff; text-decoration: none;">CALL TO ACTION</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
<td width="5"><div class="mktoImg" id="headergraphic" mktoName="Header2IMG" mktoImgLink="#" mktoLockImgStyle="true" mktoLockImgSize="false"><a><img src="http://www2.allego.com/rs/671-EJG-732/images/ALGO-2001R-Nurture-Email_12.png" width="167" height="190" style="display: block;" alt=""></a></div></td>
</tr>
</tbody>
</table>
</div></td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</tbody>
</table>
<!-- END Mod3 -->
<!-- START Mod4 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoModule" id="Mod4" mktoName="Content1">
<tbody>
<tr>
<td style="padding: 30px 20px 20px 20px;"><div class="contenttitle mktoText" id="contenttitle1" mktoName="Content title 1" style="color: #9b1829; font-size: 18px; line-height: 24px; margin-bottom: 12px;"> Sed varius tortor urna, ullamcorper pellentesque massa tristique et.</div>
<div id="content" class="mktoText" mktoName="Content 1">
<p>Nunc elit metus, conv Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.</p>
<p><strong>In this paper, you can learn: </strong></p>
<ul>
<li><strong>Vivamus viverra fringilla lectus</strong>, at accumsan diam mattis lobortis.</li>
<li><strong>Sed imperdiet libero</strong> vitae nulla faucibus pretium</li>
<li><strong>Nullam quis risus eget urna</strong> mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.</li>
</ul>
<p><a href="#">Integer posuere erat</a> a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.</p>
</div></td>
</tr>
</tbody>
</table>
<!-- END Mod4 -->
<!-- START Spacer -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoModule" id="spacermodule" mktoName="Spacer" >
<tbody>
<tr>
<td style="margin: 0; padding:4px 0;"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-bottom:1px solid #ebba2c; height: 2px; line-height: 2px; font-size: 0;"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<!-- END Spacer -->
<!-- START Mod5 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoModule" id="Mod5" mktoName="Content2">
<tbody>
<tr>
<td style="padding: 30px 20px 20px 20px;"><table width="100" border="0" align="right" cellpadding="0" cellspacing="0" class="table100">
<tbody>
<tr>
<td style="padding-bottom:20px; padding-left: 15px;" class="sectionpad"><div align="center"><table width="100" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="mktoImg" id="contentgraphic" mktoName="Content IMG" mktoImgLink="#" mktoLockImgStyle="true" mktoLockImgSize="false" style="float: right;"><a><img src="http://www2.allego.com/rs/671-EJG-732/images/ALGO-2001R-Nurture-Email_12.png" width="167" height="190" style="display: block;" alt=""></a></td>
</tr>
</tbody>
</table></div></td>
</tr>
</tbody>
</table>
<div class="contenttitle mktoText" id="contenttitle2" mktoName="Content title 2" style="color: #9b1829; font-size: 18px; line-height: 24px; margin-bottom: 12px;"> Sed varius tortor urna, ullamcorper pellentesque massa tristique et.</div>
<div id="content2" class="mktoText" mktoName="Content 2">
<p>Nunc elit metus, conv Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.</p>
<p><strong>In this paper, you can learn: </strong></p>
<ul>
<li><strong>Vivamus viverra fringilla lectus</strong>, at accumsan diam mattis lobortis.</li>
<li><strong>Sed imperdiet libero</strong> vitae nulla faucibus pretium</li>
<li><strong>Nullam quis risus eget urna</strong> mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.</li>
</ul>
<p><a href="#">Integer posuere erat</a> a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.</p>
</div></td>
</tr>
</tbody>
</table>
<!-- END Mod5 -->
<!-- START Spacer 2 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoModule" id="spacermodule2" mktoName="Spacer2">
<tbody>
<tr>
<td style="margin: 0; padding:4px 0;"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-bottom:1px solid #ebba2c; height: 2px; line-height: 2px; font-size: 0;"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<!-- END Spacer2 -->
<!-- START Mod6 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoModule" id="Mod6" mktoName="Content3">
<tbody>
<tr>
<td style="padding: 30px 20px 20px 20px;"><table width="100" border="0" align="right" cellpadding="0" cellspacing="0" class="table100">
<tbody>
<tr>
<td style="padding-bottom: 20px; padding-left: 15px;" class="sectionpad"><div align="center"><table width="100" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="mktoImg" id="contentgraphic2" mktoName="Content IMG 2" mktoImgLink="#" mktoLockImgStyle="true" mktoLockImgSize="false" style="float: right; padding: 20px; background: #9b1829"><a><img src="http://www2.allego.com/rs/671-EJG-732/images/ALGO-2001R-Nurture-Email_16.png" width="214" height="150" style="display: block;" alt=""></a></td>
</tr>
</tbody>
</table></div></td>
</tr>
</tbody>
</table>
<div class="contenttitle mktoText" id="contenttitle3" mktoName="Content title 3" style="color: #9b1829; font-size: 18px; line-height: 24px; margin-bottom: 12px;"> Sed varius tortor urna, ullamcorper pellentesque massa tristique et.</div>
<div id="content3" class="mktoText" mktoName="Content 3">
<p>Nunc elit metus, conv Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.</p>
<p><strong>In this paper, you can learn: </strong></p>
<ul>
<li><strong>Vivamus viverra fringilla lectus</strong>, at accumsan diam mattis lobortis.</li>
<li><strong>Sed imperdiet libero</strong> vitae nulla faucibus pretium</li>
<li><strong>Nullam quis risus eget urna</strong> mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.</li>
</ul>
<p><a href="#">Integer posuere erat</a> a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.</p>
</div></td>
</tr>
</tbody>
</table>
<!-- END Mod6 -->
<!-- START Spacer 2 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoModule" id="spacermodule3" mktoName="Spacer3">
<tbody>
<tr>
<td style="margin: 0; padding:4px 0;"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-bottom:1px solid #ebba2c; height: 2px; line-height: 2px; font-size: 0;"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<!-- END Spacer2 -->
<!-- START Mod7 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoModule" id="Mod7" mktoName="Content4">
<tbody>
<tr>
<td style="padding: 30px 20px 20px 20px;"><div class="contenttitle mktoText" id="contenttitle4" mktoName="Content title 4" style="font-size: 18px; line-height: 24px; margin-bottom: 5px; text-align: center;"> Sed varius tortor urna, ullamcorper pellentesque massa tristique et.</div>
<div class="contenttitle mktoText" id="lowercontne" mktoName="Subtitlelower" style="font-size: 15px; margin-bottom: 20px; text-align: center;"> Sed varius tortor urna, ullamcorper pellentesque massa tristique et.</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-bottom: 20px;"><div align="center"><table width="100" border="0" align="center" cellpadding="0" cellspacing="0" class="table100">
<tbody>
<tr>
<td class="mktoImg" id="contentgraphic3" mktoName="Content IMG 3" mktoImgLink="#" mktoLockImgStyle="true" mktoLockImgSize="false" style="text-align: center; padding: 20px; background: #9b1829"><a><img src="http://www2.allego.com/rs/671-EJG-732/images/ALGO-2001R-Nurture-Email_20.png" width="350" height="176" style="display: block;" alt=""></a></td>
</tr>
</tbody>
</table></div></td>
</tr>
</tbody>
</table>
<div id="content4" class="mktoText" mktoName="Content 4">
<p><strong>In this paper, you can learn: </strong></p>
<ul>
<li><strong>Vivamus viverra fringilla lectus</strong>, at accumsan diam mattis lobortis.</li>
<li><strong>Sed imperdiet libero</strong> vitae nulla faucibus pretium</li>
<li><strong>Nullam quis risus eget urna</strong> mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.</li>
</ul>
<p><a href="#">Integer posuere erat</a> a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.</p>
</div></td>
</tr>
</tbody>
</table>
<!-- END Mod7 -->
<!-- START Mod8 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoModule" id="Mod8" mktoName="Content5">
<tbody>
<tr>
<td style="padding: 30px 20px 20px 20px; background: #ECF0F1;"><div class="mktoImg" id="contentgraphic4" mktoName="Content IMG 3" mktoImgLink="#" mktoLockImgStyle="true" mktoLockImgSize="false" style="text-align: center; margin-bottom: 20px;"><a><img src="http://www2.allego.com/rs/671-EJG-732/images/ALGO-2001R-Nurture-Email_24.png" width="61" height="83" alt=""></a></div>
<div class="contenttitle mktoText" id="contenttitle5" mktoName="Content title 2" style="color: #9b1829; font-size: 18px; line-height: 24px; text-align: center; margin-bottom: 12px;"> Sed varius tortor urna, ullamcorper pellentesque massa tristique et.</div>
<div class="contenttitle mktoText" id="lowercontent" mktoName="greyContent" style="font-size: 15px; margin-bottom: 20px; text-align: center;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut sollicitudin eros, vel tristique nulla. Vivamus sed felis sed leo tempor laoreet in vitae urna. Ut vel turpis in urna rutrum viverra. <a href="#">Sed varorper pellentesque massa tristique et. </a></p>
</div></td>
</tr>
</tbody>
</table>
<!-- END Mod8 -->
<!-- START Mod9 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoModule" id="Mod9" mktoName="Footer Module">
<tbody>
<tr>
<td style="padding: 20px 20px 20px 20px; background: #455560;"><div class="contenttitle mktoText" id="footer" mktoName="Footer" style="font-size: 12px; line-height: 17px; color: #cdd4d9; text-align: center;">© 2018 Allego All rights reserved.<br>
117 Kendrick Street Suite 800 | Needham, MA 02494 USA</div></td>
</tr>
</tbody>
</table>
<!-- END Mod9 --></td>
<!-- END CONTAINER -->
</tr>
</tbody>
</table>
</div>
</body>
</html>