<!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-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,
      .two-col img {
        max-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 width="100%" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
      <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" width="100%">
              <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;">&nbsp;</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:100%;height:auto;max-width:310px;" />
                  </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">&nbsp;</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%">&nbsp;</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;">&nbsp;</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:100%;height:auto;max-width:310px;" />
                  </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">&nbsp;</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%">&nbsp;</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;">&nbsp;</div>

            <table role="presentation" width="100%">
              <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:100%;height:auto;max-width:100px;" /></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:100%;height:auto;max-width:100px;" /></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:100%;height:auto;max-width:100px;" /></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:100%;height:auto;max-width:100px;" /></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:100%;height:auto;max-width:100px;" /></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:100%;height:auto;max-width:100px;" /></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;">&nbsp;</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:100%;max-width:80px;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&nbsp;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;">&nbsp;</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:100%;max-width:80px;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&nbsp;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;">&nbsp;</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.