Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" style="background: #fefefe; min-height: 100%;">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width" />

</head>

<body style="-moz-box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -webkit-text-size-adjust: 100%; box-sizing: border-box; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 18px; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important;"
  bgcolor="white">
  <style type="text/css">
    body {
      width: 100% !important;
      min-width: 100%;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      margin: 0;
      padding: 0;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    .ExternalClass {
      width: 100%;
    }

    .ExternalClass {
      line-height: 100%;
    }

    #backgroundTable {
      margin: 0;
      padding: 0;
      width: 100% !important;
      line-height: 100% !important;
    }

    img {
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
      width: auto;
      max-width: 100%;
      clear: both;
      display: block;
    }

    body {
      color: #0a0a0a;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: normal;
      padding: 0;
      margin: 0;
      text-align: left;
      line-height: 1.3;
    }

    body {
      font-size: 16px;
      line-height: 1.3;
    }

    a:hover {
      color: #147dc2;
    }

    a:active {
      color: #147dc2;
    }

    a:visited {
      color: #2199e8;
    }

    h1 a:visited {
      color: #2199e8;
    }

    h2 a:visited {
      color: #2199e8;
    }

    h3 a:visited {
      color: #2199e8;
    }

    h4 a:visited {
      color: #2199e8;
    }

    h5 a:visited {
      color: #2199e8;
    }

    h6 a:visited {
      color: #2199e8;
    }

    table.button:hover table tr td a {
      color: #fefefe;
    }

    table.button:active table tr td a {
      color: #fefefe;
    }

    table.button table tr td a:visited {
      color: #fefefe;
    }

    table.button.tiny:hover table tr td a {
      color: #fefefe;
    }

    table.button.tiny:active table tr td a {
      color: #fefefe;
    }

    table.button.tiny table tr td a:visited {
      color: #fefefe;
    }

    table.button.small:hover table tr td a {
      color: #fefefe;
    }

    table.button.small:active table tr td a {
      color: #fefefe;
    }

    table.button.small table tr td a:visited {
      color: #fefefe;
    }

    table.button.large:hover table tr td a {
      color: #fefefe;
    }

    table.button.large:active table tr td a {
      color: #fefefe;
    }

    table.button.large table tr td a:visited {
      color: #fefefe;
    }

    table.button:hover table td {
      background: #147dc2;
      color: #fefefe;
    }

    table.button:visited table td {
      background: #147dc2;
      color: #fefefe;
    }

    table.button:active table td {
      background: #147dc2;
      color: #fefefe;
    }

    table.button:hover table a {
      border: 0 solid #147dc2;
    }

    table.button:visited table a {
      border: 0 solid #147dc2;
    }

    table.button:active table a {
      border: 0 solid #147dc2;
    }

    table.button.secondary:hover table td {
      background: #919191;
      color: #fefefe;
    }

    table.button.secondary:hover table a {
      border: 0 solid #919191;
    }

    table.button.secondary:hover table td a {
      color: #fefefe;
    }

    table.button.secondary:active table td a {
      color: #fefefe;
    }

    table.button.secondary table td a:visited {
      color: #fefefe;
    }

    table.button.success:hover table td {
      background: #23bf5d;
    }

    table.button.success:hover table a {
      border: 0 solid #23bf5d;
    }

    table.button.alert:hover table td {
      background: #e23317;
    }

    table.button.alert:hover table a {
      border: 0 solid #e23317;
    }

    table.button.warning:hover table td {
      background: #cc8b00;
    }

    table.button.warning:hover table a {
      border: 0px solid #cc8b00;
    }

    .thumbnail:hover {
      box-shadow: 0 0 6px 1px rgba(33, 153, 232, 0.5);
    }

    .thumbnail:focus {
      box-shadow: 0 0 6px 1px rgba(33, 153, 232, 0.5);
    }

    body.outlook p {
      display: inline !important;
    }

    body {
      font-size: 14px;
      line-height: 18px;
      background: white;
    }

    @media only screen and (max-width: 596px) {
      .small-float-center {
        margin: 0 auto !important;
        float: none !important;
        text-align: center !important;
      }
      .small-text-center {
        text-align: center !important;
      }
      .small-text-left {
        text-align: left !important;
      }
      .small-text-right {
        text-align: right !important;
      }
      .hide-for-large {
        display: block !important;
        width: auto !important;
        overflow: visible !important;
        max-height: none !important;
        font-size: inherit !important;
        line-height: inherit !important;
      }
      table.body table.container .hide-for-large {
        display: table !important;
        width: 100% !important;
      }
      table.body table.container .row.hide-for-large {
        display: table !important;
        width: 100% !important;
      }
      table.body table.container .callout-inner.hide-for-large {
        display: table-cell !important;
        width: 100% !important;
      }
      table.body table.container .show-for-large {
        display: none !important;
        width: 0;
        mso-hide: all;
        overflow: hidden;
      }
      table.body img {
        width: auto;
        height: auto;
      }
      table.body center {
        min-width: 0 !important;
      }
      table.body .container {
        width: 95% !important;
      }
      table.body .columns {
        height: auto !important;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
      table.body .column {
        height: auto !important;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
      table.body .columns .column {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      table.body .columns .columns {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      table.body .column .column {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      table.body .column .columns {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      table.body .collapse .columns {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      table.body .collapse .column {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      td.small-1 {
        display: inline-block !important;
        width: 8.33333% !important;
      }
      th.small-1 {
        display: inline-block !important;
        width: 8.33333% !important;
      }
      td.small-2 {
        display: inline-block !important;
        width: 16.66667% !important;
      }
      th.small-2 {
        display: inline-block !important;
        width: 16.66667% !important;
      }
      td.small-3 {
        display: inline-block !important;
        width: 25% !important;
      }
      th.small-3 {
        display: inline-block !important;
        width: 25% !important;
      }
      td.small-4 {
        display: inline-block !important;
        width: 33.33333% !important;
      }
      th.small-4 {
        display: inline-block !important;
        width: 33.33333% !important;
      }
      td.small-5 {
        display: inline-block !important;
        width: 41.66667% !important;
      }
      th.small-5 {
        display: inline-block !important;
        width: 41.66667% !important;
      }
      td.small-6 {
        display: inline-block !important;
        width: 50% !important;
      }
      th.small-6 {
        display: inline-block !important;
        width: 50% !important;
      }
      td.small-7 {
        display: inline-block !important;
        width: 58.33333% !important;
      }
      th.small-7 {
        display: inline-block !important;
        width: 58.33333% !important;
      }
      td.small-8 {
        display: inline-block !important;
        width: 66.66667% !important;
      }
      th.small-8 {
        display: inline-block !important;
        width: 66.66667% !important;
      }
      td.small-9 {
        display: inline-block !important;
        width: 75% !important;
      }
      th.small-9 {
        display: inline-block !important;
        width: 75% !important;
      }
      td.small-10 {
        display: inline-block !important;
        width: 83.33333% !important;
      }
      th.small-10 {
        display: inline-block !important;
        width: 83.33333% !important;
      }
      td.small-11 {
        display: inline-block !important;
        width: 91.66667% !important;
      }
      th.small-11 {
        display: inline-block !important;
        width: 91.66667% !important;
      }
      td.small-12 {
        display: inline-block !important;
        width: 100% !important;
      }
      th.small-12 {
        display: inline-block !important;
        width: 100% !important;
      }
      .columns td.small-12 {
        display: block !important;
        width: 100% !important;
      }
      .column td.small-12 {
        display: block !important;
        width: 100% !important;
      }
      .columns th.small-12 {
        display: block !important;
        width: 100% !important;
      }
      .column th.small-12 {
        display: block !important;
        width: 100% !important;
      }
      table.body td.small-offset-1 {
        margin-left: 8.33333% !important;
      }
      table.body th.small-offset-1 {
        margin-left: 8.33333% !important;
      }
      table.body td.small-offset-2 {
        margin-left: 16.66667% !important;
      }
      table.body th.small-offset-2 {
        margin-left: 16.66667% !important;
      }
      table.body td.small-offset-3 {
        margin-left: 25% !important;
      }
      table.body th.small-offset-3 {
        margin-left: 25% !important;
      }
      table.body td.small-offset-4 {
        margin-left: 33.33333% !important;
      }
      table.body th.small-offset-4 {
        margin-left: 33.33333% !important;
      }
      table.body td.small-offset-5 {
        margin-left: 41.66667% !important;
      }
      table.body th.small-offset-5 {
        margin-left: 41.66667% !important;
      }
      table.body td.small-offset-6 {
        margin-left: 50% !important;
      }
      table.body th.small-offset-6 {
        margin-left: 50% !important;
      }
      table.body td.small-offset-7 {
        margin-left: 58.33333% !important;
      }
      table.body th.small-offset-7 {
        margin-left: 58.33333% !important;
      }
      table.body td.small-offset-8 {
        margin-left: 66.66667% !important;
      }
      table.body th.small-offset-8 {
        margin-left: 66.66667% !important;
      }
      table.body td.small-offset-9 {
        margin-left: 75% !important;
      }
      table.body th.small-offset-9 {
        margin-left: 75% !important;
      }
      table.body td.small-offset-10 {
        margin-left: 83.33333% !important;
      }
      table.body th.small-offset-10 {
        margin-left: 83.33333% !important;
      }
      table.body td.small-offset-11 {
        margin-left: 91.66667% !important;
      }
      table.body th.small-offset-11 {
        margin-left: 91.66667% !important;
      }
      table.body table.columns td.expander {
        display: none !important;
      }
      table.body table.columns th.expander {
        display: none !important;
      }
      table.body .right-text-pad {
        padding-left: 10px !important;
      }
      table.body .text-pad-right {
        padding-left: 10px !important;
      }
      table.body .left-text-pad {
        padding-right: 10px !important;
      }
      table.body .text-pad-left {
        padding-right: 10px !important;
      }
      table.menu {
        width: 100% !important;
      }
      table.menu td {
        width: auto !important;
        display: inline-block !important;
      }
      table.menu th {
        width: auto !important;
        display: inline-block !important;
      }
      table.menu.vertical td {
        display: block !important;
      }
      table.menu.vertical th {
        display: block !important;
      }
      table.menu.small-vertical td {
        display: block !important;
      }
      table.menu.small-vertical th {
        display: block !important;
      }
      table.menu[align="center"] {
        width: auto !important;
      }
      table.button.small-expand {
        width: 100% !important;
      }
      table.button.small-expanded {
        width: 100% !important;
      }
      table.button.small-expand table {
        width: 100%;
      }
      table.button.small-expanded table {
        width: 100%;
      }
      table.button.small-expand table a {
        text-align: center !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      table.button.small-expanded table a {
        text-align: center !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      table.button.small-expand center {
        min-width: 0;
      }
      table.button.small-expanded center {
        min-width: 0;
      }
      h1 {
        font-size: 75px;
        line-height: 85px;
      }
      h2 {
        font-size: 30px;
        line-height: 40px;
      }
      h3 {
        font-size: 18px;
        line-height: 24px;
      }
      p {
        font-size: 18px;
        line-height: 24px;
      }
      table.header-1 th.first.last {
        padding-right: 0 !important;
        padding-left: 0 !important;
      }
      table.separator th.first.last {
        padding-right: 0 !important;
        padding-left: 0 !important;
      }
      table.header-1 img {
        width: auto;
      }
      table.separator img {
        width: auto;
      }
      table.hourly-breakdown img {
        width: auto;
      }
      table.follow-up-wrapper img {
        width: auto;
      }
      table.hourly-breakdown th.first {
        padding-top: 20px;
        padding-bottom: 20px;
      }
      table.hourly-breakdown th.last {
        padding-top: 20px;
        padding-bottom: 20px;
      }
      table.follow-up-wrapper th.first {
        padding-top: 20px;
        padding-bottom: 20px;
      }
      table.follow-up-wrapper th.last {
        padding-top: 20px;
        padding-bottom: 20px;
      }
      table.scatterplot-wrapper img {
        width: auto;
      }
      table.scatterplot-wrapper p {
        margin: 20px 0;
      }
      table.scatterplot-wrapper p a {
        font-size: 18px;
        line-height: 24px;
        padding: 9px 20px;
      }
      table.footer p {
        font-size: 12px;
      }
    }

    @media only screen and (max-width: 600px) {
      table.header img {
        height: 54px;
        width: 228px;
      }
    }
  </style>
  <table class="body" data-made-with-foundation="" style="border-collapse: collapse; border-spacing: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; height: 100%; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"
    bgcolor="#fefefe">
    <tr style="padding: 0; vertical-align: top;" align="left">
      <td class="center" align="center" valign="top" style="-moz-hyphens: auto; -webkit-hyphens: auto; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; word-wrap: break-word;">
        <center style="min-width: 580px; width: 100%;">

          <table class=" container" align="center" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: inherit; vertical-align: top; width: 580px;" bgcolor="#fefefe">
            <tbody>
              <tr style="padding: 0; vertical-align: top;" align="left">
                <td style="-moz-hyphens: auto; -webkit-hyphens: auto; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; word-wrap: break-word;"
                  align="left" valign="top">
                  <table class="header-1 row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                    <tbody>
                      <tr style="padding: 0; vertical-align: top;" align="left">
                        <th class=" small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0; width: 564px;" align="left">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tr style="padding: 0; vertical-align: top;" align="left">
                              <th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0;" align="left">
                                <p class="text-center" style="-webkit-font-smoothing: antialiased; color: #4a4a4a; font-family: arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 36px; margin: 0; padding: 0;" align="center"><img alt="" width="580" src="https://www.rescuetime.com/assets/year-in-review-email/header-with-text.png" style="-ms-interpolation-mode: bicubic; clear: both; display: block; max-width: 580px; outline: none; text-decoration: none; width: auto;"
                                  /></p>
                                <p class="text-center" style="-webkit-font-smoothing: antialiased; color: #4a4a4a; font-family: arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 36px; margin: 0; padding: 0;" align="center">We’ve rolled up your logged time for 2018 into a personal infographic</p>
                              </th>
                              <th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; visibility: hidden; width: 0;" align="left"></th>
                            </tr>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>

                  <table class="total-hours row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                    <tbody>
                      <tr style="padding: 0; vertical-align: top;" align="left">
                        <th class=" small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0 16px 16px; width: 564px;" align="left">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tr style="padding: 0; vertical-align: top;" align="left">
                              <th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0;" align="left">
                                <h1 class="text-center" style="-webkit-font-smoothing: antialiased; color: #8b572a; font-family: 'Tahoma', sans-serif; font-size: 100px; font-weight: bold; line-height: 121px; margin: 0; padding: 6px 0; word-wrap: normal;" align="center">596</h1>
                                <h2 class="text-center" style="-webkit-font-smoothing: antialiased; color: #4a4a4a; font-family: arial, sans-serif; font-size: 36px; font-weight: normal; line-height: 41px; margin: 0 0 20px; padding: 0; word-wrap: normal;" align="center">Total Hours Logged</h2>
                                <br />
                                <p class="text-center" style="-webkit-font-smoothing: antialiased; color: #4a4a4a; font-family: arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 36px; margin: 0 0 10px; padding: 0;" align="center"><a href="https://www.rescuetime.com/year-in-review/2018?utm_campaign=yearinreview&amp;utm_medium=email&amp;utm_source=u" style="background: #65a870; border-radius: 10px; color: #fbf9ee; display: inline-block; font-family: Helvetica, Arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 69px; margin: 0; padding: 0 35px; text-align: left; text-decoration: none;">View Your Year In Review Report</a></p>
                                <br />
                              </th>
                              <th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; visibility: hidden; width: 0;" align="left"></th>
                            </tr>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>

                  <table class="separator row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                    <tbody>
                      <tr style="padding: 0; vertical-align: top;" align="left">
                        <th class=" small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0; width: 564px;" align="left">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tr style="padding: 0; vertical-align: top;" align="left">
                              <th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0;" align="left">
                                <p class="text-center" style="-webkit-font-smoothing: antialiased; color: #4a4a4a; font-family: arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 36px; margin: 0; padding: 0;" align="center"><img alt="" width="580" src="https://www.rescuetime.com/assets/year-in-review-email/clock-separator.png" style="-ms-interpolation-mode: bicubic; clear: both; display: block; max-width: 580px; outline: none; text-decoration: none; width: auto;"
                                  /></p>
                              </th>
                              <th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; visibility: hidden; width: 0;" align="left"></th>
                            </tr>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>

                  <table class="hourly-breakdown row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;" bgcolor="#f5f0d8">
                    <tbody>
                      <tr style="padding: 0; vertical-align: top;" align="left">
                        <th class=" small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 45px; width: 564px;" align="left">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tr style="padding: 0; vertical-align: top;" align="left">
                              <th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0;" align="left">
                                <p style="-webkit-font-smoothing: antialiased; color: #4a4a4a; font-family: arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 36px; margin: 0 0 10px; padding: 0;" align="left">Last year, you logged <strong style="color: #8b572a;">596 hours</strong> of time with RescueTime on 190 days. Of that time, <strong style="color: #8b572a;">226 hours</strong> were categorized as Productive time, and
                                  <strong
                                    style="color: #8b572a;">247 hours</strong> were Distracting.</p>
                              </th>
                              <th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; visibility: hidden; width: 0;" align="left"></th>
                            </tr>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>

                  <table class="separator row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                    <tbody>
                      <tr style="padding: 0; vertical-align: top;" align="left">
                        <th class=" small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0; width: 564px;" align="left">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tr style="padding: 0; vertical-align: top;" align="left">
                              <th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0;" align="left">
                                <p class="text-center" style="-webkit-font-smoothing: antialiased; color: #4a4a4a; font-family: arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 36px; margin: 0; padding: 0;" align="center"><img alt="" width="580" src="https://www.rescuetime.com/assets/year-in-review-email/lightbulb-separator.png" style="-ms-interpolation-mode: bicubic; clear: both; display: block; max-width: 580px; outline: none; text-decoration: none; width: auto;"
                                  /></p>
                              </th>
                              <th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; visibility: hidden; width: 0;" align="left"></th>
                            </tr>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>

                  <table class="scatterplot-wrapper row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;" bgcolor="#fbf9ee">
                    <tbody>
                      <tr style="padding: 0; vertical-align: top;" align="left">
                        <th class=" small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0 30px 16px 20px; width: 564px;" align="left">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tr style="padding: 0; vertical-align: top;" align="left">
                              <th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0;" align="left">
                                <p style="-webkit-font-smoothing: antialiased; color: #4a4a4a; font-family: arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 36px; margin: 45px 0; padding: 0;" align="left"></p>
                                <h3 class="text-center" style="-webkit-font-smoothing: antialiased; color: #4a4a4a; font-family: arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 27px; margin: 0 0 10px; padding: 0; word-wrap: normal;" align="center">Here's how productive your days were.</h3>
                                <p style="-webkit-font-smoothing: antialiased; color: #4a4a4a; font-family: arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 36px; margin: 45px 0; padding: 0;" align="left"><img alt="" width="530" src="https://rt-public-resources.s3.amazonaws.com/fd66225f-b764-4bc6-8057-5ed47bcaf9e8.png" style="-ms-interpolation-mode: bicubic; clear: both; display: block; max-width: 580px; outline: none; text-decoration: none; width: 100%;"
                                  /></p>
                                <p class="text-center" style="-webkit-font-smoothing: antialiased; color: #4a4a4a; font-family: arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 36px; margin: 45px 0; padding: 0;" align="center"><a href="https://www.rescuetime.com/year-in-review/2018?utm_campaign=yearinreview&amp;utm_medium=email&amp;utm_source=u" style="background: #65a870; border-radius: 10px; color: #fbf9ee; display: inline-block; font-family: Helvetica, Arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 69px; margin: 0; padding: 0 35px; text-align: left; text-decoration: none;">View Your Year In Review Report</a></p>
                                <br />
                              </th>
                              <th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; visibility: hidden; width: 0;" align="left"></th>
                            </tr>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>

                  <table class="follow-up-wrapper row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;" bgcolor="white">
                    <tbody>
                      <tr style="padding: 0; vertical-align: top;" align="left">
                        <th class=" small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 45px; width: 564px;" align="left">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tr style="padding: 0; vertical-align: top;" align="left">
                              <th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0;" align="left">
                                <p class="text-center" style="-webkit-font-smoothing: antialiased; color: #4a4a4a; font-family: arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 36px; margin: 0 0 20px; padding: 0;" align="center">You may also enjoy reading our <a href="https://blog.rescuetime.com/work-life-balance-study-2019/" style="color: #2199e8; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">global data trends from 2018</a>,
                                  and a <a href="https://blog.rescuetime.com/rescuetime-blog-best-of-2018/" style="color: #2199e8; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">recap of our top blog posts for the year</a>.</p>
                                <br />
                                <p class="text-center" style="-webkit-font-smoothing: antialiased; color: #9b9b9b; font-family: arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 36px; margin: 0 0 20px; padding: 0;" align="center">Have a happy and productive 2019!</p>
                                <br />
                                <p class="text-center social-links" style="-webkit-font-smoothing: antialiased; color: #9b9b9b; font-family: arial, sans-serif; font-size: 24px; font-weight: normal; line-height: 36px; margin: 0 0 20px; padding: 15px 0 0;" align="center">
                                  <a href="https://www.instagram.com/rescuetime" style="color: #2199e8; display: inline-block; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 0px; text-align: left; text-decoration: none; width: 37px;"><img width="37" alt="" src="https://www.rescuetime.com/assets/year-in-review-email/instagram.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: 37px;" /></a>
                                  <a
                                    href="https://www.facebook.com/rescuetime" style="color: #2199e8; display: inline-block; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 0px; text-align: left; text-decoration: none; width: 37px;"><img width="37" alt="" src="https://www.rescuetime.com/assets/year-in-review-email/facebook.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: 37px;"
                                    /></a> <a href="https://www.twitter.com/rescuetime" style="color: #2199e8; display: inline-block; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 0px; text-align: left; text-decoration: none; width: 37px;"><img width="37" alt="" src="https://www.rescuetime.com/assets/year-in-review-email/twitter.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: 37px;" /></a>
                                    <a
                                      href="https://www.linkedin.com/company/rescuetime" style="color: #2199e8; display: inline-block; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 0px; text-align: left; text-decoration: none; width: 37px;"><img width="37" alt="" src="https://www.rescuetime.com/assets/year-in-review-email/linkedin.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration:!
  none; width: 37px;" /></a>
                                </p>
                              </th>
                              <th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; visibility: hidden; width: 0;" align="left"></th>
                            </tr>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>

                  <table class="footer row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                    <tbody>
                      <tr style="padding: 0; vertical-align: top;" align="left">
                        <th class=" small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0 16px 16px; width: 564px;" align="left">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tr style="padding: 0; vertical-align: top;" align="left">
                              <th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0;" align="left">
                                <p class="text-center" style="-webkit-font-smoothing: antialiased; color: #9b9b9b; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 18px; margin: 0 0 20px; padding: 0;" align="center">You're receiving this email because you chose to receive summary emails from RescueTime. Change your mind? We don't want to be a pest. <a href="#" style="color: #667b8b; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: underline;">Unsubscribe Instantly</a>.</p>
                                <br />
                                <p class="text-center" style="-webkit-font-smoothing: antialiased; color: #9b9b9b; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 18px; margin: 0 0 20px; padding: 0;" align="center">RescueTime &amp; the RescueTime Logo are registered trademarks of RescueTime, Inc<br /><br />RescueTime, Inc — 811 1st Ave. Suite 480 Seattle, WA 98104<br /><br />RescueTime Privacy Policy last updated June 1, 2018</p>
                              </th>
                              <th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; visibility: hidden; width: 0;" align="left"></th>
                            </tr>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>

        </center>
      </td>
    </tr>
  </table>
</body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console