<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clean Mail Code Sample</title>
<style type="text/css">
body {
margin:0;
padding:0;
background-color:#eeeeee;
color:#777777;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
}
h1, h2 {
color:#3b5167;
margin-bottom:10px !important;
}
a, a:link, a:visited {
color:#e84d5c;
text-decoration:none;
}
a:hover, a:active {
text-decoration:none;
color:#bb3644 !important;
}
p {
margin:0 0 14px 0;
}
img {
border:0;
}
table td {
border-collapse:collapse;
}
.highlighted {
background-color:#ffe69e;
color:#3b5167;
padding:2px 4px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
}
/*Hotmail and Yahoo specific code*/
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
.yshortcuts {color: #e84d5c;}
.yshortcuts a span {color: #e84d5c; border-bottom: none !important; background: none !important;}
/*Hotmail and Yahoo specific code*/
</style>
...
..
</head>
<body background="images/bg.jpg">
<table id="pageContainer" width="100%" align="center" background="images/bg.jpg" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background-repeat:repeat; background-color:#eeeeee;">
<tr>
<td style="padding:30px 20px 40px 20px;">
<!-- Start of logo, date, forward and home links container -->
<table width="600" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:left; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:15pt; color:#777777;">
<tr>
<td colspan="2" style="padding-bottom:10px; font-size:12px; line-height:100%; text-align:right; color:#777777;">
Problem viewing email? <a href="#" style="text-decoration:none; color:#e84d5c; line-height:100%;">Click here to view it online</a>.
</td>
</tr>
<tr>
<td bgcolor="#e84d5c" colspan="2" height="7" style="font-size:2px; line-height:0px;"><img alt="" height="7" src="images/blank.gif" width="600" align="left" vspace="0" hspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td bgcolor="#ffffff" width="255" valign="middle" style="padding:40px 30px 35px 30px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:100%; color:#e84d5c;">
<img alt="Logo" src="images/logo.png" align="left" border="0" vspace="0" hspace="0" style="display:block;" />
</td>
<td bgcolor="#ffffff" width="255" valign="middle" style="padding:20px 30px 15px 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:100%; color:#777777; text-align:right;">
<table width="254" align="right" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:center; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:100%; color:#777777;">
<tr>
<td width="66" valign="top" style="line-height:100%; color:#e84d5c;">
<img alt="●" src="images/calendarIcon.png" height="32" width="32" border="0" vspace="0" hspace="17" style="display:block;" /> November
</td>
<td width="20" style="padding:0 10px; line-height:100%; text-align:center;"><img alt="" src="images/separator.png" width="20" height="50" border="0" style="vertical-align:0px; display:block;" /></td>
<td width="54" valign="top" style="line-height:100%;">
<a href="#" style="text-decoration:none; color:#e84d5c; display:block; line-height:100%;"><img alt="●" src="images/forwardIcon.png" height="32" width="32" border="0" vspace="0" hspace="11" style="display:block;" /> Forward</a>
</td>
<td width="20" style="padding:0 10px; line-height:100%; text-align:center;"><img alt="" src="images/separator.png" width="20" height="50" border="0" style="vertical-align:0px; display:block;" /></td>
<td width="54" valign="top" style="line-height:100%;">
<a href="#" style="text-decoration:none; color:#e84d5c; display:block; line-height:100%;"><img alt="●" src="images/websiteIcon.png" height="32" width="32" border="0" vspace="0" hspace="11" style="display:block;" /> Website</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" height="11" style="font-size:2px; line-height:0px;"><img alt="" src="images/divider.png" height="11" width="600" align="left" border="0" vspace="0" hspace="0" style="display:block;" /></td>
</tr>
</table>
<!-- End of logo, date, forward and home links container -->
<!-- Start of text banner -->
<table bgcolor="#ffffff" width="600" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:left; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:15pt; color:#777777;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#777777;"><img alt="image" src="images/textBanner.png" width="600" height="100" align="left" border="0" vspace="0" hspace="0" style="display:block;" /></td>
</tr>
<tr>
<td height="11" style="font-size:2px; line-height:0px;"><img alt="" src="images/divider.png" height="11" width="600" align="left" border="0" vspace="0" hspace="0" style="display:block;" /></td>
</tr>
</table>
<!-- End of text banner -->
<!-- Start of content with author bio -->
<table bgcolor="#ffffff" width="600" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:left; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:15pt; color:#777777;">
<tr>
<td style="padding-top:30px; padding-right:30px; padding-left:30px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:100%; color:#aaaaaa;">
<img alt="" src="images/dateIcon.png" height="14" width="12" border="0" vspace="0" hspace="0" style="vertical-align:-1px;" /> 14.12.2012 <img alt="" src="images/categoryIcon.png" height="14" width="15" border="0" vspace="0" hspace="0" style="vertical-align:-2px;" /> Latest News
</td>
</tr>
<tr>
<td style="padding-right:30px; padding-left:30px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#777777;">
<p style="font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:36px; line-height:30pt; color:#3b5167; font-weight:300; margin-top:0; margin-bottom:20px !important; padding:0; text-indent:-3px;">Email marketing for your business</p>
</td>
</tr>
<tr>
<td style="padding-right:30px; padding-bottom:30px; padding-left:30px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#777777;">
<table width="250" align="right" cellpadding="0" cellspacing="0" style=" border-collapse:collapse; border-width:0; border-spacing: 0;">
<tr>
<td colspan="2" height="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="images/blank.gif" width="10" align="left" vspace="0" hspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td width="30" rowspan="2"><img alt="" height="10" src="images/blank.gif" width="30" align="left" vspace="0" hspace="0" border="0" style="display:block;" /></td>
<td bgcolor="#e84d5c" height="7" style="font-size:2px; line-height:0px;"><img alt="" height="7" src="images/blank.gif" width="220" align="left" vspace="0" hspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td bgcolor="#F4F4F4" style="padding-top:20px; padding-right:20px; padding-bottom:25px; padding-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#777777;">
<p style="font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:20px; line-height:19pt; color:#3b5167; font-weight:300; margin-top:0; margin-bottom:20px !important; padding:0; text-indent:-1px;">Britney Smith</p>
<table width="100" align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0;">
<tr>
<td style="padding-top:5px; padding-right:20px;">
<img alt="image" src="images/author.jpg" height="80" width="80" align="left" border="0" hspace="0" vspace="0" style="display: block;"/></td>
</tr>
</table>
Proin sed purus vitae malesuada pulvinar leo ac magna et odio tempus dictum elementum auctor orci, <a href="#" style="text-decoration:underline; color:#e84d5c;">Visit website</a>.
</td>
</tr>
<tr>
<td colspan="2" height="20"><img alt="" height="20" src="images/blank.gif" width="10" align="left" vspace="0" hspace="0" border="0" style="display:block;" /></td>
</tr>
</table>
Integer luctus interdum lectus, mattis lacus tristique tempor eros vel imperdiet. Fusce et lectus dui, quis tristique lectus. Etiam libero mauris, blandit a egestas et, posuere at enim. Mauris eleifend tempor magna, non auctor orci tincidunt vel.
<br/><br/> Etiam non arcu orci. Fusce nec justo et neque adipiscing bibendum <span class="highlighted" style="background-color:#ffe69e; color:#3b5167; padding:2px 4px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;">some highlighted text</span>
felis, ac semper purus lobortis sit amet. Maecenas varius, nibh sit amet suscipit hendrerit arcu massa libero, vitae gravida neque mi eu nulla. Mauris in justo dolor, sit amet aliquet nibh. Integer ut semper risus. Nulla consectetur placerat tortor ut lacinia.
<br/><br/> Quisque risus sem, luctus et interdum in, pellentesque sed lacus.
Phasellus eleifend tempus lorem quis bibendum. Etiam tempor, lacus a consequat commodo, ligula mauris ultrices velit, a ornare augue ipsum in mi. Praesent nisi lacus, blandit sit amet iaculis et, dictum consequat diam. Vestibulum ut tincidunt elit. Curabitur mattis, lacus et tempus tempus.
<table width="108" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing:0;">
<tr>
<td style="padding-top:20px;"><a href="#"><img alt="Read More" src="images/readMore.png" height="34" width="108" border="0" vspace="0" hspace="0" style="display:block;" /></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="11" style="font-size:2px; line-height:0px;"><img alt="" src="images/divider.png" height="11" width="600" align="left" border="0" vspace="0" hspace="0" style="display:block;" /></td>
</tr>
</table>
<!-- End of content with author bio -->
...
..
</td>
</tr>
</table>
</body>
</html>
Clean Mail © gifky.com 2012 all rights reserved.
