Skip to content

Instantly share code, notes, and snippets.

@Ebeta

Ebeta/gist:d2d9d35cdcad3dcf1fac

Created May 13, 2015 22:17
Show Gist options
  • Save Ebeta/d2d9d35cdcad3dcf1fac to your computer and use it in GitHub Desktop.
Save Ebeta/d2d9d35cdcad3dcf1fac to your computer and use it in GitHub Desktop.
Download ZIP
Welcome email
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:#ffffff/*Background Color*/;}
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:0;padding:0;}
.bodytbl{margin:0;padding:0;-webkit-text-size-adjust:none;}
.line{border-bottom:1px solid #AAAAAA/*Separator*/;}
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>
<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">
</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>Logo </center></span>
</td>
</tr>
<tr>
<td align="left" valign="top" class="h2">
<span><center>Filler text</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">
<!-- CONTENT start -->
<img src="http://images.revaxarts-themes.com/220303/1200x520.jpg?gray" class="m-100" alt="" title="" width="600" height="260" border="0" style="max-width:600px;" />
<!-- CONTENT end -->
</td>
</tr>
</table>
<!-- Full Size Image 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"><span>//</span></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">
<tr>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<!-- CONTENT start -->
<td valign="top" align="left">
<h1><center><span>[Welcome]</span></center></h1>
<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 -->
<!-- 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"><span>//</span></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">
<tr>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<!-- CONTENT start -->
<td valign="top" align="left">
<p><center><span>We strive to offer you the very best service available!
That's why we have launched our online concierge option available
for you to use 24 hours a day, 7 days a week.a</center></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 -->
<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>
<!-- Footer start -->
<!-- 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><center><span>[Concierge]</span></center></h1>
<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 -->
<!-- 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"><span>//</span></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">
<tr>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<!-- CONTENT start -->
<td valign="top" align="left">
<p><center><span>Submit appointment request any time of day or night. Re-book other treatments. Write reviews about your visit. Refer your friends and much more </center></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 -->
<table width="600" cellspacing="0" cellpadding="0" class="wrap line"><tr><td height="39">&nbsp;</td></tr></table>
<table width="600" cellpadding="0" cellspacing="0" class="wrap">
<tr>
<!-- <td valign="top" align="center"> -->
<!-- <table width="100%" cellpadding="0" cellspacing="0" class="o-fix"> -->
<!-- <tr> -->
<!-- CONTENT start -->
<!-- <td valign="top" align="left">
<table width="390" cellpadding="0" cellspacing="0" align="left">
<tr>
<td class="small" align="left" valign="top">
<div><span>You have received this email because you have subscribed to <a href="http://rxa.li/market">Market Media</a> as <a href="#">some@example.com</a>.<br />If you no longer wish to receive emails please <a href="#">unsubscribe</a></span></div>
<div><span>&copy; 2013 Your Company here, All rights reserved</span></div>
</td>
</tr>
</table>
<table width="190" cellpadding="0" cellspacing="0" align="right">
<tr>
<td class="small social" align="right" valign="top">
<div>
<a href="https://twitter.com"><img src="img/twitter.png" alt="" title="" width="32" height="32" border="0" style="max-width:32px;max-height:32px;" /></a>
<a href="https://facebook.com"><img src="img/facebook.png" alt="" title="" width="32" height="32" border="0" style="max-width:32px;max-height:32px;" /></a>
<a href="https://linkedin.com"><img src="img/linkedin.png" alt="" title="" width="32" height="32" border="0" style="max-width:32px;max-height:32px;" /></a>
</div>
</td>
</tr>
</table>
</td> -->
<!-- CONTENT end -->
</tr>
<tr class="m-0"><td height="24">&nbsp;</td></tr>
</table>
</td>
</tr>
</table>
<!-- Footer end -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment