Happy hour gets better eDM

In this example below you will see how to do a Happy hour gets better 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
  • CSS
  • JavaScript
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
    <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
</xml><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no" />
<title>Happy Hour Gets Better</title>
    
<style type="text/css">
    body {margin: 0; padding: 0;}
    table td {border-collapse: collapse;}
    #bodyTable{height: 100% !important; margin: 0; padding: 0; width:100% !important;}
    
    .ExternalClass {width: 100%;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
    h2, h3, h4, h5, h6 {color:#0066CC !important;}
    table{mso-table-lspace: 0pt; mso-table-rspace: 0pt;}
    img {-ms-interpolation-mode: bicubic; display: block; border: 0;}
    span.MsoHyperlink {mso-style-priority: 99; color: inherit;}
    span.MsoHyperlinkFollowed {mso-style-priority: 99; color: inherit;}
    body {-webkit-text-size-adjust:100%;}
    body {-ms-text-size-adjust:100%;}
    #body a, #body a:hover, #body a:visited {color: inherit; font: inherit; text-decoration: none;}    
    
	@media (max-width: 640px) {
        .mobChe {display: none !important;}
        .doiban {width: 100% !important;}
        .doitd {width: 100% !important; display: block !important;}
		.doihinh {width: 100% !important; height: auto !important;}
	}
</style>
</head>
    
<body bgcolor="#cccccc" style="background-color: #cccccc; margin: 0; padding: 0;" id="body">
	<div style="display: none; font-size: 1px; color: #cccccc; line-height: 1px; font-family: Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
		Join us for a drink or two, hear about the latest industry trends and watch Denmark Vs France with us!
	</div>

    <table border="0" bgcolor="#cccccc" cellpadding="0" cellspacing="0" width="100%">
		<tr>
			<td align="center" bgcolor="#cccccc">
                <table border="0" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600" style="width: 600px;" class="doiban">
                    <tr>
                        <td align="center" bgcolor="#cccccc" class="mobChe">
                            <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                                <tr>
                                    <td align="center" height="1" style="line-height: 1px;">
                                        <img class="doihinh" src="https://spacergif.org/spacer.gif" alt="Forced Gmail" height="1" width="650" style="height: 1px; width: 650px; display: block; border: none;" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
					<tr>
						<td align="center" bgcolor="#021524">
							<table border="0" cellpadding="0" cellspacing="0" width="100%">
								<tr>
									<td align="center">
										<img class="doihinh" src="http://www.beamandbrick.com.sg/akamai/2018/happy-hour-gets-better/img//titleSubtitle.png" alt="HAPPY HOUR GETS BETTER - Join us for a drink or two, hear about the latest industry trends and watch Denmark Vs France with us!" width="651" height="227.5" style="display: block; border: none;" />
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td align="center" bgcolor="#021524">
							<table border="0" cellpadding="0" cellspacing="0" width="100%">
								<tr>
									<td align="center">
										<img class="doihinh" src="http://www.beamandbrick.com.sg/akamai/2018/happy-hour-gets-better/img/contentDetails.png" alt="Take part in conversations surrounding the latest updates in the media, sports and entertainment industry. You will also get a chance to experience the latest Mediacorp showcase first hand before catching an exciting football match of the season" width="651" height="295.5" style="display: block; border: none;" />
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td align="center" bgcolor="#021524">
							<table border="0" cellpadding="0" cellspacing="0" width="100%">
								<tr>
									<td align="center" valign="top">
										<img class="doihinh" src="http://www.beamandbrick.com.sg/akamai/2018/happy-hour-gets-better/img/btnLeft.png" alt="button area" width="60" height="37" style="border: none; display: block;" />
									</td>
									<td align="center" valign="top">
										<a href="http://www.google.com" target="_blank">
											<img class="doihinh" src="http://www.beamandbrick.com.sg/akamai/2018/happy-hour-gets-better/img/btn.png" alt="Reserve your spot now" width="284" height="37" style="border: none; display: block;" />
										</a>
									</td>
									<td align="center" valign="top">
										<img class="doihinh" src="http://www.beamandbrick.com.sg/akamai/2018/happy-hour-gets-better/img/btnRight.png" alt="Button area" width="307" height="37" style="border: none; display: block;" />
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td align="center" bgcolor="#021524" valign="top">
							<table border="0" cellpadding="0" cellspacing="0" width="100%">
								<tr>
									<td align="center">
										<img class="doihinh" src="http://www.beamandbrick.com.sg/akamai/2018/happy-hour-gets-better/img/footer.png" alt="Akamai believes that this information is accurate as of its publication date; such information is subject to change without notice. Copyright 2018. Akamai Technologies, Inc. All rights reserved. ME3147" width="651" height="108" style="border: none; display: block;" />
									</td>
								</tr>
							</table>
						</td>
					</tr>
         </table>
       </td>
		</tr>
	</table>
</body>
</html>

/*Downloaded from https://www.codeseek.co/gbjack/happy-hour-gets-better-edm-VdvGMr */
    


/*Downloaded from https://www.codeseek.co/gbjack/happy-hour-gets-better-edm-VdvGMr */
    

Comments