<!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: black; margin: 0 !important; padding: 60px 0 60px 0 !important;">
    <table border="0" cellspacing="0" cellpadding="0" role="presentation" width="100%">
      <tr>
          <td bgcolor="black" style="font-size: 0;">&​nbsp;</td>
          <td bgcolor="black" 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: white; font-size: 32px; font-weight: bold; line-height: 36px; margin: 0 0 30px 0; text-align: center;">Exclusive Sale</h1>
              <img alt="75% Off for Members Only" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/48935/accessible-emails-retail-offer.jpg" height="300" width="600" style="background-color: black; color: #f8c433; display: block; font-family: sans-serif; font-size: 72px; font-weight: bold; height: auto; max-width: 100%; text-align: center; width: 100%;">
            <!-- Photo by Josh Nuttall on Unsplash -->
              <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; font-weight: bold; color: black; text-decoration: none; border-radius: 8px; -webkit-border-radius: 8px; background-color: #f8c433; border-top: 20px solid #f8c433; border-bottom: 18px solid #f8c433; border-right: 40px solid #f8c433; border-left: 40px solid #f8c433; display: inline-block;">Save 75% Now</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="black" 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.