Preview - HTML - CSS



<!-- ----------------------------------------------------------------------------------------------------



THIS IS A NEWSLETTER WHICH DISPLAYS CORRECT IN ALL MAJOR BROWSERS AND EMAIL CLIENTS.


AS YOU CAN SEE, THE WHOLE HTML IS BUILT UP USING TABLES AND INLINE STYLE, THIS IS REQUIRED FOR EMAIL CLIENTS TO DISPLAY THE NEWSLETTER CORRECT.



----------------------------------------------------------------------------------------------------- -->



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css"> 
body /* Internet Explorer */ 
{ 
text-align: center; 
} 
body /* Mozilla Firefox alignment */ 
{ 
text-align: -moz-center; 
} 
body {
background-color: #ffffff;
padding: 0px;
margin: 0px;
border: 0px none;
width: 100%;
height: 100%;
}
.zwart a:link, .zwart a:visited {
color:#333268;
text-decoration:none;
}
</style>
</head>
<body>
<!-- begin hoofdcontainer -->
<table cellspacing="0" cellpadding="0" width="100%" border="0">
	<tr>
		<td valign="top" align="center">
		<!-- begin nieuwsbrief -->
		<table cellspacing="0" cellpadding="0" width="645" border="0">
			<tr>
				<td width="645" height="47" valign="top"><img src="headertop.jpg" style="display:block;border:none;" alt="" /></td>
			</tr>
		</table>
		<table width="645" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td width="26" height="80" valign="top" rowspan="3">
				<img src="left1.jpg" style="display:block;border:none;" alt="" />
				</td>
				<td width="229" height="80" align="left" valign="top" rowspan="3"><a href="#" target="_blank">
				<img src="logo.jpg" 
				style="display:block;border:none;" alt="" /></a></td>
				<td colspan="3" align="right" valign="top" bgcolor="#F4F4F4" style="padding-right:12px;font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:12px;color:#3D3D3D;text-decoration:none;">
				<a href="#" target="_blank" style="font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:12px;color:#3D3D3D;text-decoration:none;">
				Click here for the web version</a></td>
				<td width="26" height="80" valign="top" rowspan="3"><img src="right1.jpg" 
				style="display:block;border:none;" alt="" /></td>
			</tr>
			<tr>
				<td bgcolor="#F4F4F4" align="left"><img src="amsterdam.jpg" style="display:block;border:none;" alt=""></td>
				<td bgcolor="#F4F4F4" width="50" rowspan="2" valign="bottom"><a href="#" target="_blank">
				<img src="facebook.jpg" style="display:block;border:none;" alt="" /></a>
				</td>
				<td bgcolor="#F4F4F4" width="51" rowspan="2" valign="bottom"><a href="#" target="_blank">
				<img src="twitter.jpg" style="display:block;border:none;" alt="" /></a></td>
			</tr>
			<tr>
				<td width="260" height="30" bgcolor="#F4F4F4" align="left" style="padding-left:22px;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:18px;color:#3D3D3D;">
				Aug 23 2012</td>
			</tr>
		</table>
		<table width="645" border="0" cellpadding="0" cellspacing="0">
			<tr>
		       <td valign="top" height="3">
				<img src="divider1.jpg" style="display:block;border:none;" alt="">
				</td>
			</tr>
		</table>
		<table cellspacing="0" cellpadding="0" width="645" border="0">
			<tr>
				<td width="26" valign="top" bgcolor="#81C3E6">
				<img src="left2.jpg" style="display:block;border:none;" alt="">
				</td>
				<td valign="bottom" align="left" style="padding-left:20px;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:28px;color:#3D3D3D;">
				All you can eat Spareribs or Chicken
				</td>
				<td width="26" valign="top" bgcolor="#AED8F1">
				<img src="right2.jpg" style="display:block;border:none;" alt="">
				</td>
			</tr>
		</table>
		<table cellspacing="0" cellpadding="0" width="645" border="0">
			<tr>
				<td width="26" height="270" valign="top">
				<img src="left3.jpg" style="display:block;border:none;" alt="">
				</td>
				<td width="330" height="270" valign="top" style="padding-left:20px;">
				<img src="fotogroot.jpg" style="display:block;border:none;" alt="">
				</td>
				<td width="243" height="59" valign="top" align="left">
				<table cellspacing="0" cellpadding="0" width="238" border="0">
					<tr>
						<td colspan="4" width="238" height="20" valign="top"><img src="maintop.jpg" style="display:block;border:none;" alt=""></td>
					</tr>
					<tr>
						<td width="28" height="156" valign="top" rowspan="3"><img src="mainleft.jpg" style="display:block;border:none;" alt=""></td>
						<td width="189" height="32" valign="top" align="left" bgcolor="#EAEAEA" style="padding-left:20px;background:#EAEAEA;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:28px;color:#3D3D3D;line-height:90%;" colspan="2">
						Now</td>
						<td width="21" height="156" valign="top" rowspan="3"><img src="mainright.jpg" style="display:block;border:none;" alt=""></td>
					</tr>
					<tr>
						<td width="189" height="76" bgcolor="#EAEAEA" valign="top" style="padding-left:4px;background:#EAEAEA;color:#D91D5C;font-family:Arial,Helvetica,sans-serif;font-size:70px;font-weight:bold;text-align:center;line-height:90%;" colspan="2">
						&euro;10</td>
					</tr>
					<tr>
						<td width="94" height="46" align="center" valign="middle" bgcolor="#EAEAEA" style="line-height:115%;font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:12px;color:#3D3D3D;background:#EAEAEA;border-top:2px solid #A4A4A4;">
						BESPAAR<br>
						<span style="line-height:115%;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:16px;color:#3D3D3D;">
						59%</span></td>
						<td width="95" height="45" align="center" valign="middle" bgcolor="#EAEAEA" style="line-height:115%;font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:12px;color:#3D3D3D;background:#EAEAEA;border-top:2px solid #A4A4A4;">
						KORTING<br>
						<span style="line-height:115%;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:16px;color:#3D3D3D;">
						&euro;9</span></td>
					</tr>
					<tr>
						<td colspan="4" width="238" height="61" valign="top"><a href="#" target="_blank">
						<img src="mainbottom.jpg" style="display:block;border:none;" alt=""></a></td>
					</tr>
				</table>
				</td>
				<td width="26" height="59" valign="top">
				<img src="right3.jpg" style="display:block;border:none;" alt="">
				</td>
			</tr>
		</table>
		<table cellspacing="0" cellpadding="0" width="645" border="0">
			<tr>
				<td width="26" height="152" valign="top">
				<img src="left4.jpg" style="display:block;border:none;" alt="">
				</td>
				<td width="387" height="152" valign="top" align="left" style="padding-left:20px;font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:14px;color:#3D3D3D;">
				*&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, con ctetur, eius--<br>
				mod temporincidid unt ut labore et dolore.</td>
				<td width="225" height="152" valign="top" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:13px;color:#3D3D3D;">
				<span style="font-weight:bold;">Supplier:</span><br>
				Sushi Toke Leidseplein<br>
				Amsterdam 1234AB<br>
				<br>
				<span style="font-style:italic;">Valid untill 28-01-2013</span><br>
				<br>
				<span style="font-weight:bold;font-style:italic;">Recommend this deal:</span><br>
				<a href="#"><img src="mail.jpg" style="display:inline;border:none;" alt=""></a><a href="#" target="_blank"><img src="twitterkl.jpg" style="display:inline;border:none;" alt=""></a><a href="#" target="_blank"><img src="facebookkl.jpg" style="display:inline;border:none;" alt=""></a>
				</td>
				<td width="26" height="152" valign="top">
				<img src="right4.jpg" style="display:block;border:none;" alt="">
				</td>
			</tr>
		</table>
		<table cellspacing="0" cellpadding="0" width="645" border="0">
			<tr>
				<td width="645" height="3">
				<img src="divider2.jpg" style="display:block;border:none;" alt="">
				</td>
			</tr>
		</table>	
		<table cellspacing="0" cellpadding="0" width="645" border="0">
			<tr>
				<td width="26" height="348" valign="top" bgcolor="#4CB647"></td>
				<td width="292" height="348" valign="top" bgcolor="#EAEAEA" style="border-left:2px solid #C1C4C1;border-right:1px solid #A8A8A8;font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:14px;color:#3D3D3D;">
				<table cellspacing="0" cellpadding="0" width="291" border="0">
					<tr>
						<td width="272" height="58" colspan="2" align="left" bgcolor="#EAEAEA" style="background:#EAEAEA;padding-left:20px;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:20px;color:#3D3D3D;">
						Eat sushi in Amsterdam
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center" bgcolor="#EAEAEA" style="background:#EAEAEA;">
						<img src="fotoklein.jpg" style="display:block;border:none;" alt="">
						</td>
					</tr>
					<tr>
						<td width="271" height="58" colspan="2" align="left" bgcolor="#EAEAEA" style="background:#EAEAEA;padding-left:20px;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:20px;color:#3D3D3D;">
						Eat sushi in New York
						</td>
					</tr>
					<tr>
						<td height="63" bgcolor="#EAEAEA" style="line-height:90%;padding-left:20px;background:#EAEAEA;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:46px;color:#3D3D3D;">
						&euro;10
						</td>
						<td height="63" width="175" bgcolor="#EAEAEA" valign="top" style="padding-right:20px;background:#EAEAEA;">
						<a href="#" target="_blank"><img src="kijken.jpg" style="display:block;border:none;" alt=""></a>
						</td>
					</tr>
				</table>
				</td>
				<td width="292" height="348" valign="top" align="left" bgcolor="#EAEAEA" style="border-left:3px solid #A8A8A8;border-right:2px solid #C1C4C1;font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:12px;color:#3D3D3D;">
				<table cellspacing="0" cellpadding="0" width="291" border="0">
					<tr>
						<td width="272" height="58" colspan="2" align="left" bgcolor="#EAEAEA" style="background:#EAEAEA;padding-left:20px;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:20px;color:#3D3D3D;">
						Eat sushi in Colorado
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center" bgcolor="#EAEAEA" style="background:#EAEAEA;">
						<img src="fotoklein.jpg" style="display:block;border:none;" alt="">
						</td>
					</tr>
					<tr>
						<td width="271" height="58" colspan="2" align="left" bgcolor="#EAEAEA" style="background:#EAEAEA;padding-left:20px;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:20px;color:#3D3D3D;">
						Eat sushi in Tokyo
						</td>
					</tr>
					<tr>
						<td height="63" bgcolor="#EAEAEA" style="line-height:90%;padding-left:20px;background:#EAEAEA;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:46px;color:#3D3D3D;">
						&euro;10
						</td>
						<td height="63" width="175" bgcolor="#EAEAEA" valign="top" style="padding-right:20px;background:#EAEAEA;">
						<a href="#" target="_blank"><img src="kijken.jpg" style="display:block;border:none;" alt=""></a>
						</td>
					</tr>
				</table>
				</td>
				<td width="26" height="348" valign="top" bgcolor="#4CB647"></td>
			</tr>
		</table>
		<table cellspacing="0" cellpadding="0" width="645" border="0">
			<tr>
				<td width="26" valign="top" bgcolor="#4CB647"></td>
				<td></td>
				<td valign="top" align="center">
				<img src="bottom.jpg" style="display:block;border:none;" alt="">
				</td>
				<td width="26" valign="top" bgcolor="#4CB647"></td>
			</tr>
		</table>
		<table cellspacing="0" cellpadding="0" width="645" border="0">
			<tr>
				<td width="26" valign="top" bgcolor="#4CB647"></td>
				<td class="zwart" valign="bottom" align="right" style="padding-right:10px;font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:13px;color:#3D3D3D;">
				<a href="#" target="_blank" style="text-decoration:none;font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:13px;color:#3D3D3D;">
				About us</a> | 
				<a href="#" target="_blank" style="text-decoration:none;font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:13px;color:#3D3D3D;">
				Missed deals</a> | 
				<a href="#" target="_blank" style="text-decoration:none;font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:13px;color:#3D3D3D;">
				How does it work?</a> | 
				<a href="#" target="_blank" style="text-decoration:none;font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:13px;color:#3D3D3D;">
				Customerservice</a>
				</td>
				<td width="102" valign="top" align="right" style="padding-right:24px;">
				<a href="#"><img src="mail.jpg" style="display:inline;border:none;" alt=""></a><a href="#" target="_blank"><img src="twitterkl.jpg" style="display:inline;border:none;" alt=""></a><a href="#" target="_blank"><img src="facebookkl.jpg" style="display:inline;border:none;" alt=""></a>
				</td>
				
				<td width="26"  valign="top" bgcolor="#4CB647"></td>
			</tr>
		</table>
		<table cellspacing="0" cellpadding="0" width="645" border="0">
			<tr>
				<td width="26" height="10" valign="top" bgcolor="#4CB647"></td>
				<td height="10" valign="top">
				<img src="bottomfooter.jpg" style="display:block;border:none;" alt="">
				</td>
				<td width="26" height="10" valign="top" bgcolor="#4CB647"></td>
			</tr>
		</table>
		<table cellspacing="0" cellpadding="0" width="645" border="0">
			<tr>
				<td width="645" valign="top" bgcolor="#4CB647" align="center" style="padding-top:46px;font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:11px;color:#3D3D3D;">
				You receive this email because you are signed up to the Amsterdam Deals newsletter.<br>
				Use <a href="#" target="_blank" style="font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:11px;color:#3D3D3D;text-decoration:underline;">
				this link</a> to unsubscribe to the newsletter<br>
				<br><br>
				&copy; <a href="https://www.psdtohtmlshop.com" target="_blank" style="font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:12px;color:#3D3D3D;text-decoration:none;">
				PSDtoHTMLshop</a> <span style="font-family: Arial, Helvetica, sans-serif;font-weight:normal;font-size:12px;color:#3D3D3D;text-decoration:none;">
				- This newsletter was slided from a .psd!<br>
				Contact us if you have a design that needs to be converted to a newsletter</span><br>
				<br><br></td>
			</tr>
		</table>		
		<br><br><br>
		<!-- eind nieuwsbrief -->
		</td>
	</tr>
</table>
<!-- eind hoofdcontainer -->

<p style="position: fixed; top: 20px; right: 120px;" >
	<a href="http://validator.w3.org/check?uri=https%3A%2F%2Fwww.psdtohtmlshop.com%2FExamples%2FExample-24%2Findex.html" rel="nofollow" target="_blank" >
		<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
	</a>
</p>

<p style="position: fixed; top: 20px; right: 10px;">
	<a href="http://jigsaw.w3.org/css-validator/" rel="nofollow" target="_blank" >
   	<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valide CSS!" />
   </a>
</p>

</body>
</html>