Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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]-->
  <title>ClassLaunch_email</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900" rel="stylesheet" type="text/css">
  <style type="text/css">
    a {
      outline: 0;
      color: #fff;
      text-decoration: underline
    }

    a:hover {
      text-decoration: none !important
    }

    .h-u a {
      text-decoration: none
    }

    .h-u a:hover {
      text-decoration: underline !important
    }

    a[x-apple-data-detectors] {
      color: inherit !important;
      text-decoration: none !important
    }

    a[href^="tel"]:hover {
      text-decoration: none !important
    }

    .active-i a:hover,
    .active-t:hover {
      opacity: .8
    }

    .active-i a,
    .active-t {
      transition: all .3s ease
    }

    a img {
      border: 0
    }

    b,
    strong {
      font-weight: 700
    }

    p {
      margin: 0
    }

    th {
      padding: 0
    }

    table td {
      mso-line-height-rule: exactly
    }

    .ns span,
    .ns a {
      color: inherit !important;
      text-decoration: none !important;
      border: none !important
    }

    [style*="Lato"] {
      font-family: Lato, Arial, Helvetica, sans-serif !important
    }

    @media only screen and (max-width:375px) and (min-width:374px) {
      .gmail-fix {
        min-width: 374px !important
      }
    }

    @media only screen and (max-width:414px) and (min-width:413px) {
      .gmail-fix {
        min-width: 413px !important
      }
    }

    @media only screen and (max-width:617px) {
      .w-100p {
        width: 100% !important;
        padding: 0 !important
      }
      .hm {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important
      }
      .wi-100p img {
        width: 100% !important;
        height: auto !important
      }
      .h-300 {
        height: 273px !important
      }
      .h-48 {
        height: 48px !important
      }
      .p-5p {
        padding: 5% !important
      }
      .plr-10 {
        padding-left: 10px !important;
        padding-right: 10px !important
      }
      .plr-30 {
        padding-left: 15px !important;
        padding-right: 15px !important
      }
      .pt-17 {
        padding-top: 17px !important
      }
      .pt-30 {
        padding-top: 30px !important
      }
      .pb-30 {
        padding-bottom: 30px !important
      }
      .ptb-30 {
        padding-bottom: 30px !important;
        padding-top: 30px !important
      }
      .pb-70 {
        padding-bottom: 70px !important
      }
      .fs-13 {
        font-size: 13px !important
      }
      .fs-14 {
        font-size: 14px !important
      }
      .fs-25 {
        font-size: 25px !important
      }
    }
  </style>
  <style type="text/css">
    @import url(link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900");
  </style>
</head>

<body style="background:#fff; margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
  <div style="color:transparent;visibility:hidden;opacity:0;font-size:0px;border:0;max-height:1px;width:1px;margin:0px;padding:0px;border-width:0px!important;display:none!important;line-height:0px!important;"><img border="0" width="1" height="1" src="http://tracking.masterclass.com/q/a-kJ-PqBY3YwT98rn2gpYw~~/AANXAQA~/RgRdWEDNPVcDc3BjQgoABM27dVtz6EQcUhltYXR0QHJlYWxseWdvb2RlbWFpbHMuY29tWAQAAAAA" /></div>
  <span style="color:transparent;visibility:hidden;display:none;opacity:0;height:0;width:0;font-size:0;">Take a moment to learn something new from the world’s greatest minds</span><img src="http://links.masterclass.com/e/eo?_t=c862c12dcd894e7aaa5de2c182120673&amp;_m=9f30ea5747e341989d35f01d24a79eea&amp;_e=pdHmWeyD7luTGrNTVBGNLMzqs9RvfaOtDMz4c_1Nk5vuwHsqPcovdlTr411_D23YTdQTpcmVfzlTdkBf1ySCmx9wTCu8hpbN1DNPOQYlIHnXElZ5qjJRNVneZxtqlR5W6fjiqUTemRb_XVj_WBhraEY-AGY5FQNkR6JEZ43eIoRixGKMam5PXwIwbCh9FXF4"
    style="border:0;width:1px;height:1px;border-width:0px!important;display:none!important;line-height:0!important;" width="1" height="1" />
  <div style="display: none; max-height: 0px; overflow: hidden;">&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;</div>
  <table cellspacing="0" cellpadding="0" style="background:#ffffff; min-width:320px; width:100%" class="gmail-fix">
    <tbody>
      <tr>
        <td style="mso-line-height-rule: exactly;">
          <table align="center" cellpadding="0" cellspacing="0" style="margin:0 auto; max-width:600px; width:600px" class="w-100p">
            <tbody>
              <tr>
                <td style="mso-line-height-rule: exactly; background-color: #000000; background: #000000;" bgcolor="#000000">
                  <table cellpadding="0" cellspacing="0" style="width:100%">
                    <!-- header -->
                    <tbody>
                      <tr>
                        <td style="mso-line-height-rule: exactly; background-color: #000000; background-size: 100%; background: #000000 url(https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/669d5713-9b6a-46bb-bd7e-c542cff6dd6a/c862c12dcd894e7aaa5de2c182120673/algem_soul2.jpg) no-repeat center top;"
                          bgcolor="#000000">
                          <!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;"> <v:fill type="frame" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/669d5713-9b6a-46bb-bd7e-c542cff6dd6a/c862c12dcd894e7aaa5de2c182120673/algem_soul2.jpg" color="#000000"/> <v:textbox style="mso-fit-shape-to-text:true"><![endif]-->
                          <table cellpadding="0" cellspacing="0" style="width:100%">
                            <tbody>
                              <tr>
                                <td style="mso-line-height-rule: exactly; vertical-align: top;" class="plr-10" valign="top">
                                  <table cellpadding="0" cellspacing="0" style="width:100%">
                                    <tbody>
                                      <tr>
                                        <td align="center" style="font-size: 1px; line-height: 1px; mso-line-height-rule: at-least; padding: 20px 0 0 0;" class="p-5p"><a style="outline: none; color: #fff; text-decoration: none;" href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M6mJr2ciOEwkC0hNTpdqvKeKoRYBDW1swcqiIo9VWPo-Fjk89l7T23pnR_Y53KIrXZJgDVxJPiwTutT0MA3qhOn9QuaQpyU0Ja96VWOJrkl5jYpqhvd9WSDyGKNbg4Ep4pJC8AqzCDCDVfjKLxyhRG3kvPARpEaG8MTGMbK30ZJGFl6Dqn9L81O1yePQUZtnt_nLxLi2qzUCT230cGjrApKue6ti2t9jlS7GahqIRxGXGBNd8Q8B2KGEo_jNySo4A1hwhTq3SxpbADJtMQLUf2yFO7E8nxKLt7ICREsCu9woc0GOplr5Va2P0AxNgcnyodNM9RSSJV3nKow2mzU71sKWDv8Bp_Yr6KzA2acB7O9p3OyqGZGs6rPnOL4j3thWMo_gb0Ptk5zeaugfKEG0rEVY-FIbKpfyUyKxzkQc2dK29RGRAk6okCw4il1NQ-JHYFaFcHuFhcvwuz9p6D5gGrKR9nAxUJej9HWvBv8wD41N"><img width="149" alt="MasterClass" style="border: none; width: 149px; font: 16px/20px Lato, Arial, Helvetica, san-serif; color: #fff; font-family: Lato, Arial, Helvetica, sans-serif !important;" src="https://gallery.mailchimp.com/e18548847fbb96bf384241ca5/images/6e7c0429-ed91-483e-a1aa-1ed8e458d6ef.png"> </a></td>
                                      </tr>
                                      <tr>
                                        <td align="center" style="mso-line-height-rule: exactly; color: #ffffff; font: 700 36px/38px Lato, Arial, Helvetica, san-serif; letter-spacing: 5px; padding: 48px 0px 4px 0px; text-transform: uppercase; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                          class="h-48"><a style="outline: none; font: 700 26px/38px Lato, Arial, Helvetica, san-serif; color: #fff; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; padding: 48px 0 0 0; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                            href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M6mJr2ciOEwkC0hNTpdqvKeKoRYBDW1swcqiIo9VWPo-Fjk89l7T23pnR_Y53KIrXZJgDVxJPiwTutT0MA3qhOn9QuaQpyU0Ja96VWOJrkl5jYpqhvd9WSDyGKNbg4Ep4pJC8AqzCDCDVfjKLxyhRG3kvPARpEaG8MTGMbK30ZJGFl6Dqn9L81O1yePQUZtnt_nLxLi2qzUCT230cGjrApKue6ti2t9jlS7GahqIRxGXGBNd8Q8B2KGEo_jNySo4A1hwhTq3SxpbADJtMQLUf2ybhCTbEBahot52SDajHC1egNgreESrv125dzsl2tOEcBng94vyug5zythgNriPY0Mp9WTmiWOLRncT9Yj9VyhhMSjI75mhhNqYQqT7e_WKl4k417cW7hXo7nUZ-ZjUXNRDnuuDmHX2SvDJmXlpbms3NbVzr0fY61b7MPx_qJSUSKImysmJdpCgHdQ9esEF-mg9nnC7RvZMPJRaKJg6JDUh">The Think Tank</a></td>
                                      </tr>
                                      <tr>
                                        <td align="center" style="mso-line-height-rule: exactly; padding: 92px 130px 80px 130px;" class="pb-30 plr-30"><a style="outline: none; font: 700 44px/66px Lato, Arial, Helvetica, san-serif; color: #fff; letter-spacing: 4px; text-decoration: none; font-family: Lato, Arial, Helvetica, sans-serif !important;" href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M6mJr2ciOEwkC0hNTpdqvKeKoRYBDW1swcqiIo9VWPo-Fjk89l7T23pnR_Y53KIrXZJgDVxJPiwTutT0MA3qhOn9QuaQpyU0Ja96VWOJrkl5jYpqhvd9WSDyGKNbg4Ep4pJC8AqzCDCDVfjKLxyhRG3kvPARpEaG8MTGMbK30ZJGFl6Dqn9L81O1yePQUZtnt_nLxLi2qzUCT230cGjrApKue6ti2t9jlS7GahqIRxGXGBNd8Q8B2KGEo_jNySo4A1hwhTq3SxpbADJtMQLUf2wSV1--yX9IfHNoSSu75au84hNDfWmimaKvGA1RjrJNgKNJZLaSsqcIE--NbOt29X1WU2BGWhk2GQwe5CT8gEdk4HHpSoTGP6a62bAhQPNlfWX-421VqOt0SLgKZegaeUYYbtYgLEtwnfyDmwQc0lStjMDn1UWv_cU37R2-CzKc8nPqpxD6ss3LvHmAuolU5oLHK1MrPxn7vtgtYseBYKny">Can you capture someone’s soul?</a></td>
                                      </tr>
                                      <tr>
                                        <td align="center" style="mso-line-height-rule: exactly; color: #ffffff; font: 700 24px/28px Lato, Arial, Helvetica, san-serif; letter-spacing: 1px; font-family: Lato, Arial, Helvetica, sans-serif !important;" class="plr-30">Annie Leibovitz's Take</td>
                                      </tr>
                                      <tr>
                                        <td align="center" style="mso-line-height-rule: exactly; color: #ffffff; font: 18px/26px Lato, Arial, Helvetica, san-serif; letter-spacing: .025px; padding: 11px 64px 0 64px; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                          class="plr-30">As human beings, we're inherently complicated. There are so many parts to a single person that a portrait might only capture one side. Find out how Annie Leibovitz tells the full story through portraiture.</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          <!--[if gte mso 9]></v:textbox> </v:rect><![endif]-->
                        </td>
                      </tr>
                      <!-- content -->
                      <!-- block 1 -->
                      <tr>
                        <td style="mso-line-height-rule: exactly; padding: 0 0px;">
                          <table cellpadding="0" cellspacing="0" style="width:100%">
                            <tbody>
                              <tr>
                                <td style="mso-line-height-rule: exactly; padding: 40px 0 0px;" class="plr-30">
                                  <table align="center" cellpadding="0" cellspacing="0" style="margin:0 auto; max-width:425px; width:425px" class="w-100p">
                                    <tbody>
                                      <tr>
                                        <td align="center" style="mso-line-height-rule: exactly; background-color: #c63430; background: #c63430; border-radius: 2px; font: bold 26px/36px Lato, Arial, Helvetica, san-serif; letter-spacing: 1.85px; mso-padding-alt: 18px 15px; text-transform: uppercase; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                          bgcolor="#c63430"><a style="outline: none; color: #fff; text-decoration: none; display: block; padding: 16px 27px 21px 27px;" href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M6mJr2ciOEwkC0hNTpdqvKeKoRYBDW1swcqiIo9VWPo-Fjk89l7T23pnR_Y53KIrXZJgDVxJPiwTutT0MA3qhOn9QuaQpyU0Ja96VWOJrkl5jYpqhvd9WSDyGKNbg4Ep4pJC8AqzCDCDVfjKLxyhRG3kvPARpEaG8MTGMbK30ZJGFl6Dqn9L81O1yePQUZtnt_nLxLi2qzUCT230cGjrApKue6ti2t9jlS7GahqIRxGXGBNd8Q8B2KGEo_jNySo4A1hwhTq3SxpbADJtMQLUf2x8uiKkcD45cr-GbOanZ7WMGkp9f2e7kFAxWPXaUlmN_psmJ8ConXGZyTbLGu3nyxG59WwvWemNENjghgtSJaE2cOCOAwGrpsuPC3eKedEy4NWdzwu5ZW7WlbU1wOyh-Mvtx0GneSyQTH5NfIdeZNdwSLuvzezTn8FXz5wBoVA3pYwjAbcGXr5LdIvj1U6RWn-wfv7QIpxxsnBAwgj1MT0E">WATCH LESSON</a></td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                              <tr>
                                <td align="center" style="mso-line-height-rule: exactly; padding: 32px 0 32px 0;"><img width="30" alt="" style="vertical-align:top;" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/669d5713-9b6a-46bb-bd7e-c542cff6dd6a/c862c12dcd894e7aaa5de2c182120673/Editorial%20Images/Path%202%20Copy%202.png"></td>
                              </tr>
                              <tr>
                                <td style="mso-line-height-rule: exactly;">
                                  <table align="center" cellpadding="0" cellspacing="0" style="margin:0 auto; max-width:600px; width:600px" class="w-100p">
                                    <tbody>
                                      <tr>
                                        <td style="mso-line-height-rule: exactly; background-color: #000000; background-size: 100%; background: #000000 url(https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/669d5713-9b6a-46bb-bd7e-c542cff6dd6a/c862c12dcd894e7aaa5de2c182120673/tilesblack2.jpg) no-repeat center top;"
                                          class="w-100p" bgcolor="#000000">
                                          <!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;"> <v:fill type="frame" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/669d5713-9b6a-46bb-bd7e-c542cff6dd6a/c862c12dcd894e7aaa5de2c182120673/tilesblack2.jpg" color="#000000"/> <v:textbox style="mso-fit-shape-to-text:true"><![endif]-->
                                          <table cellpadding="0" cellspacing="0" style="width:100%" class="w-100p">
                                            <!-- header -->
                                            <tbody>
                                              <tr>
                                                <td style="mso-line-height-rule: exactly;">
                                                  <table cellpadding="0" cellspacing="0" style="width:100%">
                                                    <tbody>
                                                      <tr>
                                                        <td style="mso-line-height-rule: exactly; vertical-align: top;" class="plr-10 w-100p" valign="top">
                                                          <table cellpadding="0" cellspacing="0" style="width:100%">
                                                            <tbody>
                                                              <tr>
                                                                <td align="center" height="273" style="mso-line-height-rule: exactly; padding: 0px 103px 99px 103px; vertical-align: bottom;" class="h-300 pb-30 plr-30" valign="bottom"><a style="outline: none; font: bold 36px/48px Lato, Arial, Helvetica, san-serif; color: #fff; letter-spacing: 4px; text-decoration: none; padding: 273px 0 0 0; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                                                    href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M6mJr2ciOEwkC0hNTpdqvKd8X9vUxAtfH3YondTwCpmBKWhdCCUK0WQvaBMvHwyRJ5TrWSOP7kkbfRuLdN8-9xAiCb2dcO_qbJOiu2wFppuS49fc2X_mcJSeOlRcMVIVzj5vEI0xo3vgAUKLvdZQLqV2zzHb_sEMmZIeFwS5TE-PqF7Hq_M3Ss81rrNZKwgM-TdUl-4MHFIWUQr8IgJjaDvlBRL-T8XbhKobSWqftDZs3Ee-uqSZxwSPw-w9PUFwLmeLcoTqnG-oKnoCCYnTBBoKAohCh8hOfH-WBIn-bFccERt-6QYN9GTqfj2EhfkgkiMVe_lVzxXQW0k1WdUTT-2bsZFYwfHil974_xXKMUj23Ixjfn4B5By4bxDyS0pb_cafJErf7wWXaQvPScRTh-p9FfG-zJiKCnfV-Izfjp6n">Unlock Access<br> to Genius</a></td>
                                                              </tr>
                                                              <tr>
                                                                <td align="center" style="mso-line-height-rule: exactly; color: #ffffff; font: 18px/26px Lato, Arial, Helvetica, san-serif; letter-spacing: .025em; padding: 0px 65px 32px 65px; vertical-align: bottom; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                                                  class="plr-30" valign="bottom">Whatever you choose to learn becomes yours forever. Be inquisitive and challenge yourself with unlimited access to 30+ classes taught by the world's greatest minds.</td>
                                                              </tr>
                                                            </tbody>
                                                          </table>
                                                        </td>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                </td>
                                              </tr>
                                              <tr>
                                                <td style="mso-line-height-rule: exactly;">
                                                  <table cellpadding="0" cellspacing="0" style="width:100%">
                                                    <tbody>
                                                      <tr>
                                                        <td style="mso-line-height-rule: exactly; padding: 0 0 64px;" class="pb-35 plr-30">
                                                          <table align="center" cellpadding="0" cellspacing="0" style="margin:0 auto; max-width:425px; width:425px" class="w-100p">
                                                            <tbody>
                                                              <tr>
                                                                <td align="center" style="mso-line-height-rule: exactly; background-color: #c63430; background: #c63430; border-radius: 2px; font: bold 26px/36px Lato, Arial, Helvetica, san-serif; letter-spacing: 1.85px; mso-padding-alt: 18px 15px; text-transform: uppercase; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                                                  bgcolor="#c63430"><a style="outline: none; color: #fff; text-decoration: none; display: block; padding: 16px 27px 21px 27px;" href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M6mJr2ciOEwkC0hNTpdqvKd8X9vUxAtfH3YondTwCpmBKWhdCCUK0WQvaBMvHwyRJ5TrWSOP7kkbfRuLdN8-9xAiCb2dcO_qbJOiu2wFppuS49fc2X_mcJSeOlRcMVIVzj5vEI0xo3vgAUKLvdZQLqV2zzHb_sEMmZIeFwS5TE-PqF7Hq_M3Ss81rrNZKwgM-TdUl-4MHFIWUQr8IgJjaDuJzMrJDO-1RDX5oYrnzPOtGZP8eOoIrpXk6rZfww2FUwONr3hD4PqpiW4Uk9lb1r3f2tmNOaqCi49ip-xjt83Aons1omgK2eJahwG8GI6wp4-KCrQ9KzBL-JsRz0vWxKey0ngiMnprGErBC1o_61lRA0PdlyxsIVKkqr8I5k-T0MWLuMSdSoMTe32VHSWLub7QO9DDQmfz0o4k8JqUqarG">Learn More</a></td>
                                                              </tr>
                                                            </tbody>
                                                          </table>
                                                        </td>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                          <!--[if gte mso 9]></v:textbox> </v:rect><![endif]-->
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                              <!-- divider -->
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <!-- block 3 -->
                      <tr>
                        <td style="mso-line-height-rule: exactly;">
                          <table cellpadding="0" cellspacing="0" style="width:100%">
                            <tbody>
                              <tr>
                                <td width="20" class="hm" style="mso-line-height-rule: exactly;"></td>
                                <td style="mso-line-height-rule: exactly; vertical-align: top;" class="plr-10" valign="top">
                                  <table align="center" cellpadding="0" cellspacing="0" style="margin:0 auto">
                                    <tbody>
                                      <tr>
                                        <td align="center" style="mso-line-height-rule: exactly; color: #4d5767; font: 11px Lato, Helvetica, san-serif; letter-spacing: 1px; padding: 0px 0 30px 0; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                          class="pb-15">&nbsp;&nbsp;&nbsp;
                                          <table border="0" cellpadding="0" cellspacing="0" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; border-collapse:collapse !important; mso-table-lspace:0; mso-table-rspace:0; width:100%">
                                            <tbody>
                                              <tr>
                                                <td style="mso-line-height-rule: exactly; padding: 0 0 15px 0;">
                                                  <table align="center" style="width:250px">
                                                    <tbody>
                                                      <tr>
                                                        <td align="center" style="mso-line-height-rule: exactly; padding: 0px 0 0px 0;" class="pt-17">
                                                          <table cellpadding="0" cellspacing="0">
                                                            <tbody>
                                                              <tr>
                                                                <td align="center" style="padding:0 7px 0px 0"><a style="text-decoration:none;" href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M2OEu8zZa6f_xvuXARWLfDN2ox3__Gsx4FomCnByXE-78gu7Bggl4grGuIPNVW1lmoZy1geCeiq6pe0umiA-_2pOZO1RuBMkA1bBjar82ya51ea-nlG0LOG3w7nJ5KR7jB7Oo97MpFFrl6rlApe1nMbEnHGyA3FtKYZ9NuAfTRSNWfvvtXHjKjcSoEK30LUSiJzd14MVRZcgYqu23HxMQV3usn0lX3oWJB_DCp6nGCTcGl_U6jcsi74kJi_g8OCUweuSCT3TaC5dIxT7Ebe8lvk2Fl01_-1RsKuCVt4f9Gh7FR7DVAgjX3wbVr12p9MJu7p_80AuQzv3SM-htuJ1aK63RxSSEKpn0FsB6qKcpES9"><img width="110" alt="Download on the App Store" style="width:110px; font:16px/20px Lato, Arial, Helvetica, san-serif; color:#fff;" src="https://gallery.mailchimp.com/e18548847fbb96bf384241ca5/images/a5abc82a-41b9-46de-8b0e-3d8a431a69a9.png"/> </a></td>
                                                                <td align="center" style="padding:0 0 0 0"><a style="text-decoration:none;" href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M229qI-AP0gkFzB2BqDETdIo6FFa94IcTHzyiTQmxCVRU-HdAudMtXuz7aHAZO09n0XqchlUYKQCxV68E1zTdwU50U2jiHMMo5o3mkbiFY2YTwrOlhB7rYuhukfyHmBxW3dSFbZNscTbREf5k8-oqf0X6EvRaTcCkzTZEHhM2D-0ncuzGtKePqAsRnZjLePFxNUuX3FcU6UHnyde_eQu21K9m20ZyfoIa7TuLVJJNQ-oFhZdWVJYaQbhRPOdQY2IhexXr1q3vzAT3hx-zE0TAm9QRoYtEIg7OBjMDBTtoExH"><img height="37" alt="Get it on Google Play" style="font:16px/20px Lato, Arial, Helvetica, san-serif; color:#fff;" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/669d5713-9b6a-46bb-bd7e-c542cff6dd6a/c862c12dcd894e7aaa5de2c182120673/google-play-badge%20copy.png"/> </a></td>
                                                              </tr>
                                                            </tbody>
                                                          </table>
                                                        </td>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                </td>
                                              </tr>
                                              <tr>
                                                <td align="center" style="mso-line-height-rule: exactly; padding: 0 0 0px 0;">
                                                  <table align="center" style="width:175px">
                                                    <tbody>
                                                      <tr>
                                                        <td align="center" style="mso-line-height-rule: exactly; padding: 0 0 15px 0;"><a style="outline: none; color: #fff; text-decoration: none;" href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M_x4k2YzJagv-FaXZc5L-qpMM-oOifH_Nq_HOnBbJgmTUv8UzRcKCpOGk2apo9QQLwCkSoshBQswfrxhLq1bsaBGlm77zqT3faOxZ7sHceudI-j1tKxug9XTI7-h1AGYDxlNVQyOxaTLDb7qkF0vyRvB2Aa2_Dhkh8m1mUEBmu-e0j-xLS7bp9ywcueCc-7r-kM3soY7SOWkb0tSpbJHKxlJ5bDZjXKJ4EhGuEJq4NNa5QGbBvLDrUN_PhEucWc_6QIX0uuXz7tu-e67Hcofm0k%3D"><img width="30" alt="Facebook" style="border: none; width: 30px; font: 16px/20px Lato, Arial, Helvetica, san-serif; color: #fff; font-family: Lato, Arial, Helvetica, sans-serif !important;" src="https://gallery.mailchimp.com/e18548847fbb96bf384241ca5/images/adfbeab7-0ae0-45e8-9f77-b8e7da2c51f1.png"> </a></td>
                                                        <td align="center" style="mso-line-height-rule: exactly; padding: 0 0 15px 0;"><a style="outline: none; color: #fff; text-decoration: none;" href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6Mzg1Z6SdOdwFTYh0hchLTxcTk4x8xZv2OZ4jEc6GJsCrB5TxtaXocFTcFU6dPHOZ6Y5ZwhURMF-CkoBZK3tHQi4MQ_2BhSDi_BZwb2pSbla7PXYs9mkZKZgCEHG9shksb8UlEIJgCdoV2fF-nreYlotXS9KPiCX34X-NT2T6XxaHbJwOVMffg9RrPtDhSj04soNzS5GOVI8oIw903Odh9gRSHIoZkKCouEtmDtaGx_eolPg-G8Je4LlX5-0HFHHGf5YUOGF_5jtDnL5jBGJHse4%3D"><img width="30" alt="Instagram" style="border: none; width: 30px; font: 16px/20px Lato, Arial, Helvetica, san-serif; color: #fff; font-family: Lato, Arial, Helvetica, sans-serif !important;" src="https://gallery.mailchimp.com/e18548847fbb96bf384241ca5/images/1960a960-dc30-4a0b-ae0c-fe6044cf9c01.png"> </a></td>
                                                        <td align="center" style="mso-line-height-rule: exactly; padding: 0 0 15px 0;"><a style="outline: none; color: #fff; text-decoration: none;" href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M2dP-h-JuraCGRjkMYLjtN3H5XFEdH6xAfKcfEHp9shjG7uUFdXHnIxDmdvA0RN4pciNeZ3b6lE5T8lOHdTZAf245r_O3t-Lok-bshrlZnrc-BdMlU6Slqb0-SJETTNIoD0cTAmp5-Jef_IOse4GWRUMm2_YBkTh0nPFgLWEpl5b6cB9-yqzNA0O3DmHpFJherWcHnBN5oJVx5x_7ssaTMYFfkLVQ3veE4ewFH1fKCI0HXIfxqINbvb7UJ8mS2glCw%3D%3D"><img width="30" alt="Twitter" style="border: none; font: 16px/20px Lato, Arial, Helvetica, san-serif; color: #fff; font-family: Lato, Arial, Helvetica, sans-serif !important;" src="https://gallery.mailchimp.com/e18548847fbb96bf384241ca5/images/ce0e66cd-b538-47a3-bb30-171a967ae6fe.png"> </a></td>
                                                        <td align="center" style="mso-line-height-rule: exactly; padding: 0 0 15px 0;"><a style="outline: none; color: #fff; text-decoration: none;" href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M1Xrk8l1hMyPbCVJ1NN127SWVBrVCLPsNUw43xzdRSmcHqRsCRBMbSIYXYURwIXSXHTnEiO7SJnwKMx8KX9CTwqM5zbPimRzAqnCeUDPhL8iawdMe5wFl7Dp_ZrEZWTeX-9xx63S0sWJAoor0Xgki9BuJLHdblBk_nnypWhV4oc-ygom51EuxPwnxqqDQoxuyv-ZbGaudGE8R17RCr3sUtBiuAnzmtM7nlpQt_8gzHNTsOF-IWSLELumNZ4q6s9Z43DXsjq2wt14iTvODupaDjydnvA8PzZVIJMDvOIC_wo9"><img width="30" alt="YouTube" style="border: none; font: 16px/20px Lato, Arial, Helvetica, san-serif; color: #fff; font-family: Lato, Arial, Helvetica, sans-serif !important;" src="https://gallery.mailchimp.com/e18548847fbb96bf384241ca5/images/fc055cf7-e055-454f-8ff4-8aecdb253146.png"> </a></td>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                </td>
                                              </tr>
                                              <tr>
                                                <td align="center" style="mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #a3a3a3; font: 11px Lato, Helvetica, san-serif; letter-spacing: 0px; mso-table-lspace: 0; mso-table-rspace: 0; text-transform: none; vertical-align: top; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                                  valign="top">
                                                  <div class="footerContent"><a style="outline: none; text-decoration: underline; font: 11px Lato, Helvetica, san-serif; color: #A3A3A3; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                                      href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M_MxZMXZ-7NXuxuLUqZmMYg_zpUNQ5KgG0ePdc48cR_OHEFbWNGb58z8CdNiXvfZdHcHZO9eJAATO2OM4YrRoK0ui4DdpnjoBEaoHSJ2ad9vcw7WFRLnPX-KhnhlMRt3ItTpr4zbSr6TGQ-JzEqEkPSFEBMV8MtGj0pGRrtqIBOwRbLhN9YsoUVn-4MG5RGikBage0C7ynFIZsi8O0zHbpsFVfLqm7WmMDyvUXn_L-8HxcnPEh72RSZsZBKtnRBbzkquGAJzEMJxna2sP0wT_1o%3D">Help Center</a>                                                    | <a style="outline: none; text-decoration: underline; font: 11px Lato, Helvetica, san-serif; color: #A3A3A3; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                                      href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M6mJr2ciOEwkC0hNTpdqvKfLaUvra4Mplbf45g5THysahPU0g53UP6dmVcsJMc2ZUsV1EKbYjHuDEIx0GyPSAgUlm1BqAkA-K7xv7Sd6g_hdoXhW1Jwiua3nEIRo3Guw5m4FA10ZGiUnLE-oRdqDC2z282QqtMud9rNzjAD1zTp2jY5slog0K_soJb3x46whBaDbDD19fe_vlNqZ44fK9_r8UJcxvhQCs9_aQOcQEaobVjw3byHcVUSGrhRP7yJKnw%3D%3D">Privacy</a>                                                    | <a style="outline: none; text-decoration: underline; font: 11px Lato, Helvetica, san-serif; color: #A3A3A3; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                                      href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=pIWPkPjihtGhxCq8x8s6M6mJr2ciOEwkC0hNTpdqvKcPqZuEvS1AATZf3upgVuFqNqpKex7YBD3SWXaLcAGVoeX8z2ovt5pr6VXKP3WLxHePF4zkEgkHdpwuIAAERy1p8WnCBZLopeaafClAqzKiHxQkRjAz9VTZcVD1VZNF8IccmnGk_DrRKsPzm3kiH8EpGYXV7hrBG1OXLPAQWH-i8S83SBQcaX-X79zmaO4TF4Hzz5A-utfPM8u5W-9pOxXcJI346CAD15fVM8glYn0j8Q%3D%3D">Terms</a>                                                    | <a style="outline: none; text-decoration: underline; font: 11px Lato, Helvetica, san-serif; color: #A3A3A3; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                                      href="#">Unsubscribe</a><br>                                                    <br> ©2018 MasterClass, <a style="outline: none; font: 11px Lato, Helvetica, san-serif; color: #A3A3A3; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; font-family: Lato, Arial, Helvetica, sans-serif !important;"
                                                      href="http://links.masterclass.com/u/click?_t=c862c12dcd894e7aaa5de2c182120673&_m=9f30ea5747e341989d35f01d24a79eea&_e=0ut55p8-10tqAwBSicZ2kzTVDYSZSkrnOiYn0wT9f_TPlRgKZEkg2E9tE1SKcZg3BzSXPnK0tK21wNgrKgiEjF7-NobZSmmldxbasE7uaUw9gFaROmWAkPqP_Ri04w61oU7nlWAKrLMmTEOqrjd81QWJD-xwwnMiy4LyQgq7yiLRQEMI_HZyrgLDesxQJ98SrC6mnXy2yuEVL5zO98HLrlmvxXTlQ7QDwr-grYGpyGnb3NRkwQUOW-__Ijyw6YjnuDfkJqyVajtmzsTkG43H8w%3D%3D">660 4th Street #443 San Francisco, CA 94107 USA</a></div>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                                <td width="20" class="hm" style="mso-line-height-rule: exactly;"></td>
                              </tr>
                            </tbody>
                          </table>
                          <!--[if gte mso 9]></v:textbox> </v:rect><![endif]-->
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>

</body>

</html>
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console