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 HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- So that mobile webkit will display zoomed in -->
    <meta name="viewport" content="initial-scale=1.0" />
    <!-- disable auto telephone linking in iOS -->
    <meta name="format-detection" content="telephone=no" />
    <!-- Do not use webfonts on Outlook -->
    <!--[if !mso]>
      <!-- -->
      <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
    <!--<![endif]-->
    <title>DataCamp Email</title>
    <style type="text/css">
      body {
        -webkit-text-size-adjust: none;
        -ms-text-size-adjust: none;
        margin: 0;
        padding: 0;
        font-family: 'Lato', 'Open Sans', verdana, arial, helvetica, sans-serif;
        font-weight: 200;
      }
    
      a[cta-primary]:hover {
        border: 1px solid #1f697f !important;
        color: #1f697f !important;
      }
    
      a[class="cta-primary"]:hover {
        background-color: #FBE28D !important;
      }
    
      a[class="cta-secondary"]:hover {
        background-color: #7ECCE2 !important;
      }
    
      a[class="cta-white"]:hover {
        color: #000000 !important;
      }
    
      a:hover img[class="footer-logo-base"], a:active img[class="footer-logo-base"] {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
        max-width: 0;
        max-height: 0;
      }
    
      a:hover img[class="footer-logo-roll"], a:active img[class="footer-logo-roll"] {
        width: 36px !important;
        height: 39px !important;
        display: inline !important;
        max-width: 36px !important;
        max-height: 39px !important;
      }
    
      a:hover img[class="social-base"], a:active img[class="social-base"] {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
        max-width: 0;
        max-height: 0;
      }
    
      a:hover img[class="social-roll"], a:active img[class="social-roll"] {
        width: 33px !important;
        height: 33px !important;
        display: inline !important;
        max-width: 33px !important;
        max-height: 33px !important;
      }
    
      .blue-gradient {
        background-image: linear-gradient(to right top, #3aaaca, #2388b0);
      }
    
      .gold-gradient {
         background-image: linear-gradient(to right top, #fcde75, #ffc844);
      }
    
      .party-gradient {
        background-image: linear-gradient(123deg, #33aacc, #9340c2);
      }
    
    /* GRAY BORDER - BOTTOM 3 SIDES */
      .white-container {
        border-color: #e6eaeb;
        border-width: 1px;
        border-style: none solid solid solid;
      }
    
      /* GRAY BORDER - 4 SIDES */
      .white-container-full {
        border: solid 1px #e6eaeb;
      }
    
      /* iOS BLUE LINKS */
      a[x-apple-data-detectors] {
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
      }
    
      /* CTA BOX ALIGNMENT FIX */
      @media screen and (max-width: 600px){
        img[class="mobile-hide"]{
          display: none !important;
        }
    
        h2[class="cta_box_text"]{
          text-align: center !important;
        }
      }
    </style>
  </head>
  
  <body leftmargin="0" marginheight="0" marginwidth="0" style="text-align: left; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; font-family: 'Lato', 'Open Sans', verdana, arial, helvetica, sans-serif; margin: 0; padding: 0px 0;"
  topmargin="0">
    <table bgcolor="#6276c7" class="party-gradient" width="100%" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td align="center">
            <div style="display: none; font-size: 1px; color: white; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; background: #ebf4f7;">We think you deserve a gift. Save 50% during Cyber Week only! Enroll now and learn
              data science for less. Get $150 off!</div>
            <div style="display: none; font-size: 1px; color: #ebf4f7; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; background: #ebf4f7;">&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;</div>
            <table
            bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" align="center">
                    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                          <td width="600" height="25" align="center" style="border-collapse: collapse; border: 0;"></td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="101" align="center">
          <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td width="101" align="center">
                  <a href="https://www.datacamp.com">
                    <img src="https://s3.amazonaws.com/assets.datacamp.com/email/logos/dc-logo-white-2.png"
                    width="101" alt="DataCamp" border="0" style="color: #3d4251; font-family: 'Lato', 'Open Sans', sans-serif; font-size:15px; width:101px;height:auto!important;display:block;"
                    />
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="15" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="600" align="center">
          <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td align="center">
                 <h2 align="center" style="font-family: 'Lato', 'Open Sans', sans-serif; font-size: 48px; font-weight: bold;   color: #ffffff; text-align: center; margin: 0px; padding: 0px; -webkit-margin-before: 0px; -webkit-margin-after: 0px;">
  SAVE 50% FOR CYBER WEEK
</h2>

              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="24" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="#ffffff" class="white-container-full" align="center" cellpadding="0"
    cellspacing="0" style="border-radius: 4px;">
      <tr>
        <td width="600" align="center">
          <table bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" style="border-radius: 4px;">
            <tr>
              <td width="600" height="45"></td>
            </tr>
            <tr>
              <td width="600" align="center">
                 <h2 align="center" style="font-family: 'Lato', 'Open Sans', sans-serif; font-size: 17px; font-weight: bold;   color: #3d4251; background-color: #ffffff; text-align: center; margin: 0px; padding: 0px; -webkit-margin-before: 0px; -webkit-margin-after: 0px;">
                        CYBER WEEK ONLY — THIS OFFER EXPIRES IN
                      </h2>

              </td>
            </tr>
            <tr>
              <td width="600" height="17"></td>
            </tr>
            <tr>
              <td width="600" align="center">
                <table bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="400" align="center">
                      <a href="https://www.datacamp.com/promo/cybermonday">
                        <img src="http://gen.sendtric.com/image/countdown?to=1312566399&amp;bg=ebf4f7&amp;fg=33aacc&amp;days=1&amp;lang=en"
                        width="400" alt="Time is Running Out!" border="0" style="color: #3d4251; font-family: 'Lato', 'Open Sans', sans-serif; font-size:15px; width: 100%;height:auto!important;display:block;border-radius:4px;">
                      </a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td width="600" height="10"></td>
            </tr>
            <tr>
              <td width="600" align="center">
                <table bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td align="center">
                      <table bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                          <td align="center">
                            <table bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0">
                              <tr>
                                <td align="center">
                                  <table bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td width="30" align="right" valign="bottom">
                                        <a href="https://www.datacamp.com/promo/cybermonday">
                                          <img src="https://marketing-image-production.s3.amazonaws.com/uploads/eefbdb6822ddda9601a38c40caa6d96eeddf86413fbacd191b9f91547b2c010563f980367a147df1c7846ae5b8d6b5b993848df72f81a1c2ae7896ca9edf1978.png"
                                          width="30" alt="" border="0" style="color: #3d4251; font-family: 'Lato', 'Open Sans', sans-serif; font-size:15px; width:30px;height:auto!important;display:block;"
                                          />
                                        </a>
                                      </td>
                                      <td width="300" align="left" valign="bottom">
                                        <a href="https://www.datacamp.com/promo/cybermonday">
                                          <img src="https://marketing-image-production.s3.amazonaws.com/uploads/56ecae53dd854c7804e4ca48a18cbdccbd8b07af75c4af6d6189b6ccdc3dc775325d5fa5ed57a9eee3f15bd1360a4822fd0d526cc0b868959be32acb6ba4aa44.png"
                                          width="30" alt="" border="0" style="color: #3d4251; font-family: 'Lato', 'Open Sans', sans-serif; font-size:15px; width:30px;height:auto!important;display:block;"
                                          />
                                        </a>
                                      </td>
                                    </tr>
                                    <tr>
                                      <td width="30" align="right" valign="top" style="line-height: 30px;">
                                        <a href="https://www.datacamp.com/promo/cybermonday">
                                          <img src="https://marketing-image-production.s3.amazonaws.com/uploads/354d00973f1a5d16e78c51b3cf4cd07250a0b1dea80dea187a85efd031766ad68cfe989fcf89f2a8b00bc8023a1bfc36f794b0150884185b0ec50d5a8a62fc53.png"
                                          width="30" alt="" border="0" style="color: #3d4251; font-family: 'Lato', 'Open Sans', sans-serif; font-size:15px; width:30px;height:auto!important;display:block;"
                                          />
                                        </a>
                                      </td>
                                      <td width="30" align="left" valign="top">
                                        <div>
                                          <!--[if mso]>
                                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
                                            href="https://www.datacamp.com/promo/cybermonday" style="height: 45px;v-text-anchor:middle;width: 300px;"
                                            stroke="f" fill="t">
                                              <v:fill type="frame" src="https://marketing-image-production.s3.amazonaws.com/uploads/c6204b4a72fc336ed86c9bab538b4f6bb7783bc329f06add16d3945e4a46979606b1e919e566a15b1f5ac27c85db1e4f8dd80c05c94637a75d39802937263c2b.png"
                                              color="#fdc551" />
                                              <w:anchorlock/>
                                              <center style="color: #3d4251;font-family: 'Lato', 'Open Sans', sans-serif;font-size: 15px;font-weight:bold;">Save $150</center>
                                            </v:rect>
                                          <![endif]-->
                                          <a class="cta-primary" href="https://www.datacamp.com/promo/cybermonday" style="background-color: #fdc551; background-image: url(https://marketing-image-production.s3.amazonaws.com/uploads/c6204b4a72fc336ed86c9bab538b4f6bb7783bc329f06add16d3945e4a46979606b1e919e566a15b1f5ac27c85db1e4f8dd80c05c94637a75d39802937263c2b.png); background-repeat: no-repeat; color: #3d4251; display: inline-block; font-family: 'Lato', 'Open Sans', sans-serif; font-size: 15px; font-weight: bold; line-height: 45px; text-align:center; text-decoration:none; width: 300px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -webkit-text-size-adjust:none; mso-hide:all;">Save $150</a>
                                        </div>
                                      </td>
                                    </tr>
                                  </table>
                                </td>
                                <td width="30"></td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td width="600" height="45"></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="24" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="100" align="center">
          <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td width="100" align="center">
                  <a href="https://www.datacamp.com/">
                    <img src="https://marketing-image-production.s3.amazonaws.com/uploads/0e793ae38b620c7cce3b86a131b2d314b13a1aa2bf10af4f1e6ce8667b2d3b2a0a1062bedd280a5f97b45d7976388bf774f5e7b87f23aed6dbfc8b480a2c0a0d.png"
                    width="100" alt="" border="0" style="color: #3d4251; font-family: 'Lato', 'Open Sans', sans-serif; font-size:15px; width:100px;height:auto!important;display:block;"
                    />
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="20" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="600" align="center">
          <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td width="600" align="center" style="font-family: 'Lato', 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: 22px; color: #ffffff; "> <i>"I've thought a lot about the best way to learn data science … DataCamp is the top resource I would recommend to everybody, starting or advanced."</i>

              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="15" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="600" align="center">
          <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td width="600" align="center" style="font-family: 'Lato', 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: 22px; color: #ffffff; "> <b>Louis Maiden, Researcher at Harvard Business School</b>

              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="30" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="24" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="600" align="center">
          <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td align="center">
                 <h2 align="center" style="font-family: 'Lato', 'Open Sans', sans-serif; font-size: 26px; font-weight: bold;   color: #ffffff; text-align: center; margin: 0px; padding: 0px; -webkit-margin-before: 0px; -webkit-margin-after: 0px;">
  Learn the way you learn best:
</h2>

              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="24" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="#ffffff" class="white-container-full" align="center" cellpadding="0"
    cellspacing="0" style="border-radius: 4px;">
      <tr>
        <td width="40" height="40"></td>
        <td width="520" height="40"></td>
        <td width="40" height="40"></td>
      </tr>
      <tr>
        <td width="40" height="40"></td>
        <td width="520" height="40" align="left">
          <table cellpadding="0" cellspacing="0">
            <tr>
              <td width="100" align="left">
                <a href="https://www.datacamp.com/promo/cybermonday">
                  <img src="https://marketing-image-production.s3.amazonaws.com/uploads/b7581a02bc9a0629261545d2c3058d0fc90602644d6ec2c7a5b4a91f1e4136f5811674443a8443d048665aaac1388158e9997ca5c049fece42d3150776f7a3a0.png"
                  width="100" alt="Learn" border="0" style="color: #3d4251; font-family: 'Lato', 'Open Sans', sans-serif; font-size:15px; width: 100%;height:auto!important;display:block;"
                  />
                </a>
              </td>
              <td width="30"></td>
              <td>
                <table cellpadding="0" cellspacing="0">
                  <tr>
                     <h2 align="left" style="font-family: 'Lato', 'Open Sans', sans-serif; font-size: 22px; font-weight: bold;   color: #3d4251; background-color: #ffffff; text-align: left; margin: 0px; padding: 0px; -webkit-margin-before: 0px; -webkit-margin-after: 0px;">
  Learn
</h2>

                  </tr>
                  <tr>
                    <td height="15"></td>
                  </tr>
                  <tr>
                    <td align="left" style="font-family: 'Lato', 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; color: #686f75; background-color: #ffffff;">Choose from over 100 courses on R, Python and SQL, with new courses every month.
                      Plus technologies like Git, Spark, and Shell are coming soon!</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
        <td width="40" height="40"></td>
      </tr>
      <tr>
        <td width="40" height="40"></td>
        <td width="520" height="40"></td>
        <td width="40" height="40"></td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="599" height="24" align="center" style="border-collapse: collapse; border: 0;"></td>
                  <td width="2" bgcolor="#d5eaef" height="24" align="center" style="border-collapse: collapse; border: 0;"></td>
                  <td width="599" height="24" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="#ffffff" class="white-container-full" align="center" cellpadding="0"
    cellspacing="0" style="border-radius: 4px;">
      <tr>
        <td width="40" height="40"></td>
        <td width="520" height="40"></td>
        <td width="40" height="40"></td>
      </tr>
      <tr>
        <td width="40" height="40"></td>
        <td width="520" height="40" align="left">
          <table cellpadding="0" cellspacing="0">
            <tr>
              <td width="100" align="left">
                <a href="https://www.datacamp.com/promo/cybermonday">
                  <img src="https://marketing-image-production.s3.amazonaws.com/uploads/d279609cc14c70d7a99683f8f22d6e5ecb1a2dd0b443bfec8a14eae426340dd8b859b8c4a031500a69ea4bd2b910afd4df83bae085a5a407905e5bec3ecf7a8a.png"
                  width="100" alt="Practice" border="0" style="color: #3d4251; font-family: 'Lato', 'Open Sans', sans-serif; font-size:15px; width: 100%;height:auto!important;display:block;"
                  />
                </a>
              </td>
              <td width="30"></td>
              <td>
                <table cellpadding="0" cellspacing="0">
                  <tr>
                     <h2 align="left" style="font-family: 'Lato', 'Open Sans', sans-serif; font-size: 22px; font-weight: bold;   color: #3d4251; background-color: #ffffff; text-align: left; margin: 0px; padding: 0px; -webkit-margin-before: 0px; -webkit-margin-after: 0px;">
  Practice
</h2>

                  </tr>
                  <tr>
                    <td height="15"></td>
                  </tr>
                  <tr>
                    <td align="left" style="font-family: 'Lato', 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; color: #686f75; background-color: #ffffff;">Keep your skills sharp with fun practice challenges—on desktop and on mobile.</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
        <td width="40" height="40"></td>
      </tr>
      <tr>
        <td width="40" height="40"></td>
        <td width="520" height="40"></td>
        <td width="40" height="40"></td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="599" height="24" align="center" style="border-collapse: collapse; border: 0;"></td>
                  <td width="2" bgcolor="#d5eaef" height="24" align="center" style="border-collapse: collapse; border: 0;"></td>
                  <td width="599" height="24" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="#ffffff" class="white-container-full" align="center" cellpadding="0"
    cellspacing="0" style="border-radius: 4px;">
      <tr>
        <td width="40" height="40"></td>
        <td width="520" height="40"></td>
        <td width="40" height="40"></td>
      </tr>
      <tr>
        <td width="40" height="40"></td>
        <td width="520" height="40" align="left">
          <table cellpadding="0" cellspacing="0">
            <tr>
              <td width="100" align="left">
                <a href="https://www.datacamp.com/promo/cybermonday">
                  <img src="https://marketing-image-production.s3.amazonaws.com/uploads/35fd63195f99b088e870faa2b3181ffe4594a057c1c5264df55645b8e99c54fd01fd26ee8b87422abefecf4db53b9cfffda279cd40ede25c6b3a510acac7f73b.png"
                  width="100" alt="Build" border="0" style="color: #3d4251; font-family: 'Lato', 'Open Sans', sans-serif; font-size:15px; width: 100%;height:auto!important;display:block;"
                  />
                </a>
              </td>
              <td width="30"></td>
              <td>
                <table cellpadding="0" cellspacing="0">
                  <tr>
                     <h2 align="left" style="font-family: 'Lato', 'Open Sans', sans-serif; font-size: 22px; font-weight: bold;   color: #3d4251; background-color: #ffffff; text-align: left; margin: 0px; padding: 0px; -webkit-margin-before: 0px; -webkit-margin-after: 0px;">
  Build
</h2>

                  </tr>
                  <tr>
                    <td height="15"></td>
                  </tr>
                  <tr>
                    <td align="left" style="font-family: 'Lato', 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; color: #686f75; background-color: #ffffff;">Get hands-on experience building your own data science projects.</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
        <td width="40" height="40"></td>
      </tr>
      <tr>
        <td width="40" height="40"></td>
        <td width="520" height="40"></td>
        <td width="40" height="40"></td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="72" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td align="center">
          <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td align="center">
                <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="40" align="right" valign="bottom">
                      <a href="https://www.datacamp.com/promo/cybermonday">
                        <img src="https://marketing-image-production.s3.amazonaws.com/uploads/a516409b01cb53af478d82c115b8df1dbec4ef3f9f32e4faeb56f377beda4e4c9fd214be8d920b0125427ec2f39e63f47ede229cf3a6739a261443c910b97b2b.png"
                        width="40" alt="" border="0" style="color: #3d4251; font-family: 'Lato', 'Open Sans', sans-serif; font-size:15px; width:40px;height:auto!important;display:block;"
                        />
                      </a>
                    </td>
                    <td width="350" align="left" valign="bottom">
                      <a href="https://www.datacamp.com/promo/cybermonday">
                        <img src="https://marketing-image-production.s3.amazonaws.com/uploads/705c592d9886d0f28b209bc62d1fdaa822d2d2c2fddb137a4bb8489a900580836c8b3c58ea16221349e49b4c99c10778c5b723d808cc4ef49b2b6039284455ce.png"
                        width="40" alt="" border="0" style="color: #3d4251; font-family: 'Lato', 'Open Sans', sans-serif; font-size:15px; width:40px;height:auto!important;display:block;"
                        />
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td width="40" align="right" valign="top" style="line-height: 40px;">
                      <a href="https://www.datacamp.com/promo/cybermonday">
                        <img src="https://marketing-image-production.s3.amazonaws.com/uploads/8545e6ed405cd5f8659d65671598d9978743e5e49e08d77a25dfbbd7ba36f319e7d6b186b63a0accce9647a78d0c120ae490ab724ccfbf03e75f5a030badb1c0.png"
                        width="40" alt="" border="0" style="color: #3d4251; font-family: 'Lato', 'Open Sans', sans-serif; font-size:15px; width:40px;height:auto!important;display:block;"
                        />
                      </a>
                    </td>
                    <td width="40" align="left" valign="top">
                      <div>
                        <!--[if mso]>
                          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
                          href="https://www.datacamp.com/promo/cybermonday" style="height: 90px;v-text-anchor:middle;width: 350px;"
                          stroke="f" fill="t">
                            <v:fill type="frame" src="https://marketing-image-production.s3.amazonaws.com/uploads/b8085ae2b7e8349f23d475fe9e0c8e8d18ccd44e4872e70c3d076ac102ac18d8f06b34ae2b73f532d2a36e8196a1e2c72a785b73936b23372eb17e5127fb7e79.png"
                            color="#fdc551" />
                            <w:anchorlock/>
                            <center style="color: #3d4251;font-family: 'Lato', 'Open Sans', sans-serif;font-size: 22px;font-weight:bold;">Learn Data Science For Less</center>
                          </v:rect>
                        <![endif]-->
                        <a class="cta-primary" href="https://www.datacamp.com/promo/cybermonday" style="background-color: #fdc551; background-image: url(https://marketing-image-production.s3.amazonaws.com/uploads/b8085ae2b7e8349f23d475fe9e0c8e8d18ccd44e4872e70c3d076ac102ac18d8f06b34ae2b73f532d2a36e8196a1e2c72a785b73936b23372eb17e5127fb7e79.png); background-repeat: no-repeat; color: #3d4251; display: inline-block; font-family: 'Lato', 'Open Sans', sans-serif; font-size: 22px; font-weight: bold; line-height: 90px; text-align:center; text-decoration:none; width: 350px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -webkit-text-size-adjust:none; mso-hide:all;">Learn Data Science For Less</a>
                      </div>
                    </td>
                  </tr>
                </table>
              </td>
              <td width="40"></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="48" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="40" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="36" align="center">
          <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td width="36" align="center">
                  <a href="https://www.datacamp.com">
                    <img src="https://s3.amazonaws.com/assets.datacamp.com/email/logos/dc-logo-head-white-small.png"
                    width="36" height="39" alt="DataCamp" border="0" style="color: #ffffff; font-family: 'Lato', 'Open Sans', sans-serif; font-size:15px; width:36px;height:39px;display:block;"
                    />
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="15" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="600" align="center">
          <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td width="600" align="center" style="font-family: 'Lato', 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: 22px; color: #ffffff; ">DataCamp Inc. | 350 Fifth Avenue | Suite 7730 | New York, NY 10118</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="25" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="33" align="center">
                    <a href="https://www.facebook.com/DataCamp-726282547396228/">
                      <img src="https://s3.amazonaws.com/assets.datacamp.com/email/footer/facebook-promo.png"
                      width="33" alt="Facebook" border="0" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 33px; height: 33px;"
                      />
                    </a>
                  </td>
                  <td width="20" align="center"></td>
                  <td width="33" align="center">
                    <a href="https://twitter.com/DataCamp">
                      <img src="https://s3.amazonaws.com/assets.datacamp.com/email/footer/twitter-promo.png"
                      width="33" alt="Twitter" border="0" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 33px; height: 33px;"
                      />
                    </a>
                  </td>
                  <td width="20" align="center"></td>
                  <td width="33" align="center">
                    <a href="https://www.linkedin.com/company-beta/3227175/">
                      <img src="https://s3.amazonaws.com/assets.datacamp.com/email/footer/linkedin-promo.png"
                      width="33" alt="LinkedIn" border="0" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 33px; height: 33px;"
                      />
                    </a>
                  </td>
                  <td width="20" align="center"></td>
                  <td width="33" align="center">
                    <a href="https://www.youtube.com/channel/UC79Gv3mYp6zKiSwYemEik9A">
                      <img src="https://s3.amazonaws.com/assets.datacamp.com/email/footer/youtube-promo.png"
                      width="33" alt="YouTube" border="0" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 33px; height: 33px;"
                      />
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="25" align="center" style="border-collapse: collapse; border: 0;"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="600" align="center">
          <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td width="600" align="center" style="font-family: 'Lato', 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: 22px; color: #ffffff; ">
                <a href="#"
                style="color: #ffffff; ">Unsubscribe</a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td width="600" align="center">
            <table bgcolor="" align="center" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td width="600" height="70" align="center" style="border-collapse: collapse; border: 0;"></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