<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Making Accessible Emails</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">
        /* CLIENT-SPECIFIC STYLES */
        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; }

        /* RESET STYLES */
        img { border: 0; height: auto; 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; }
    </style>
  </head>
  <body style="background-color: aliceblue; margin: 0 !important; padding: 60px 0 60px 0 !important;">
    <table border="0" cellspacing="0" cellpadding="0" role="presentation" width="100%">
      <tr>
          <td bgcolor="aliceblue" style="font-size: 0;">&​nbsp;</td>
          <td bgcolor="white" width="600" style="border-radius: 4px; color: grey; font-family: sans-serif; font-size: 18px; line-height: 28px; padding: 40px 40px;">
            <article>
              <h1 style="color: black; font-size: 32px; font-weight: bold; line-height: 36px; margin: 0 0 30px 0;">This is a Headline</h1>
              <img alt="placeholder image" src="http://placehold.it/1200x600" height="300" width="600" style="background-color: black; color: white; display: block; font-family: sans-serif; font-size: 18px; font-weight: bold; height: auto; max-width: 100%; text-align: center; width: 100%;">
              <p style="margin: 30px 0 30px 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facilis vitae similique dolor tenetur, quibusdam temporibus, explicabo, ipsam omnis sequi placeat, nostrum qui. Repellat, ratione obcaecati, labore non quo ipsam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
              <p style="margin: 30px 0 30px 0; text-align: center;">
                <a href="https://thebetter.email" target="_blank" style="font-size: 18px; font-family: sans-serif; color: #ffffff; text-decoration: none; border-radius: 8px; -webkit-border-radius: 8px; background-color: dodgerblue; border-top: 20px solid dodgerblue; border-bottom: 18px solid dodgerblue; border-right: 40px solid dodgerblue; border-left: 40px solid dodgerblue; display: inline-block;">Read more here &rarr;</a>
              </p>
              <p style="margin: 0 0 30px 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quisquam, perferendis, non ratione pariatur quam quidem ad temporibus magni sed veritatis autem iure eligendi soluta blanditiis provident reprehenderit magnam. Facere!</p>
              <p style="margin: 0 0 30px 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo voluptas debitis, quas officia repellendus quaerat velit doloribus eaque iure tempora, veniam accusantium iusto. Molestias ex exercitationem assumenda nulla. Totam, dolorum.</p>
            </article>
          </td>
          <td bgcolor="aliceblue" style="font-size: 0;">&​nbsp;</td>
      </tr>
    </table>
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.