ebetancourt
5/14/2015 - 5:47 PM

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>