Marketo Email Template - CommScope eDM

In this example below you will see how to do a Marketo Email Template - CommScope eDM with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by gbjack, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gbjack ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Marketo Email Template - CommScope eDM</title>
  
  
  
  
  
</head>

<body>

  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>CommScope onboarding eDM 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
	body, table, td, a {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
	table, td {mso-table-lspace:0pt; mso-table-rspace:0pt;}
	img {-ms-interpolation-mode:bicubic;}
	img {border:0; line-height:100%; outline:none; text-decoration:none;}
	table {border-collapse:collapse !important;}
	body {height:100% !important; margin:0 !important; padding:0 !important; width:100% !important; }
	a[x-apple-data-detectors] {color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important;}
	div[style*="margin: 16px 0;"] {margin:0 !important;}
	span.MsoHyperlink {mso-style-priority:99; color:inherit;}
	span.MsoHyperlinkFollowed {mso-style-priority:99; color:inherit;}
	*[class="gmail-fix"] {display: none !important;}
	@media screen and (max-width:480px) {
		table[class="doiban"]{width:100% !important;}
		div[class="doisocial"]{width:100% !important; display:block !important;}
		img[class="doihinh"]{width:100% !important; height:auto !important;}
		img[class="doihinh2"]{width:85% !important; height:auto !important;}
		div[class="100div"]{width:100% !important; text-align:center !important;}
		td[class="manage-items"]{text-align: left !important; padding-left:30px !important;}
	}
</style>
<!--[if gte mso 9]>
		<xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
</head>
<body style="background-color:#ffffff; margin:0 !important; padding:0 !important;">
	<div style="display:none; font-size:1px; color:#ffffff; line-height:1px; font-family:Helvetica, Arial, sans-serif; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">
		CONNECTION MATTERS. Discover how we are working to transform tomorrow’s communication networks.
	</div>
	<table border="0" cellpadding="0" cellspacing="0" width="100%">
		<tr>
			<td align="center">
				<table border="0" cellpadding="0" cellspacing="0" width="600" style="width:600px;" class="doiban">
					<tr class="gmail-fix">
					  <td align="center">
					    <table cellpadding="0" cellspacing="0" border="0" align="center" width="600" class="doiban" style="width:600px;">
					      <tr>
					        <td style="line-height: 1px; min-width:600px;">
					          <img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/spacer.gif" alt="Gmail fix" width="600" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 600px; width: 600px;" />
					          </td>
					        </tr>
					    </table>
					  </td>
					</tr>
					<tr>
						<td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
					</tr>
					<tr>
						<td align="center" valign="middle">
							<table border="0" cellpadding="0" cellspacing="0" width="100%">
								<tr>
									<td align="center" width="20" style="width:20px;">
										<table border="0" cellpadding="0" cellspacing="0">
											<tr>
												<td>&nbsp;</td>
											</tr>
										</table>
									</td>
									<td align="center" width="560" style="width:560px;">
										<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td align="center" width="560" style="text-align:center; font-size:0; width:560px;">
													<div style="display:inline-block;"><table align="left" border="0" cellpadding="0" cellspacing="0" width="280" style="width:280px;" class="doiban">
													  <tr>
														<td align="left" height="32" class="doicenter">
															<a href="http://www.commscope.com/" target="_blank">
																<img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/commscope-logo.gif" width="240" height="32" alt="Commscope logo" style="display:block; border:0;" />
															</a>
														</td>
													  </tr>
													</table></div>
													<!--[if mso]></td><td align="center" style="padding:0;"><![endif]-->
													<div style="display:inline-block;" class="doisocial">
													<table align="left" border="0" cellpadding="0" cellspacing="0" width="74" style="width:74px;" class="doiban">
														<tr>
															<td align="center">
																<table border="0" cellpadding="0" cellspacing="0">
																	<tr>
																		<td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
																	</tr>
																</table>
															</td>
														</tr>
													</table></div>
													<!--[if mso]></td><td align="center" style="padding:0;"><![endif]-->
													<div style="display:inline-block;"><table align="right" border="0" cellpadding="0" cellspacing="0" width="206" style="width:206px;">
														<tr>
														  <td height="32" width="26" align="center">
															<a href="http://www.facebook.com/commscope" target="_blank">
															  <img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/facebook.gif" width="26" height="25" alt="Facebook icon" style="display:block; border:0;" />
															</a>
														  </td>
														  <td width="10" height="32" style="width:10px;">
															<table border="0" cellpadding="0" cellspacing="0" width="100%">
															  <tr>
																<td>&nbsp;</td>
															  </tr>
															</table>
														  </td>
														  <td height="32" align="center" width="26">
															<a href="http://www.flickr.com/photos/commscope" target="_blank">
															  <img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/flickr.gif" width="26" height="25" alt="Flickr icon" style="display:block; border:0;" />
															</a>
														  </td>
														  <td width="10" height="32" style="width:10px;">
															<table border="0" cellpadding="0" cellspacing="0" width="100%">
															  <tr>
																<td>&nbsp;</td>
															  </tr>
															</table>
														  </td>
														  <td height="32" align="center" width="26">
															<a href="http://instagram.com/commscope" target="_blank">
															  <img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/instagram.gif" width="26" height="25" alt="Instagram icon" style="display:block; border:0;" />
															</a>
														  </td>
														  <td width="10" height="32" style="width:10px;">
															<table border="0" cellpadding="0" cellspacing="0" width="100%">
															  <tr>
																<td>&nbsp;</td>
															  </tr>
															</table>
														  </td>
														  <td height="32" align="center" width="26">
															<a href="http://www.linkedin.com/company/commscope" target="_blank">
															  <img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/linkedin.gif" width="26" height="25" alt="LinkedIn icon" style="display:block; border:0;" />
															</a>
														  </td>
														  <td width="10" height="32" style="width:10px;">
															<table border="0" cellpadding="0" cellspacing="0" width="100%">
															  <tr>
																<td>&nbsp;</td>
															  </tr>
															</table>
														  </td>
														  <td height="32" align="center" width="26">
															<a href="http://twitter.com/commscope" target="_blank">
															  <img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/twitter.gif" width="26" height="25" alt="Twitter icon" style="display:block; border:0;" />
															</a>
														  </td>
														  <td width="10" height="32" style="width:10px;">
															<table border="0" cellpadding="0" cellspacing="0" width="100%">
															  <tr>
																<td>&nbsp;</td>
															  </tr>
															</table>
														  </td>
														  <td height="32" align="center" width="26">
															<a href="http://www.youtube.com/user/commscope" target="_blank">
															  <img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/youtube.gif" width="26" height="25" alt="YouTube icon" style="display:block; border:0;" />
															</a>
														  </td>
														</tr>
													  </table>
													</div>
												</td>
											</tr>
										</table>
									</td>
									<td align="center" width="20" style="width:20px;">
										<table border="0" cellpadding="0" cellspacing="0">
											<tr>
												<td>&nbsp;</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
					</tr>
					<tr>
						<td align="center">
							<div class="mktEditable imager" id="heroBanner">
								<a href="https://www.youtube.com/watch?v=WAh-wGuwAa4" target="_blank">
									<img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/hero-banner-1.jpg" width="600" height="280" alt="Connection matters banner" style="display:block; border:0;" class="doihinh" />
								</a>
							</div>
						</td>
					</tr>
					<tr>
						<td bgcolor="#efefef" height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
					</tr>
					<tr>
						<td bgcolor="#efefef">
							<table border="0" cellpadding="0" cellspacing="0" width="100%">
								<tr>
									<td width="20" style="width:20px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td>&nbsp;</td>
											</tr>
										</table>
									</td>
									<td align="center" width="560" style="width:560px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td align="left" style="font-family:Arial, Helvetica, san-serif; font-size:20px; font-weight:bold; color:#0080c6;">
												  <div class="mktEditable" id="subTitle">Join us at the forefront of connectivity.</div>
												</td>
											</tr>
											<tr>
												<td height="15" style="font-size:15px; line-height:15px;">&nbsp;</td>
											</tr>
											<tr>
												<td align="left" style="font-family:Arial, Helvetica, san-serif; font-size:16px; color:#333333;">
												  <div class="mktEditable" id="bodyCopy">If you are looking for the world’s best wired and wireless networks solutions, you’ve come to the right people. Over the past 40 years, with around 10,000 patents, 30 manufacturing and distribution centers globally, we’ve designed, built and managed networks in more than 100 countries. Whether it’s connecting your data centers, rolling out a country-wide fiber network, or constructing a smart building – world-class networks rely on CommScope solutions.
												  <br /><br />
												  Let CommScope be your partner of choice in all your connectivity solutions. Be the first to get insights that give your network a true competitive edge. <a href="http://view.ceros.com/commscope-inc/commscope-magazine-issue1/p/1" target="_blank" style="color:#1688c8; text-decoration:none;"><font color="#1688c8" style="text-decoration:none;">Download magazine now!</font></a></div>
												</td>
											</tr>
										</table>
									</td>
									<td width="20" style="width:20px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td>&nbsp;</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td bgcolor="#efefef" height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
					</tr>
					<tr>
						<td bgcolor="#ffffff" height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
					</tr>
					<tr>
						<td align="center">
							<table border="0" cellpadding="0" cellspacing="0" width="100%">
								<tr>
									<td width="20" style="width:20px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td>&nbsp;</td>
											</tr>
										</table>
									</td>
									<td align="center" width="560" style="width:560px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td align="center">
													<table align="left" border="0" cellpadding="0" cellspacing="0" width="265" style="width:265px;" class="doiban">
														<tr>
															<td align="center" valign="top">
																<div class="mktEditable imager" id="img-1">
																	<a href="http://www.commscope.com/Solutions/Commercial-buildings/" target="_blank">
																		<img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/top-1.jpg" width="265" height="128" alt="Build Tomorrow’s Smart Buildings" style="display:block; border:0; width:265px; height:128px;" />
																	</a>
																</div>

															</td>
														</tr>
													</table>
													<!--[if mso]></td><td align="center" style="padding:0;"><![endif]-->
													<table align="left" border="0" cellpadding="0" cellspacing="0" width="30" style="width:30px;" class="doiban">
														<tr>
															<td align="center" valign="top" width="30">
																<table border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
																	<tr>
																		<td>&nbsp;</td>
																	</tr>
																</table>
															</td>
														</tr>
													</table>
													<!--[if mso]></td><td align="center" style="padding:0;"><![endif]-->
													<table align="left" border="0" cellpadding="0" cellspacing="0" width="265" style="width:265px;" class="doiban">
														<tr>
															<td align="center" valign="top">
																<div class="mktEditable imager" id="img-2">
																	<a href="http://www.commscope.com/Solutions/Wireless-mobility/" target="_blank">
																		<img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/top-2.jpg" width="265" height="128" alt="Build Tomorrow’s Smart Buildings" style="display:block; border:0; width:265px; height:128px;" />
																	</a>
																</div>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</table>
									</td>
									<td width="20" style="width:20px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td>&nbsp;</td>
											</tr>
										</table>
									</td>
								</tr>

							</table>
						</td>
					</tr>
					<tr>
						<td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
					</tr>
					<tr>
						<td align="center">
							<table border="0" cellpadding="0" cellspacing="0" width="100%">
								<tr>
									<td width="20" style="width:20px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td>&nbsp;</td>
											</tr>
										</table>
									</td>
									<td align="center" width="560" style="width:560px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td align="center">
													<table align="left" border="0" cellpadding="0" cellspacing="0" width="265" style="width:265px;" class="doiban">
														<tr>
															<td align="center" valign="top">
																<div class="mktEditable imager" id="img-3">
																	<a href="http://www.commscope.com/Solutions/Data-center-solutions/" target="_blank">
																		<img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/btm-1.jpg" width="265" height="128" alt="Build Tomorrow’s Smart Buildings" style="display:block; border:0; width:265px; height:128px;" />
																	</a>
																</div>
															</td>
														</tr>
													</table>
													<!--[if mso]></td><td align="center" style="padding:0;"><![endif]-->
													<table align="left" border="0" cellpadding="0" cellspacing="0" width="30" style="width:30px;" class="doiban">
														<tr>
															<td align="center" valign="top" width="30">
																<table border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
																	<tr>
																		<td>&nbsp;</td>
																	</tr>
																</table>
															</td>
														</tr>
													</table>
													<!--[if mso]></td><td align="center" style="padding:0;"><![endif]-->
													<table align="left" border="0" cellpadding="0" cellspacing="0" width="265" style="width:265px;" class="doiban">
														<tr>
															<td align="center" valign="top">
																<div class="mktEditable imager" id="img-4">
																	<a href="http://www.commscope.com/Solutions/Wireline-networks/" target="_blank">
																		<img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/btm-2.jpg" width="265" height="128" alt="Build Tomorrow’s Smart Buildings" style="display:block; border:0; width:265px; height:128px;" />
																	</a>
																</div>

															</td>
														</tr>
													</table>
												</td>
											</tr>
										</table>
									</td>
									<td width="20" style="width:20px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td>&nbsp;</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
					</tr>
					<tr>
						<td bgcolor="#ffffff" height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
					</tr>
					<tr>
						<td align="center" bgcolor="#ffffff">
							<table border="0" cellpadding="0" cellspacing="0" width="100%">
								<tr>
									<td width="40" style="width:40px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td>&nbsp;</td>
											</tr>
										</table>
									</td>
									<td align="center" width="520" style="width:520px;">
										<table border="0" cellspacing="0" cellpadding="0" width="100%">
											<tr>
												<td align="center" class="manage-items">
													<div style="display:inline-block;"><table align="left" border="0" cellpadding="0" cellspacing="0">
											<tr>
												<td align="center" height="58" valign="middle">
													<a href="https://www.commscope.com/preferencecenter/default.aspx/" target="_blank">
														<img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/email-preferences.gif" width="58" height="58" alt="Manage my email preferences" />
													</a>
												</td>
												<td width="5">
													<table border="0" cellpadding="0" cellspacing="0" width="100%">
														<tr>
															<td>&nbsp;</td>
														</tr>
													</table>
												</td>
												<td align="left" height="58" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#00aeef;">
													<div class="mktEditable" id="emailPref">
														<a href="https://www.commscope.com/preferencecenter/default.aspx/" target="_blank" style="color:#00aeef; text-decoration:none;"><font color="#00aeef" style="text-decoration:none;">Manage my email <br />preferences.</font></a>
													</div>
												</td>
											</tr>
										</table></div>
										<!--[if mso]></td><td align="center" style="padding:0;"><![endif]-->
										<div style="display:inline-block;"><table align="left" border="0" cellpadding="0" cellspacing="0" width="30" style="width:30px;" class="doiban">
											<tr>
												<td align="center" valign="top">
													<table border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
														<tr>
															<td>&nbsp;</td>
														</tr>
													</table>
												</td>
											</tr>
										</table></div>
										<!--[if mso]></td><td align="center" style="padding:0;"><![endif]-->
										<div style="display:inline-block;"><table align="left" border="0" cellpadding="0" cellspacing="0">
											<tr>
												<td align="center" height="58" valign="middle">
													<a href="http://www.commscope.com/SupportCenter/" target="_blank">
														<img src="http://www.mnahost.com/singapore/commscope/2017/onboarding/images/manage-comments.gif" width="58" height="58" alt="Manage my email preferences" />
													</a>
												</td>
												<td width="5">
													<table border="0" cellpadding="0" cellspacing="0" width="100%">
														<tr>
															<td>&nbsp;</td>
														</tr>
													</table>
												</td>
												<td align="left" height="58" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#00aeef;">
													<div class="mktEditable" id="questionMail">
														<a href="http://www.commscope.com/SupportCenter/" target="_blank" style="color:#00aeef; text-decoration:none;"><font color="#00aeef" style="text-decoration:none;">Have questions or comments? <br />Let us know.</font></a>
													</div>
												</td>
											</tr>
										</table></div>
												</td>
											</tr>
										</table>
									</td>
									<td width="40" style="width:40px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td>&nbsp;</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td bgcolor="#ffffff" height="20" style="font-size:20px; line-height:20px; border-bottom:#00aeef solid 1px;">&nbsp;</td>
					</tr>
					<tr>
						<td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
					</tr>
					<tr>
						<td align="center">
							<table border="0" cellpadding="0" cellspacing="0" width="100%">
								<tr>
									<td width="20" style="width:20px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td>&nbsp;</td>
											</tr>
										</table>
									</td>
									<td align="center" width="560" style="width:560px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td align="left" style="font-size:12px; color:#333333; font-family:Arial, Helvetica, sans-serif;">
													<div class="mktEditable" id="footer-line-1">
														<a href="http://www.commscope.com/" target="_blank" style="font-weight:bold; text-decoration:none; color:#333333;">
														<font color="#333333" style="text-decoration:none; font-weight:bold;">www.commscope.com</font>
														</a><br />Visit <a href="http://www.commscope.com/" style="text-decoration:none; color:#00aeef;"><font color="#00aeef" style="text-decoration:none;">our website</font></a> or contact your local CommScope representative for more information.
													</div>
												</td>
											</tr>
											<tr>
												<td height="15" style="font-size:15px; line-height:15px;">&nbsp;</td>
											</tr>
											<tr>
												<td align="left" style="font-size:12px; color:#333333; font-family:Arial, Helvetica, sans-serif;">
													<div class="mktEditable" id="footer-line-2">
														&copy; 2017 CommScope, Inc. All rights reserved.
														<br />All trademarks identified by &reg; or &#8482; are registered trademarks or trademarks, respectively, of CommScope, Inc.
													</div>
												</td>
											</tr>
											<tr>
												<td height="15" style="font-size:15px; line-height:15px;">&nbsp;</td>
											</tr>
											<tr>
												<td align="left" style="font-size:12px; color:#333333; font-family:Arial, Helvetica, sans-serif;">
													<div class="mktEditable" id="footer-line-3">
														This document is for planning purposes only and is not intended to modify or supplement any specifications or warranties relating to CommScope products or services.
													</div>
												</td>
											</tr>
											<tr>
												<td height="15" style="font-size:15px; line-height:15px;">&nbsp;</td>
											</tr>
											<tr>
												<td align="left" style="font-size:12px; color:#333333; font-family:Arial, Helvetica, sans-serif;">
													<div class="mktEditable" id="footer-line-4">
														The cookie setting on this email is set to 'allow all cookies' to give you the very best experience. This information is not used for advertising on other sites. If you continue, you consent to this – and any information you provide is subject to CommScope Privacy Policy. You can decline by not filling out the information and simply closing the email.
													</div>
												</td>
											</tr>
										</table>
									</td>
									<td width="20" style="width:20px;">
										<table border="0" cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td>&nbsp;</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>
  
  

</body>

</html>

Comments