Metalab Template (Campaign Monitor)

Example of our HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Email Template - Metalab Steph</title>
<!--[if gte mso 9]>
<style type="text/css">
.body {background: #234865 url('images/body-bg.jpg');}	     
.case {background: none;}
</style>
<![endif]-->
</head>
<body class="body" style="margin: 0; padding: 0; background-color: #234865; background-image: url(images/body-bg.jpg); background-repeat: repeat;" marginheight="0" topmargin="0" marginwidth="0" leftmargin="0">
<!--100% body table-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
	<td class="case" bgcolor="#234865" style="background-color: #234865; background-image: url(images/body-bg.jpg); background-repeat: repeat;">
		<!--[if gte mso 9]>
        <td style="background: none;">
        <![endif]-->
		<!--header text-->
		<table style="background-image: url(header-lines.jpg); background-position: bottom; background-repeat: repeat-x;" bgcolor="#1d3952" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
		<tr>
			<td>
				<table id="top" width="578" border="0" align="center" cellpadding="0" cellspacing="0">
				<tr>
					<td valign="top" align="center" height="60">
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="10">
							</td>
						</tr>
						</table>
						<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #4484b5; margin: 0; padding: 0;">
							You’re receiving this newsletter because you signed up for it
						</p>
						<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #4484b5; margin: 0; padding: 0;">
							Having trouble reading this email? <a style="color:#6aacdf" href="#">View it in your browser.</a> | <a style="color:#6aacdf" href="#">Click here to instantly unsubscribe.</a>
						</p>
					</td>
				</tr>
				</table>
			</td>
		</tr>
		</table>
		<!--/header text-->
		<!--intro-->
		<table width="578" border="0" align="center" cellpadding="0" cellspacing="0">
		<tr>
			<td valign="top" height="20">
			</td>
		</tr>
		<tr>
			<td background="images/header-bg.jpg" bgcolor="#c6d2db" valign="top" height="79">
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td height="22" width="68%">
					</td>
					<td height="20" width="32%">
					</td>
				</tr>
				<tr>
					<td valign="top">
						<table width="82%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td align="center" valign="bottom" width="7%">
								<table width="100%" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td width="15">
									</td>
									<td width="10">
									</td>
								</tr>
								</table>
							</td>
							<td valign="middle" width="93%">
								<h1 style="font-family: Helvetica, Arial, sans-serif; font-size: 24px; margin: 0px; padding: 0px; text-shadow: 1px 1px 1px #FFFFFF; color: #244a67">abc <span style=" font-weight: normal;">Widgets Corp</span></h1>
							</td>
						</tr>
						</table>
					</td>
					<td valign="top">
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="10">
							</td>
						</tr>
						</table>
						<p style=" font-family:helvetica, arial, sans-serif; font-weight: bold; font-size: 12px; margin: 0px; padding: 0px; text-shadow: 1px 1px 1px #ffffff; color: #336791">
							Tuesday, March 2, 2010
						</p>
					</td>
				</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td valign="top" height="20">
			</td>
		</tr>
		</table>
		<!--/intro-->
		<!--content section-->
		<table width="576" border="0" align="center" cellpadding="0" cellspacing="0">
		<tr>
			<td width="350" valign="top">
				<table width="100%" border="0" cellpadding="20" cellspacing="0">
				<tr>
					<td valign="top" bgcolor="#1c3851" background="images/content-bg.jpg" style="border: solid 1px #193044; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px;">
						<h2 style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; margin: 0px; padding: 0px; text-shadow: 1px 1px 1px #333333; color: #62b6ee">Lorem ipsum dolar sit amet</h2>
						<!--break-->
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="10">
							</td>
						</tr>
						</table>
						<!--/break-->
						<p style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; margin-top: 0px; margin-bottom: 0px; padding: 0px; color: #e7eff6">
							Suspendisse potenti--Fusce eu ante in sapien vestibulum sagittis. Cras purus. Nunc rhoncus.
						</p>
						<!--break-->
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="10">
							</td>
						</tr>
						</table>
						<!--/break-->
						<p style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; margin-top: 0px; margin-bottom: 0px; padding: 0px; color: #e7eff6">
							 Donec imperdiet, nibh sit amet pharetra placerat, tortor purus condimentum lectus, at <a style="color:#62b6ee;" href="#">dignissim nibh</a> velit vitae sem. Nunc condimentum blandit phasellus facilisis neque vitae purus.
						</p>
						<table width="88%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td valign="middle" height="40">
								<img src="images/line2.jpg" height="12" width="309">
							</td>
						</tr>
						</table>
						<img style="-moz-box-shadow: 2px 2px 4px #000; -webkit-box-shadow: 2px 2px 4px #000; box-shadow: 2px 2px 4px #000; margin: 0; padding: 0; display: block;" src="images/img2.jpg" height="174" width="309" alt="img2">
						<!--break-->
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="10">
							</td>
						</tr>
						</table>
						<!--/break-->
						<p style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; margin-top: 0px; margin-bottom: 0px; padding: 0px; color: #e7eff6">
							Suspendisse potenti--Fusce eu ante in sapien vestibulum sagittis. Cras purus. Nunc rhoncus.
						</p>
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td valign="middle" height="40">
								<img src="images/line2.jpg" height="12" width="309">
							</td>
						</tr>
						</table>
						<h2 style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; margin: 0px; padding: 0px; text-shadow: 1px 1px 1px #333333; color: #62b6ee">Lorem ipsum dolar sit amet</h2>
						<!--break-->
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="10">
							</td>
						</tr>
						</table>
						<!--/break-->
						<p style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; margin-top: 0px; margin-bottom: 0px; padding: 0px; color: #e7eff6">
							Donec imperdiet, nibh sit amet pharetra placerat, tortor purus condimentum lectus, at dignissim nibh velit vitae sem. Nunc condimentum blandit phasellus facilisis neque vitae purus.
						</p>
						<!--break-->
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="10">
							</td>
						</tr>
						</table>
						<!--/break-->
						<p style="font-family: Helvetica, Arial, sans-serif; list-style: none; font-size: 13px; margin-top: 0px; margin-bottom: 5px; padding: 0px; color: #e7eff6">
							<img src="images/li.png" height="14" width="13"> Aliquam lectus orci, adipiscing
						</p>
						<p style="font-family: Helvetica, Arial, sans-serif; list-style: none; font-size: 13px; margin-top: 0px; margin-bottom: 5px; padding: 0px; color: #e7eff6">
							<img src="images/li.png" height="14" width="13"> Aliquam lectus orci, adipiscing
						</p>
						<p style="font-family: Helvetica, Arial, sans-serif; list-style: none; font-size: 13px; margin-top: 0px; margin-bottom: 5px; padding: 0px; color: #e7eff6">
							<img src="images/li.png" height="14" width="13"> Aliquam lectus orci, adipiscing
						</p>
					</td>
				</tr>
				</table>
				<!--break-->
			</td>
			<td valign="top">
				<!--section-->
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td>
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="21">
							</td>
							<td>
								<table width="100%" border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td height="17" width="204" valign="top" bgcolor="#1c3851" background="images/content-bg.jpg" style="border: solid 1px #193044; -webkit-border-top-left-radius: 8px; -khtml-border-radius-topleft: 8px; -moz-border-radius-topleft: 8px; border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -khtml-border-radius-topright: 8px; -moz-border-radius-topright: 8px; border-top-right-radius: 8px; border-bottom: none;">
									</td>
								</tr>
								</table>
							</td>
							<td width="19">
							</td>
						</tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="38" align="center">
								<table width="202" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td valign="top" style="background-image: url(images/ribbon.jpg); background-repeat: no-repeat; background-position: center;" bgcolor="#2b7ab7" height="38">
										<table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tr>
											<td width="10">
											</td>
											<td height="6">
											</td>
											<td height="6">
											</td>
										</tr>
										<tr>
											<td>
											</td>
											<td>
												<p style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; margin-top: 0px; margin-bottom: 0px; padding: 0px; color: #1f2d41; font-size: 16px; font-weight: bold; text-shadow: 0px 1px 1px #ffffff">
													In this issue
												</p>
											</td>
											<td>
												<img style="margin: 0; padding: 0; display: block;" src="images/i.png" width="18" height="20" alt="info">
											</td>
										</tr>
										</table>
									</td>
								</tr>
								</table>
							</td>
						</tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="20">
							</td>
							<td>
								<table width="100%" border="0" cellpadding="20" cellspacing="0">
								<tr>
									<td width="204" valign="top" bgcolor="#1c3851" background="images/content-bg.jpg" style="border: solid 1px #193044; -webkit-border-bottom-left-radius: 8px; -khtml-border-radius-bottomleft: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -khtml-border-radius-bottomright: 8px; -moz-border-radius-bottomright: 8px; border-bottom-right-radius: 8px; border-top: none;">
										<p style="font-family: Helvetica, Arial, sans-serif; list-style: none; font-size: 13px; margin-top: 0px; margin-bottom: 5px; padding: 0px; color: #e7eff6">
											<img src="images/li.png" height="14" width="13"> Aliquam lectus orc
										</p>
										<p style="font-family: Helvetica, Arial, sans-serif; list-style: none; font-size: 13px; margin-top: 0px; margin-bottom: 5px; padding: 0px; color: #e7eff6">
											<img src="images/li.png" height="14" width="13"> Aliquam lectus orci
										</p>
										<p style="font-family: Helvetica, Arial, sans-serif; list-style: none; font-size: 13px; margin-top: 0px; margin-bottom: 5px; padding: 0px; color: #e7eff6">
											<img src="images/li.png" height="14" width="13"> Aliquam lectus orci
										</p>
										<p style="font-family: Helvetica, Arial, sans-serif; list-style: none; font-size: 13px; margin-top: 0px; margin-bottom: 5px; padding: 0px; color: #e7eff6">
											<img src="images/li.png" height="14" width="13"> Aliquam lectus orci
										</p>
									</td>
								</tr>
								</table>
							</td>
							<td width="19">
							</td>
						</tr>
						</table>
					</td>
				</tr>
				</table>
				<!--/section-->
				<!--break-->
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td height="20">
					</td>
				</tr>
				</table>
				<!--/break-->
				<!--section-->
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td>
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="21">
							</td>
							<td>
								<table width="100%" border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td height="17" width="204" valign="top" bgcolor="#1c3851" background="images/content-bg.jpg" style="border: solid 1px #193044; -webkit-border-top-left-radius: 8px; -khtml-border-radius-topleft: 8px; -moz-border-radius-topleft: 8px; border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -khtml-border-radius-topright: 8px; -moz-border-radius-topright: 8px; border-top-right-radius: 8px; border-bottom: none;">
									</td>
								</tr>
								</table>
							</td>
							<td width="19">
							</td>
						</tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="38" align="center">
								<table width="202" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td valign="top" style="background-image: url(images/ribbon.jpg); background-repeat: no-repeat; background-position: center;" bgcolor="#2b7ab7" height="38">
										<table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tr>
											<td width="10">
											</td>
											<td height="6">
											</td>
											<td height="6">
											</td>
										</tr>
										<tr>
											<td>
											</td>
											<td>
												<p style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; margin-top: 0px; margin-bottom: 0px; padding: 0px; color: #1f2d41; font-size: 16px; font-weight: bold; text-shadow: 0px 1px 1px #ffffff">
													In other news
												</p>
											</td>
											<td>
												<img style="margin: 0; padding: 0; display: block;" src="images/world.png" height="19" width="19" alt="other news">
											</td>
										</tr>
										</table>
									</td>
								</tr>
								</table>
							</td>
						</tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="20">
							</td>
							<td>
								<table width="100%" border="0" cellpadding="20" cellspacing="0">
								<tr>
									<td width="204" valign="top" bgcolor="#1c3851" background="images/content-bg.jpg" style="border: solid 1px #193044; -webkit-border-bottom-left-radius: 8px; -khtml-border-radius-bottomleft: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -khtml-border-radius-bottomright: 8px; -moz-border-radius-bottomright: 8px; border-bottom-right-radius: 8px; border-top: none;">
										<p style="font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; margin-top: 0px; margin-bottom: 0px; padding: 0px; text-shadow: 1px 1px 1px #333333; color: #62b6ee">
											Lorem ipsum dolar sit amet
										</p>
										<!--break-->
										<table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tr>
											<td height="10">
											</td>
										</tr>
										</table>
										<!--/break-->
										<p style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; margin-top: 0px; margin-bottom: 0px; padding: 0px; color: #e7eff6">
											Nunc ipsum metus, iaculis sit amet, interdum at. Donce imperiat ccumsan felis. <a style="color:#62b6ee;" href="#">dignissim nibh</a> Cras sed ante.
										</p>
										<table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tr>
											<td valign="middle" height="40">
												<img src="images/line3.jpg" width="144" height="10">
											</td>
										</tr>
										</table>
										<p style="font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; margin-top: 0px; margin-bottom: 0px; padding: 0px; text-shadow: 1px 1px 1px #333333; color: #62b6ee">
											Lorem ipsum dolar sit amet
										</p>
										<!--break-->
										<table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tr>
											<td height="10">
											</td>
										</tr>
										</table>
										<!--/break-->
										<p style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; margin-top: 0px; margin-bottom: 0px; padding: 0px; color: #e7eff6">
											Nunc ipsum metus, iaculis sit amet, interdum at. Donce imperiat ccumsan felis. <a style="color:#62b6ee;" href="#">dignissim nibh</a> Cras sed ante.
										</p>
										<table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tr>
											<td valign="middle" height="40">
												<img src="images/line3.jpg" width="144" height="10">
											</td>
										</tr>
										</table>
									</td>
								</tr>
								</table>
							</td>
							<td width="19">
							</td>
						</tr>
						</table>
					</td>
				</tr>
				</table>
				<!--/section-->
				<!--break-->
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td height="20">
					</td>
				</tr>
				</table>
				<!--/break-->
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td width="20">
					</td>
					<td>
						<table width="100%" border="0" cellpadding="20" cellspacing="0">
						<tr>
							<td width="204" valign="top">
								<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td width="77%">
										<h3 style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; margin: 0px; padding: 0px; text-shadow: 1px 1px 1px #000; color: #62b6ee">Foward to friend</h3>
									</td>
									<td align="right" width="23%">
										<img src="images/foward.png" width="29" height="24" alt="foward">
									</td>
								</tr>
								</table>
								<!--break-->
								<table width="100%" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td height="10">
									</td>
								</tr>
								</table>
								<!--/break-->
								<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td width="77%">
										<h3 style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; margin: 0px; padding: 0px; text-shadow: 1px 1px 1px #000; color: #62b6ee">Unsubscribe</h3>
									</td>
									<td align="right" width="23%">
										<img src="images/unsubscribe.png" width="29" height="26" alt="unsubscribe">
									</td>
								</tr>
								</table>
							</td>
						</tr>
						</table>
					</td>
					<td width="19">
					</td>
				</tr>
				</table>
			</td>
		</tr>
		</table>
		<!--break-->
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="25">
			</td>
		</tr>
		</table>
		<!--/break-->
		<!--footer-->
		<table style="background-image: url(images/footer-lines.jpg); background-position: top; background-repeat: repeat-x;" bgcolor="#1c293b" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
		<tr>
			<td>
				<table id="top" width="578" border="0" align="center" cellpadding="0" cellspacing="0">
				<tr>
					<td valign="top" align="center" height="60">
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="15">
							</td>
						</tr>
						</table>
						<p style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; margin: 0px; padding: 0px; color: #30648d; text-shadow: 1px 1px 1px #000;">
							abcWidgets and the abcWidgets Logo are registered trademarks of abcWidgets Corp.
						</p>
						<p style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; margin: 0px; padding: 0px; color: #30648d; text-shadow: 1px 1px 1px #000;">
							ABCWidgets Corp — 123 Some Street, City, ST 99999. Ph +1 4 1477 89 745
						</p>
					</td>
				</tr>
				</table>
			</td>
		</tr>
		</table>
		<!--/footer-->
	</td>
</tr>
</table>
<!--/100% body table-->
</body>
</html>