Sukar view live demo

Sukar is the first online private shopping club in the Middle East. Their site caters to over 1.6 million members and operates across nine countries. They came to me with the request to provide a set of professional looking and easy to update HTML emails. I was only too happy to oblige.

HTML Code

						
<!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" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<meta name="format-detection" content="telephone=no"/>

	<title>Mother's day is almost here | Sukar</title>
	<style type="text/css">
		/* Based on The MailChimp Reset */  
		/* Client-specific Styles */
		#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
		body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} 
		/* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/ 
		.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */  
		.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 120%;}
		/* Forces Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */ 
		#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
		/* End reset */

		/* Some sensible defaults for images */
		img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} 
		a img {border:none;} 		

		/* Yahoo paragraph fix */
		p {margin: 1em 0;}

		/* Hotmail header color reset */
		h1, h2, h3, h4, h5, h6 {color: #363636 !important;}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: blue !important;}

		h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
		color: red !important; /* There is limited support for psuedo classes in email clients, this was added just for good measure. */
		}

		h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
		color: purple !important; /* There is limited support for psuedo classes in email clients, this was added just for good measure. */
		}

		/* Outlook 07, 10 Padding issue fix */
		table td {border-collapse: collapse;}

		a {color: #7a6f00;}
	</style>
</head>
<body bgcolor="#cfcfcf" style="font: normal 12px/16px Arial,sans-serif;">
<!-- Wrapper/Container Table -->
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" bgcolor="#ffffff">
	<tr>
		<td align="center" valign="top" bgcolor="#cfcfcf" style="padding:20px 0;">				
			
			<!-- Start Header Table -->
			<table align="center" bgcolor="#f5f5f5" border="0" cellpadding="0" cellspacing="0" width="610" style="margin:0; padding:0;">
				<tr><td colspan="4" style="padding:0; font-size:0; line-height:0; height:5px; background:#f3f3f3;"></td></tr>
				<tr>
					<td style="padding:0; font-size:0; line-height:0; width:5px; background:#f3f3f3;"></td>
					<td align="left" bgcolor="#ffffff" valign="top" width="300" style="padding:0px;">
						<table align="left" cellpadding="0" cellspacing="0" border="0" width="300">
							<tr>
								<td align="left" style="font-family:'Arial'; font-size:10px; line-height:12px; color:#adadad; padding:5px 0 0 15px;">
									Do not miss our daily great offers.<br>If you cannot see this message, please click 
									<a href="#" target="_blank">here</a>
								</td>
							</tr>
							<tr>
								<td align="left" height="258" valign="bottom">
									<img src="images/image.jpg" alt="Mother's Day Special" width="230px" height="195px" style="display:block; margin:0;"/>
								</td>
							</tr>
						</table>
					</td>
					<td align="right" valign="top" bgcolor="f5f5f5" width="300" style="padding:0px;">
						<table align="right" bgcolor="#f5f5f5" border="0" cellpadding="0" cellspacing="0" height="284" width="300" style="margin:0; padding:0;">
							<tr>
								<td align="right" bgcolor="#f5f5f5" colspan="2" valign="top" width="100%" style="padding:0; line-height:0; font-size:0;">
									<img src="images/graphic_top.jpg" alt="" width="167px" height="106px" style="display:block; margin:0;" vspace="0" hspace="0"/>
								</td>
							</tr>
							<tr>
								<td align="left" rowspan="2" valign="bottom" width="106" style="padding: 0 0 0 5px;">
									<img src="images/graphic_bottom.jpg" alt="" width="106px" height="176px" style="display:block; margin:0;"/>
								</td>
								<td align="left" width="184" valign="top">
									<a href="#" target="_blank"><img src="images/logo_light.jpg" alt="Sukar. Lifestyle. Now." width="107px" height="76px" style="display:block; margin:0;"/></a>
								</td>
							</tr>
							<tr>
								<td align="center" width="184">
									<table align="center" cellpadding="0" cellspacing="0">
										<tr>
											<td style="padding:5px;"><a href="#" target="_blank"><img src="images/facebook.jpg" alt="Facebook" width="31" height="36" style="display:block; margin:0;"/></a></td>
											<td style="padding:5px;"><a href="#" target="_blank"><img src="images/twitter.jpg" alt="Twitter" width="31" height="37" style="display:block; margin:0;"/></a></td>
											<td style="padding:5px;"><a href="#" target="_blank"><img src="images/email.jpg" alt="Email" width="30" height="37" style="display:block; margin:0;"/></a></td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
					</td>
					<td style="padding:0; font-size:0; line-height:0; width:5px; background:#f3f3f3;"></td>
				</tr>
			</table>
			<!-- End Header Table -->
			
			<!-- Start Ribbon Table -->
			<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="646" style="margin:0; padding:0;">
				<tr>
					<td valign="top" width="18" style="padding:0;">
						<img src="images/ribbon_edge_left.jpg" alt="" width="18" height="35" style="display:block; margin:0;"/>
					</td>
					<td background="images/ribbon_side_left.jpg" bgcolor="#d5bf00" width="5" style="padding:0;"></td>
					<td align="center" background="images/ribbon.jpg" bgcolor="#d5bf00" valign="top" width="600" style="padding:0; background-repeat: repeat-x; background-position: left top;">
						<table border="0" cellpadding="0" cellspacing="0" width="100%">
							<tr>
								<td align="right" width="280" style="color:#8a7d00; font-family:Arial; font-size:16px; font-weight:900; line-height:28px; padding:0 20px 0 0;">
									Surprize! Surprize!
								</td>
								<td align="left" width="280" style="color:#363636; font-family:Arial; font-size:13px; line-height:28px; padding:0 0 0 20px;">extra special deals for <b>Mother’s Day</b></td>								
							</tr>
						</table>
					</td>
					<td background="images/ribbon_side_right.jpg" bgcolor="#d5bf00" width="5" style="padding:0;"></td>
					<td valign="top" width="18" style="padding:0;">
						<img src="images/ribbon_edge_right.jpg" alt="" width="18" height="35" style="display:block; margin:0;"/>
					</td>
				</tr>
			</table>
			<!-- End Ribbon Table -->
			
			<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="610" style="margin:0; padding:0;">
				<tr>
					<td style="padding:0; font-size:0; line-height:0; width:5px; background:#f3f3f3;"></td>
					<td>
						<!-- Start First Product Table -->
						<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="600" style="margin:0; padding:0;">
							<tr>
								<td align="center" style="padding:20px 10px;">
									<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
										<tr>
											<!-- Short Description -->
											<td align="left" valign="top" width="180" style="padding:10px 5px 5px;">
												<h4 style="color:#363636; font-family:Arial; font-size:20px; font-weight:900; line-height:20px; margin: 0 0 10px 0; margin-bottom: 10px;">On Sale Now</h4>
												<p style="color:#363636; font-family:Arial; font-size:12px; margin:0; margin-bottom:0; line-height:16px;">Lorem ipsum dolor sit amet, con sectetur adipiscing elit, sed do ei usmod tempor incidiunt ut labore 
													et dolore magna aliqua. Ut enim aad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
											</td>
											
											<!-- First Product -->
											<td align="left" valign="top" width="180" style="padding:5px;">
												<table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="178" style="border-color: #f2f2f2; border-style: solid; border-width: 1px;">
													<!-- Product Image -->
													<tr>
														<td align="center" colspan="2" style="padding: 5px;">
															<a href="#" target="_blank"><img src="images/prod1.jpg" alt="Women's Shoes" width="168" height="125" style="display:block; margin:0;"/></a>
														</td>
													</tr>
													
													<!-- Product Name -->											
													<tr>
														<td align="left" colspan="2" valign="top" style="color:#363636; font-family:Arial; font-size:11px; line-height:13px; padding:0 5px 3px; ">
															Women's Shoes
														</td>
													</tr>
													
													<!-- Product Price -->
													<tr>
														<td align="left" valign="top" width="132" style="color:#363636; font-family:Arial; font-size:11px; line-height:13px; padding:0 5px 5px 5px; ">
															<span>Price: $340</span><br/>
															<span style="color:#8a7d00;">Sale ends: 01.04.2012</span>
														</td>
														<td align="right" valign="bottom" width="31" style="padding: 0 5px 5px 0;">
															<a href="#" target="_blank">
																<img src="images/buy.jpg" alt="Buy" height="18" width="31" style="display:block; margin:0;"/>
															</a>
														</td>
													</tr>
												</table>
											</td>
											
											<!-- Second Product -->
											<td align="left" valign="top" width="180" style="padding:5px;">
												<table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="178" style="border-color: #f2f2f2; border-style: solid; border-width:1px;">
													<!-- Product Image -->
													<tr>
														<td align="center" colspan="2" style="padding: 5px;">
															<a href="#" target="_blank"><img src="images/prod2.jpg" alt="Women's Shoes" width="168" height="125" style="display:block; margin:0;"/></a>
														</td>
													</tr>
													
													<!-- Product Name -->
													<tr>
														<td align="left" colspan="2" valign="top" style="color:#363636; font-family:Arial; font-size:11px; line-height:13px; padding:0 5px 3px; ">
															Women's Shoes
														</td>
													</tr>
													
													<!-- Product Price -->
													<tr>
														<td align="left" valign="top" width="132" style="color:#363636; font-family:Arial; font-size:11px; line-height:13px; padding:0 5px 5px 5px; ">
															<span>Price: $340</span><br/>
															<span style="color:#8a7d00;">Sale ends: 01.04.2012</span>
														</td>
														<td align="right" valign="bottom" width="31" style="padding: 0 5px 5px 0;">
															<a href="#" target="_blank">
																<img src="images/buy.jpg" alt="Buy" height="18" width="31" style="display:block; margin:0;"/>
															</a>
														</td>
													</tr>
												</table>
											</td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
						<!-- End First Product Table -->
						
						<!-- Start Second Product Table -->
						<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="600" style="margin:0; padding:0;">
							<tr>
								<td align="center" valign="top" style="padding:0;">
									<img src="images/separator_top.jpg" alt="" height="18" width="558" style="display:block; margin:0;"/>
								</td>
							</tr>
							<tr>
								<td style="padding:10px 0;">
									<table align="center" border="0" cellspacing="5" cellpadding="0" width="570">
										<tr>
											<td align="center" width="82" style="padding:2px; border:1px solid #f2f2f2;">
												<a href="#" target="_blank">
													<img src="images/prod15.jpg" alt="Clothing" width="82" height="82" style="display:block; margin:0;"/>
												</a>
											</td>
											<td align="center" width="82" style="padding:2px; border:1px solid #f2f2f2;">
												<a href="#" target="_blank">
													<img src="images/prod4.jpg" alt="Watches" width="82" height="82" style="display:block; margin:0;"/>
												</a>
											</td>
											<td align="center" width="82" style="padding:2px; border:1px solid #f2f2f2;">
												<a href="#" target="_blank">
													<img src="images/prod5.jpg" alt="Tops" width="82" height="82" style="display:block; margin:0;"/>
												</a>
											</td>
											<td align="center" width="82" style="padding:2px; border:1px solid #f2f2f2;">
												<a href="#" target="_blank">
													<img src="images/prod6.jpg" alt="Shoes" width="82" height="82" style="display:block; margin:0;"/>
												</a>
											</td>
											<td align="center" width="82" style="padding:2px; border:1px solid #f2f2f2;">
												<a href="#" target="_blank">
													<img src="images/prod7.jpg" alt="Scarfs" width="82" height="82" style="display:block; margin:0;"/>
												</a>
											</td>
											<td align="center" width="82" style="padding:2px; border:1px solid #f2f2f2;">
												<a href="#" target="_blank">
													<img src="images/prod8.jpg" alt="Makeup" width="82" height="82" style="display:block; margin:0;"/>
												</a>
											</td>
										</tr>							
									</table>
								</td>
							</tr>
							<tr>
								<td align="center" valign="top" style="padding:0;">
									<img src="images/separator_bottom.jpg" alt="" height="18" width="558" style="display:block; margin:0;"/>
								</td>
							</tr>
						</table>
						<!-- End Second Product Table -->	
						
						<!-- Start Third Product Table -->
						<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="600" style="margin:0; padding:0;">
							<tr>
								<td align="center" style="padding:20px 10px;">
									<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
										<tr>
											<!-- First Product  -->
											<td align="left" valign="top" width="180" style="padding:5px;">
												<table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="178" style="border-color: #f2f2f2; border-style: solid; border-width: 1px;">
													<!-- Product Image -->
													<tr>
														<td align="center" colspan="2" style="padding: 5px;">
															<a href="#" target="_blank"><img src="images/prod9.jpg" alt="Women's Shoes" width="168" height="125" style="display:block; margin:0;"/></a>
														</td>
													</tr>													
													<!-- Product Name -->
													<tr>
														<td align="left" colspan="2" valign="top" style="color:#363636; font-family:Arial; font-size:11px; line-height:13px; padding:0 5px 3px; ">
															Women's Shoes
														</td>
													</tr>													
													<!-- Product Price -->
													<tr>
														<td align="left" valign="top" width="132" style="color:#363636; font-family:Arial; font-size:11px; line-height:13px; padding:0 5px 5px 5px; ">
															<span>Price: $340</span><br/>
															<span style="color:#8a7d00;">Sale ends: 01.04.2012</span>
														</td>
														<td align="right" valign="bottom" width="31" style="padding: 0 5px 5px 0;">
															<a href="#" target="_blank">
																<img src="images/buy.jpg" alt="Buy" height="18" width="31" style="display:block; margin:0;"/>
															</a>
														</td>
													</tr>
												</table>
											</td>
											
											<!-- Second Product  -->
											<td align="left" valign="top" width="180" style="padding:5px;">
												<table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="178" style="border-color: #f2f2f2; border-style: solid; border-width: 1px;">
													<!-- Product Image -->
													<tr>
														<td align="center" colspan="2" style="padding: 5px;">
															<a href="#" target="_blank"><img src="images/prod10.jpg" alt="Women's Shoes" width="168" height="125" style="display:block; margin:0;"/></a>
														</td>
													</tr>													
													<!-- Product Name -->
													<tr>
														<td align="left" colspan="2" valign="top" style="color:#363636; font-family:Arial; font-size:11px; line-height:13px; padding:0 5px 3px; ">
															Women's Shoes
														</td>
													</tr>													
													<!-- Product Price -->
													<tr>
														<td align="left" valign="top" width="132" style="color:#363636; font-family:Arial; font-size:11px; line-height:13px; padding:0 5px 5px 5px; ">
															<span>Price: $340</span><br/>
															<span style="color:#8a7d00;">Sale ends: 01.04.2012</span>
														</td>
														<td align="right" valign="bottom" width="31" style="padding: 0 5px 5px 0;">
															<a href="#" target="_blank">
																<img src="images/buy.jpg" alt="Buy" height="18" width="31" style="display:block; margin:0;"/>
															</a>
														</td>
													</tr>
												</table>
											</td>
											
											<!-- Short Description  -->
											<td align="left" valign="top" width="180" style="padding:10px 5px 5px;">
												<h4 style="color:#363636; font-family:Arial; font-size:20px; font-weight:900; line-height:20px; margin: 0 0 10px 0; margin-bottom: 10px;">On Sale Now</h4>
												<p style="color:#363636; font-family:Arial; font-size:12px; margin:0; margin-bottom:0; line-height:16px;">Lorem ipsum dolor sit amet, con sectetur adipiscing elit, sed do ei usmod tempor incidiunt ut labore 
													et dolore magna aliqua. Ut enim aad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
											</td>
										</tr>
									</table>
								</td>								
							</tr>
						</table>
						<!-- End Third Product Table -->
						
						<!-- Start Fourth Product Table -->
						<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="600" style="margin:0; padding:0;">
							<tr>
								<td style="padding:10px 0;">
									<table align="center" border="0" cellspacing="5" cellpadding="0" width="570">
										<tr>
											<td align="center" width="82" style="padding:2px; border:1px solid #f2f2f2;">
												<a href="#" target="_blank">
													<img src="images/prod11.jpg" alt="Makeup" width="82" height="82" style="display:block; margin:0;"/>
												</a>
											</td>
											<td align="center" width="82" style="padding:2px; border:1px solid #f2f2f2;">
												<a href="#" target="_blank">
													<img src="images/prod12.jpg" alt="Scarfs" width="82" height="82" style="display:block; margin:0;"/>
												</a>
											</td>
											<td align="center" width="82" style="padding:2px; border:1px solid #f2f2f2;">
												<a href="#" target="_blank">
													<img src="images/prod13.jpg" alt="Handbags" width="82" height="82" style="display:block; margin:0;"/>
												</a>
											</td>
											<td align="center" width="82" style="padding:2px; border:1px solid #f2f2f2;">
												<a href="#" target="_blank">
													<img src="images/prod14.jpg" alt="Clothing" width="82" height="82" style="display:block; margin:0;"/>
												</a>
											</td>
											<td align="center" width="82" style="padding:2px; border:1px solid #f2f2f2;">
												<a href="#" target="_blank">
													<img src="images/prod3.jpg" alt="Bags" width="82" height="82" style="display:block; margin:0;"/>
												</a>
											</td>
											<td align="center" width="82" style="padding:2px; border:1px solid #f2f2f2;">
												<a href="#" target="_blank">
													<img src="images/prod16.jpg" alt="Tops" width="82" height="82" style="display:block; margin:0;"/>
												</a>
											</td>
										</tr>							
									</table>
								</td>
							</tr>
						</table>
						<!-- End Fourth Product Table -->
						
						<!-- Start Footer Table -->	
						<table align="center" bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" width="600" style="margin:0; padding:0;">
							<tr>
								<td align="right" colspan="2" style="color:#ffffff; font-size:10px; line-height:15px; padding:15px 15px 0;">
									You have received this e-mail as a registered <a href="#" target="_blank" style="color:#7a6f00!important;">Sukar.com</a> member <a href="#"  target="_blank" style="color:#7a6f00!important;">emailtest1@sukar.com</a>.<br/>
									For more information please visit our Privacy Policy and Terms of Service.<br/>
									Sukar is a registered company based in UAE.<br/>
									Sukar.com (FZE) | P.O. Box 122164, Sharjah, UAE | UAE: 800 SUKAR<br/>
									If you wish to unsubscribe, please click <a href="#" target="_blank" style="color:#ffffff;">here</a>.<br/>
								</td>
							</tr>
							<tr>					
								<td align="left" valign="bottom" width="270" style="padding:15px;">
									<a href="#" target="_blank">
										<img src="images/logo_dark.jpg" alt="Sukar" width="104" height="52" style="display:block; margin:0;"/>
									</a>
								</td>
								<td align="right" valign="bottom" width="300" style="padding:0;">
									<img src="images/graphic_footer.jpg" alt="" width="69" height="61" style="display:block; margin:0;"/>
								</td>					
							</tr>
						</table>	
						<!-- End Footer Table -->	
					</td>
					<td style="padding:0; font-size:0; line-height:0; width:5px; background:#f3f3f3;"></td>				
				</tr>
				<tr>
					<td colspan="3" style="padding:0; font-size:0; line-height:0; height:5px; background:#f3f3f3;"></td>
				</tr>	
			</table>
		</td>
	</tr>
</table>  
<!-- End of wrapper table -->
</body>
</html>
						
					

Recent Feedback see all

Krisztina is really friendly, professional and goes beyond what is necessary to ensure the job is done perfectly. I would recommend her to anyone and hope to work with her again in future.

Daniel Keel

Amazing work completed before the dealine. The email looked stunning and was EXACTLY the type of design I imaged in my head. Communication was second to none and will absolutely use again.

Phil Wannell

I cannot speak highly enough of Krisztina. If you’re ever going to use anyone for CSS, HTML or Jquery (or all three) then this is the person. Perfect work, perfect communication a complete pleasure to deal with!

Neale