<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<title></title>
<!--[if mso]>
<style type="text/css">
table {border-collapse:collapse;border:0;border-spacing:0;margin:0;}
div, td {padding:0;}
div {margin:0 !important;}
</style>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style type="text/css">
@media screen and (max-width: 350px) {
.three-col .column {
max-width: 100% !important;
}
}
@media screen and (min-width: 351px) and (max-width: 460px) {
.three-col .column {
max-width: 50% !important;
}
}
@media screen and (max-width: 460px) {
.two-col .column {
max-width: 100% !important;
}
.two-col img {
width: 100% !important;
}
}
@media screen and (min-width: 461px) {
.three-col .column {
max-width: 33.3% !important;
}
.two-col .column {
max-width: 50% !important;
}
.sidebar .small {
max-width: 16% !important;
}
.sidebar .large {
max-width: 84% !important;
}
}
</style>
</head>
<body style="margin:0;padding:0;word-spacing:normal;background-color:#ffffff;">
<div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;">
<table role="presentation" style="width:100%;border:0;border-spacing:0;">
<tr>
<td align="center">
<!--[if mso]>
<table role="presentation" align="center" style="width:660px;">
<tr>
<td style="padding:20px 0;">
<![endif]-->
<div class="outer" style="width:96%;max-width:660px;margin:20px auto;">
<table role="presentation" style="width:100%;border:0;border-spacing:0;">
<tr>
<td style="padding:10px 10px 20px 10px;font-family:Arial,sans-serif;font-size:24px;line-height:28px;font-weight:bold;">
<img src="https://assets.codepen.io/210284/header.png" width="640" alt="" style="width:100%;height:auto;" />
</td>
</tr>
<tr>
<td style="padding:10px;text-align:left;">
<h1 style="margin-top:0;margin-bottom:16px;font-family:Arial,sans-serif;font-size:26px;line-height:32px;font-weight:bold;">Creating responsive email magic</h1>
<p style="margin:0;font-family:Arial,sans-serif;font-size:18px;line-height:24px;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus!</p>
</td>
</tr>
</table>
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div>
<div class="two-col" style="text-align:center;font-size:0;">
<!--[if mso]>
<table role="presentation" width="100%">
<tr>
<td style="width:50%;padding:10px;" valign="middle">
<![endif]-->
<div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;">
<div style="padding:10px;">
<p style="margin:0;font-family:Arial,sans-serif;font-size:14px;line-height:18px;">
<img src="https://assets.codepen.io/210284/two-column-01.png" width="310" alt="" style="display:block;width:310px;max-width:100%;height:auto;" />
</p>
</div>
</div>
<!--[if mso]>
</td>
<td style="width:50%;padding:10px;" valign="middle">
<![endif]-->
<div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;">
<div style="padding:10px;font-size:14px;line-height:18px;text-align:left;">
<p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Taciti nostra, per litora nostra</p>
<p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p>
<p style="margin:0;font-family:Arial,sans-serif;"><a href="https://example.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt"> </i><![endif]--><span style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a></p>
</div>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<div class="spacer" style="line-height:24px;height:24px;mso-line-height-rule:exactly;"> </div>
<div class="two-col" style="text-align:center;font-size:0;direction:rtl;">
<!--[if mso]>
<table role="presentation" width="100%" dir="rtl">
<tr>
<td style="width:50%;padding:10px;" valign="middle" dir="ltr">
<![endif]-->
<div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;direction:ltr;">
<div style="padding:10px;font-size:14px;line-height:18px;">
<p style="margin:0;font-family:Arial,sans-serif;">
<img src="https://assets.codepen.io/210284/two-column-02.png" width="310" alt="" style="display:block;width:310px;max-width:100%;height:auto;" />
</p>
</div>
</div>
<!--[if mso]>
</td>
<td style="width:50%;padding:10px;" valign="middle" dir="ltr">
<![endif]-->
<div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;direction:ltr;">
<div style="padding:10px;font-size:14px;line-height:18px;text-align:left;">
<p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Conubia nostra, per inceptos himenaeos</p>
<p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p>
<p style="margin:0;font-family:Arial,sans-serif;"><a href="https://example.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt"> </i><![endif]--><span style="mso-text-raise:10pt;font-weight:bold;">Lock it in</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a></p>
</div>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<div class="spacer" style="line-height:24px;height:24px;mso-line-height-rule:exactly;"> </div>
<table role="presentation" style="width:100%;border:0;border-spacing:0;">
<tr>
<td style="padding:10px;text-align:center;">
<h1 style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-size:24px;line-height:28px;font-weight:bold;">Praesent laoreet malesuada cursus</h1>
<p style="margin:0;font-family:Arial,sans-serif;font-size:18px;line-height:24px;">Posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora!</p>
</td>
</tr>
</table>
<div class="three-col" style="font-size:0;text-align:center;">
<!--[if mso]>
<table role="presentation" width="100%" style="text-align:center;">
<tr>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
<p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="https://assets.codepen.io/210284/three-column-01.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
<p style="margin:0;font-family:Arial,sans-serif;">Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>
</div>
</div>
<!--[if mso]>
</td>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
<p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="https://assets.codepen.io/210284/three-column-02.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
<p style="margin:0;font-family:Arial,sans-serif;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor.</p>
</div>
</div>
<!--[if mso]>
</td>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
<p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="https://assets.codepen.io/210284/three-column-03.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>
</div>
</div>
<!--[if mso]>
</td>
</tr>
<tr>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
<p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="https://assets.codepen.io/210284/three-column-04.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>
</div>
</div>
<!--[if mso]>
</td>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
<p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="https://assets.codepen.io/210284/three-column-05.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>
</div>
</div>
<!--[if mso]>
</td>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
<p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="https://assets.codepen.io/210284/three-column-06.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>
</div>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<div class="spacer" style="line-height:50px;height:50px;mso-line-height-rule:exactly;"> </div>
<div class="sidebar" style="font-size:0;text-align:center;">
<!--[if mso]>
<table role="presentation" width="100%">
<tr>
<td style="width:100px;padding:10px;text-align:center;" valign="middle">
<![endif]-->
<div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;">
<div style="padding:10px;font-family:Arial,sans-serif;font-size:14px;line-height:18px;">
<img src="https://assets.codepen.io/210284/sidebar-01.png" width="80" alt="" style="width:80px;max-width:100%;height:auto;" />
</div>
</div>
<!--[if mso]>
</td>
<td style="width:560px;padding:10px;text-align:center;" valign="middle">
<![endif]-->
<div class="large" style="width:100%;max-width:560px;display:inline-block;vertical-align:middle;">
<div style="padding:10px;font-size:14px;line-height:18px;">
<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. <a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;"><strong>Read on</strong></a></p>
</div>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<div class="spacer" style="line-height:10px;height:10px;mso-line-height-rule:exactly;"> </div>
<div class="sidebar" style="font-size:0;text-align:center;direction:rtl;">
<!--[if mso]>
<table role="presentation" width="100%" dir="rtl">
<tr>
<td style="width:100px;padding:10px;text-align:center;" valign="middle" dir="ltr">
<![endif]-->
<div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;direction:ltr;">
<div style="padding:10px;font-family:Arial,sans-serif;font-size:14px;line-height:18px;">
<img src="https://assets.codepen.io/210284/sidebar-02.png" width="80" alt="" style="width:80px;max-width:100%;height:auto;" />
</div>
</div>
<!--[if mso]>
</td>
<td style="width:560px;padding:10px;text-align:center;" valign="middle" dir="ltr">
<![endif]-->
<div class="large" style="width:100%;max-width:560px;display:inline-block;vertical-align:middle;direction:ltr;">
<div style="padding:10px;font-size:14px;line-height:18px;">
<p style="margin:0;font-family:Arial,sans-serif;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;"><strong>Register today</strong></a></p>
</div>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<div class="spacer" style="line-height:40px;height:40px;mso-line-height-rule:exactly;"> </div>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.