Skip to content

Instantly share code, notes, and snippets.

@ebetancourt

ebetancourt/gist:306b71ce7ecea980b52b

Forked from Ebeta/gist:e5f2c935b0442f08da91
Last active August 29, 2015 14:21
Show Gist options
  • Save ebetancourt/306b71ce7ecea980b52b to your computer and use it in GitHub Desktop.
Save ebetancourt/306b71ce7ecea980b52b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!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" />
<title>Market - responsive Newsletter with Template Builder</title>
</head>
<body>
<style type="text/css">
#outlook a{padding:0;}
body{width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;padding:0;}
.ExternalClass{width:100%;}
.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%;}
.bodytbl{margin:0;padding:0;width:100% !important;}
img{outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;image-rendering:optimizeQuality;display:block;max-width:100%;}
a img{border:none;}
p{margin:1em 0;}
table{border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
table td{border-collapse:collapse;}
.o-fix table,.o-fix td{mso-table-lspace:0pt;mso-table-rspace:0pt;}
body,.bodytbl{background-color:#transparent;}
table{color:#787878/*Text Color*/;}
td,p{color:#787878;}
.h1{color:#353535/*Headings*/;}
.h2{color:#353535;}
.quote{color:#AAAAAA;}
.invert,.invert h1,.invert td,.invert p{background-color:#353535;color:#FAFAFA !important;}
.wrap.header{}
.wrap.body{}
.wrap.body-i{background-color:#353535;}
.wrap.footer{}
.padd{width:20px;}
a{color:#00A9E0;}
a:link,a:visited,a:hover{color:#00A9E0/*Contrast*/;}
.btn,.btn div,.btn a,td.label a{color:#FFFFFF/*Contrast Link Color*/;}
.btn a,.btn a img,td.label{background:#00A8E0/*Button Color*/;}
.invert .btn a,.invert .btn a img{background:none;}
h1,h2,h3,h4,h5,h6{color:#353535;font-family:Helvetica,Arial,sans-serif;font-weight:bold;}
h1{font-size:24px;letter-spacing:-2px;margin-bottom:6px;margin-top:6px;line-height:24px;}
h2{font-size:20px;margin-bottom:12px;margin-top:2px;line-height:24px;}
h3{font-size:18px;margin-bottom:12px;margin-top:2px;line-height:24px;}
h4{font-size:16px;}
h5{font-size:14px;}
h6{font-size:12px;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#00A9E0;}
h1 a:active,h2 a:active,h3 a:active,h4 a:active,h5 a:active,h6 a:active{color:#00A9E0 !important;}
h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited,h5 a:visited,h6 a:visited{color:#00A9E0 !important;}
.h1{font-family:Helvetica,Arial,sans-serif;font-size:55px;font-weight:bold;line-height:40px !important;letter-spacing:-2px;}
.h2{font-family:Helvetica,Arial,sans-serif;font-size:19px;font-weight:bold;letter-spacing:-1px;line-height:24px;}
.h3{font-family:Helvetica,Arial,sans-serif;font-size:17px;letter-spacing:-1px;line-height:24px;}
/*body{margin:70% ;padding:3%;}*/
.bodytbl{margin:0;padding:0;-webkit-text-size-adjust:none;}
.line{border-bottom:1px solid #AAAAAA/*Separator*/; width: 30%;}
table{font-family:Helvetica,Arial,sans-serif;font-size:12px;}
td,p{line-height:20px;}
ul,ol{margin-top:20px;margin-bottom:20px;}
li{line-height:20px;}
td,tr{padding:0;}
.quote{font-family:Helvetica,Arial,sans-serif;font-size:24px;letter-spacing:0;margin-bottom:6px;margin-top:6px;line-height:24px;font-style:italic;}
.small{font-size:10px;color:#787878;line-height:15px;text-transform:uppercase;word-spacing:-1px;margin-bottom:4px;margin-top:6px;}
.plan td{border-right:1px solid #EBEBEB/*Lines*/;border-bottom:1px solid #EBEBEB;text-align:center;}
.plan td.last{border-right:0;}
.plan th{text-align:center;border-bottom:1px solid #EBEBEB;}
a{text-decoration:none;padding:2px 0px;}
td.label a{margin:2px 4px;line-height:1em;text-decoration:none;display:block;mso-padding-alt:4pt 4pt 4pt 4pt;}
td.label{mso-padding-alt:0 4px 4px 4px;}
.btn{margin-top:10px;display:block;}
.btn a{display:inline-block;padding:0;line-height:0.5em;}
.btn img,.social img{display:inline;margin:0;}
.social .btn a,.social .btn a img{background:none;}
.right{text-align:right;}
table.textbutton td{background:#00A8E0;padding:0px 14px;color:#FFF;display:block;height:24px;vertical-align:top;}
table.textbutton a{color:#FFF;font-size:13px;font-weight:100;line-height:24px;width:100%;display:inline-block;}
div.preheader{line-height:0px;font-size:0px;height:0px;display:none !important;visibility:hidden;text-indent:-9999px;}
@media only screen and (max-device-width: 480px) {
body{-webkit-text-size-adjust:120% !important;-ms-text-size-adjust:120% !important;}
table[class=bodytbl] .wrap{width:460px !important;}
table[class=bodytbl] .wrap .padd{width:10px !important;}
table[class=bodytbl] .wrap table{width:100% !important;}
table[class=bodytbl] .wrap img {max-width:100% !important;height:auto !important;}
table[class=bodytbl] .wrap .m-padd {padding:0 20px !important;}
table[class=bodytbl] .wrap .m-w-auto{;width:auto !important;}
table[class=bodytbl] .wrap .m-100{width:100% !important;max-width:460px !important;}
table[class=bodytbl] .wrap .m-l{text-align:left !important;}
table[class=bodytbl] .wrap .h div{letter-spacing:-1px !important;font-size:18px !important;}
table[class=bodytbl] .m-0{width:0;display:none;}
table[class=bodytbl] .m-b{display:block;width:100% !important;margin-bottom:20px !important;}
table[class=bodytbl] .m-1-2{max-width:264px !important;}
table[class=bodytbl] .m-1-3{max-width:168px !important;}
table[class=bodytbl] .m-1-4{max-width:120px !important;}
table[class=bodytbl] .wrap .m-mac{width:340px !important;max-width:340px !important;margin-left:38px;}
table[class=bodytbl] .wrap .m-mac-t img{width:339px !important;}
table[class=bodytbl] .wrap .m-mac-h img{height:192px !important;width:15px !important;}
table[class=bodytbl] .wrap .m-mac-i img{width:309px !important;}
table[class=bodytbl] .wrap .m-mac-b img{max-width:406px !important;margin-left:4px;}
}
@media only screen and (max-device-width: 320px) {
table[class=bodytbl] .wrap{width:310px !important;}
table[class=bodytbl] .wrap .m-100{max-width:310px !important;}
table[class=bodytbl] .wrap .m-mac{width:239px !important;max-width:239px !important;margin-left:23px;}
table[class=bodytbl] .wrap .m-mac-t img{width:238px !important;}
table[class=bodytbl] .wrap .m-mac-h img{height:134px !important;width:11px !important;}
table[class=bodytbl] .wrap .m-mac-i img{width:216px !important;}
table[class=bodytbl] .wrap .m-mac-b img{max-width:285px !important;margin-left:-1px;}
}
</style>
<div style="width: 100%;margin: 0;background-color: #FFF;background-image: url('http://images.revaxarts-themes.com/220303/1200x520.jpg?gray'); background-position: center bottom;background-repeat: no-repeat;">
<div style="width: 50%;margin: 0 auto;border: black solid 2px;">
<table class="bodytbl" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<!-- <table width="600" cellspacing="0" cellpadding="0" class="wrap">
<tr height="20">
<td align="left" valign="bottom">
<div class="preheader"></div> <div class="small"><span>This line will show up in the preview email clients</span><a name="top"></a></div> <div class="small"><span>Trouble seeing something? <a href="#">view it online</a> or <a href="#">unsubscribe</a></span></div>
</td>
</tr>
</table> -->
<!-- <table width="600" cellspacing="0" cellpadding="0" class="wrap line"><tr><td height="19">&nbsp;</td></tr></table> -->
<table width="600" cellspacing="0" cellpadding="0" class="wrap"><tr><td>
<table cellspacing="0" cellpadding="0" align="right" class="m-w-auto">
<tr>
<td height="20" valign="middle" class="label">
<!-- <span> <a href="#">Issue #01 09/2013</a> </span> -->
</td>
</tr>
</table>
</td></tr></table>
<table width="600" cellspacing="0" cellpadding="0" class="wrap">
<tr height="80">
<td align="left" valign="bottom">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="1" align="left" valign="bottom" class="h1">
<span><center>Market</center></span>
</td>
</tr>
<tr>
<td align="left" valign="top" class="h2">
<span><center>Put some text here and what not</center></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- <table width="600" cellspacing="0" cellpadding="0" class="wrap line"><tr><td height="19">&nbsp;</td></tr></table> -->
<!-- <table width="600" cellspacing="0" cellpadding="0" class="wrap"><tr><td height="40">&nbsp;</td></tr></table> -->
<!-- ☺ header block ends here -->
<!-- Full Size Image start -->
<table width="600" cellpadding="0" cellspacing="0" class="wrap">
<tr>
<td valign="top">
<!-- CONTENT start -->
<!-- <img src="assets/logo/logo.jpg" class="m-100" alt="" title="" width="250" height="35" border="0" style="max-width:600px;" /> -->
<!-- CONTENT end -->
</td>
</tr>
</table>
<!-- Full Size Image end -->
<!-- Full Size Image start -->
<table width="600" cellpadding="0" cellspacing="0" class="wrap">
<tr>
<td valign="top">
</td>
</tr>
</table>
<!-- Full Size Image end -->
<!-- Separator start -->
<table width="600" cellspacing="0" cellpadding="0" class="wrap line"><tr><td height="30">&nbsp;</td></tr></table>
<table width="600" cellspacing="0" cellpadding="0" class="wrap"><tr><td>
<table cellspacing="0" cellpadding="0" align="right" class="m-w-auto">
<tr>
<td valign="top" class="small"></td>
</tr>
</table>
</td></tr></table>
<table width="600" cellspacing="0" cellpadding="0" class="wrap"><tr><td height="10">&nbsp;</td></tr></table>
<!-- Separator end -->
<!-- 1/1 Text start -->
<table width="600" cellpadding="0" cellspacing="0" class="wrap">
<tr>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<!-- CONTENT start -->
<td valign="top" align="left">
<h1><span><center>[CUSTOMERNAME]</center></span></h1>
<div class="btn">
</div>
</td>
<!-- CONTENT end -->
</tr>
</table>
</td>
</tr>
</table>
<!-- 1/1 Text end -->
<!-- Separator start -->
<table width="600" cellspacing="0" cellpadding="0" class="wrap line"><tr><td height="39">&nbsp;</td></tr></table>
<table width="600" cellspacing="0" cellpadding="0" class="wrap"><tr><td>
<table cellspacing="0" cellpadding="0" align="right" class="m-w-auto">
<tr>
<td valign="top" class="small"></td>
</tr>
</table>
</td></tr></table>
<table width="600" cellspacing="0" cellpadding="0" class="wrap"><tr><td height="20">&nbsp;</td></tr></table>
<!-- Separator end -->
<!-- 1/1 Text start -->
<table width="600" cellpadding="0" cellspacing="0" class="wrap" style="margin:0 auto;">
<tr>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="-30">
<tr>
<!-- CONTENT start -->
<td position="center" align="center">
<p> We wanted to take this time to personally thank you for allowing our Ugo Di Roma family take care of your beauty needs. We look forward to pampering you in 2015!</p>
<p>Your loyalty is valuable to us and we personally apreciate your fidelity.</p>
<p>Warmly,<br>
Ugo Di Roma </p>
</p></div>
<div class="btn">
<!-- <a href="#"><img src="img/more.png" width="94" height="24" alt="read more" title="read more" style="background-color:#00A8E0" border="0" /></a> -->
</div>
</td>
<!-- CONTENT end -->
</tr>
</table>
</td>
</tr>
</table>
<!-- 1/1 Text end -->
<!-- Footer start -->
<table width="600" cellspacing="0" cellpadding="0" class="wrap line"><tr><td height="39">&nbsp;</td></tr></table>
<table width="600" style="height:520px" height="520" cellpadding="0" cellspacing="0" class="wrap">
<tr>
<td valign="top" align="center">
<table width="100%" cellpadding="0" cellspacing="0" class="o-fix">
<tr class="m-0"><td height="24">&nbsp;</td></tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment