cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <head>
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>RescueTime weekly summary</title>
  <style type="text/css">
    .protect-autolinks-darkbg a { text-decoration: none; color: #ffffff; }
      .protect-autolinks a { text-decoration: none; color: #333333; }
  </style>
</head>

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
  <table class="view-on-web-bar" width="100%" cellpadding="5" cellspacing="0">
    <tbody>
      <tr>
        <td bgcolor="#666666" align="center" style="background-color: #666666;">
          <a href="#" style="color: #fff; text-decoration: none; font-size: 10px;" target="_blank">
            Having trouble viewing this email? <u>Click here to view it in your browser.</u>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="background-wrapper" style="background-color: #edf4f9;">
    <table width="100%" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td bgcolor="#EDF4F9" width="100%" align="center">


            <table width="600" class="wrapper" style="width: 600px; clear: both !important; margin-right: auto; margin-top: auto; margin-bottom: auto; margin-left: auto;">
              <tbody>
                <tr>
                  <td class="header container" align="left" style="padding-top: 20px; padding-bottom: 20px; vertical-align: top; display: block !important; width: 600px !important; clear: both !important; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"
                    valign="top">
                    <table class="row" width="600" style="border-spacing: 0;">
                      <tbody>
                        <tr>
                          <td style="vertical-align: top;" valign="top">
                            <div class="content" style="padding-left: 15px; padding-top: 0; padding-bottom: 0; padding-right: 15px; margin-right: auto; margin-top: 0; margin-bottom: 0; margin-left: auto; display: block;">
                              <a href="https://www.rescuetime.com/login?return_to=%2Fdashboard%3Futm_campaign%3Dweekly-free%26utm_medium%3Demail%26utm_source%3Dstats" title="RescueTime" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none;"
                                target="_blank"><img src="https://www.rescuetime.com/images/new-email/rescuetime-logo.png" alt="RescueTime" border="0"></a>
                            </div>
                          </td>
                          <td align="right" style="vertical-align: top;" valign="top">
                            <div class="content" style="padding-left: 15px; padding-top: 0; padding-bottom: 0; padding-right: 15px; margin-right: auto; margin-top: 0; margin-bottom: 0; margin-left: auto; display: block;">
                              <h1 style="font-family: Helvetica, Arial, sans; font-size: 18px; color: #666; font-weight: normal; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 10px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">Your Weekly Report</h1>
                              <p style="font-family: Helvetica, Arial, sans; font-size: 14px; color: #333; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">For the week of January 29, 2017</p>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>


                <tr>
                  <td class="overview container white-rounded" align="left" style="vertical-align: top; border-radius: 10px; display: block !important; width: 600px !important; clear: both !important; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border-top-color: #d5dce0; border-right-color: #d5dce0; border-bottom-color: #d5dce0; border-left-color: #d5dce0; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; background-color: #fff;"
                    bgcolor="#fff" valign="top">
                    <!-- spacer table, yeah -->
                    <table class="spacer" style="border-spacing: 0; width: 600px;">
                      <tbody>
                        <tr>
                          <td style="vertical-align: top; height: 15px; font-size: 1px;" valign="top"><img src="https://www.rescuetime.com/images/spacer.gif" style="width: 1px; height: 15px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="row" width="600" style="border-spacing: 0;">
                      <tbody>
                        <tr>
                          <td width="300" style="vertical-align: top;" valign="top">
                            <div class="content" style="padding-left: 15px; padding-top: 0; padding-bottom: 0; padding-right: 15px; margin-right: auto; margin-top: 0; margin-bottom: 0; margin-left: auto; display: block;">
                              <h2 style="font-family: Georgia, Times, serif; font-size: 16px; font-weight: normal; color: #333; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">
              					    Over the past week, you logged:
              					  </h2>
                              <p class="overview-measure" style="font-family: Helvetica, Arial, sans; font-weight: bold; font-size: 42px; color: #104d82; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">
                                59h 42m </p>
                              <p class="overview-context" style="font-family: Helvetica, Arial, sans; font-style: italic; font-size: 13px; color: #777; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">
                                <img src="https://www.rescuetime.com/images/new-email/blue-up-arrow.png" alt="RescueTime" border="0"> 14 more hours than the previous week

                              </p>
                            </div>
                          </td>
                          <td width="300" style="vertical-align: top;" valign="top">
                            <div class="content" style="padding-left: 15px; padding-top: 0; padding-bottom: 0; padding-right: 15px; margin-right: auto; margin-top: 0; margin-bottom: 0; margin-left: auto; display: block;">
                              <h2 style="font-family: Georgia, Times, serif; font-size: 16px; font-weight: normal; color: #333; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">
               					    Your productivity score:
               					  </h2>
                              <p class="overview-measure" style="font-family: Helvetica, Arial, sans; font-weight: bold; font-size: 42px; color: #104d82; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">
                                45%
                              </p>
                              <p class="overview-context" style="font-family: Helvetica, Arial, sans; font-style: italic; font-size: 13px; color: #777; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">
                                about the same as the previous week

                              </p>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <!-- spacer table, yeah -->
                    <table class="spacer" style="border-spacing: 0; width: 600px;">
                      <tbody>
                        <tr>
                          <td style="vertical-align: top; height: 15px; font-size: 1px;" valign="top"><img src="https://www.rescuetime.com/images/spacer.gif" style="width: 1px; height: 15px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <!-- productivity breakdown -->
                    <table class="row" width="600" style="border-spacing: 0;">
                      <tbody>
                        <tr>
                          <td height="30" style="width: 39%; height: 30px; vertical-align: top; background-color: d5140f;" bgcolor="d5140f" valign="top">
                            <a href="https://www.rescuetime.com/browse/productivity/by/rank/for/the/week/of/2017-01-29?utm_campaign=weekly-free&amp;utm_medium=email&amp;utm_source=stats" style="display: block; height: 30px; max-height: 30px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none;"
                              title="very distracting!" target="_blank">
                              <img src="https://www.rescuetime.com/images/email/productivities/score-2.gif" border="0" height="30" width="100%"></a>
                          </td>
                          <td height="30" style="width: 0%; height: 30px; vertical-align: top; background-color: 9e2635;" bgcolor="9e2635" valign="top">
                            <a href="https://www.rescuetime.com/browse/productivity/by/rank/for/the/week/of/2017-01-29?utm_campaign=weekly-free&amp;utm_medium=email&amp;utm_source=stats" style="display: block; height: 30px; max-height: 30px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none;"
                              title="distracting" target="_blank">
                              <img src="https://www.rescuetime.com/images/email/productivities/score-1.gif" border="0" height="30" width="100%"></a>
                          </td>
                          <td height="30" style="width: 18%; height: 30px; vertical-align: top; background-color: 5f3557;" bgcolor="5f3557" valign="top">
                            <a href="https://www.rescuetime.com/browse/productivity/by/rank/for/the/week/of/2017-01-29?utm_campaign=weekly-free&amp;utm_medium=email&amp;utm_source=stats" style="display: block; height: 30px; max-height: 30px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none;"
                              title="neutral" target="_blank">
                              <img src="https://www.rescuetime.com/images/email/productivities/score0.gif" border="0" height="30" width="100%"></a>
                          </td>
                          <td height="30" style="width: 20%; height: 30px; vertical-align: top; background-color: 3c5497;" bgcolor="3c5497" valign="top">
                            <a href="https://www.rescuetime.com/browse/productivity/by/rank/for/the/week/of/2017-01-29?utm_campaign=weekly-free&amp;utm_medium=email&amp;utm_source=stats" style="display: block; height: 30px; max-height: 30px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none;"
                              title="productive" target="_blank">
                              <img src="https://www.rescuetime.com/images/email/productivities/score1.gif" border="0" height="30" width="100%"></a>
                          </td>
                          <td height="30" style="width: 20%; height: 30px; vertical-align: top; background-color: 1673d3;" bgcolor="1673d3" valign="top">
                            <a href="https://www.rescuetime.com/browse/productivity/by/rank/for/the/week/of/2017-01-29?utm_campaign=weekly-free&amp;utm_medium=email&amp;utm_source=stats" style="display: block; height: 30px; max-height: 30px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none;"
                              title="very productive!" target="_blank">
                              <img src="https://www.rescuetime.com/images/email/productivities/score2.gif" border="0" height="30" width="100%"></a>
                          </td>

                        </tr>
                      </tbody>
                    </table>


                    <table class="row productivity-breakdown-labels" width="600">
                      <tbody>
                        <tr>
                          <td colspan="2">
                            <img src="https://www.rescuetime.com/images/spacer.gif" style="height: 10px;">
                          </td>
                        </tr>
                        <tr>
                          <td width="300">
                            <div class="content" style="padding-left: 15px; padding-top: 0; padding-bottom: 0; padding-right: 15px; margin-right: auto; margin-top: 0; margin-bottom: 0; margin-left: auto; display: block;">
                              <p class="very-distracting" style="font-size: 12px; font-family: Helvetica, Arial, sans; color: #d5140f; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">Very distracting time!</p>
                            </div>
                          </td>
                          <td width="300">
                            <div class="content" style="padding-left: 15px; padding-top: 0; padding-bottom: 0; padding-right: 15px; margin-right: auto; margin-top: 0; margin-bottom: 0; margin-left: auto; display: block;">
                              <p class="very-productive" style="font-size: 12px; font-family: Helvetica, Arial, sans; color: #1673d3; text-align: right; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;"
                                align="right">Very productive time!</p>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <!-- spacer table, yeah -->
                    <table class="spacer" style="border-spacing: 0; width: 600px;">
                      <tbody>
                        <tr>
                          <td style="vertical-align: top; height: 15px; font-size: 1px;" valign="top"><img src="https://www.rescuetime.com/images/spacer.gif" style="width: 1px; height: 15px;"></td>
                        </tr>
                      </tbody>
                    </table>

                  </td>

                </tr>
                <tr>
                  <td class="lists container" align="left" style="vertical-align: top; display: block !important; width: 600px !important; clear: both !important; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" valign="top">


                    <!-- spacer table, yeah -->
                    <table class="spacer" style="border-spacing: 0; width: 600px;">
                      <tbody>
                        <tr>
                          <td style="vertical-align: top; height: 25px; font-size: 1px;" valign="top"><img src="https://www.rescuetime.com/images/spacer.gif" style="width: 1px; height: 15px;"></td>
                        </tr>
                      </tbody>
                    </table>

                    <!-- overviews and entities -->
                    <table class="row" width="600" style="border-spacing: 0;">
                      <tbody>
                        <tr>
                          <td width="300" class="left-column" style="vertical-align: top; border-right-width: 1px; border-right-color: #bcbcbc; border-right-style: solid;" valign="top">
                            <div class="content" style="padding-left: 15px; padding-top: 0; padding-bottom: 0; padding-right: 15px; margin-right: auto; margin-top: 0; margin-bottom: 0; margin-left: auto; display: block;">
                              <h2 style="font-family: Georgia, Times, serif; font-size: 16px; font-weight: normal; color: #333; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">
            					        Most of your time went towards:
            					      </h2>
                              <table class="ranked-bullet-list" style="border-spacing: 0;">
                                <tbody>
                                  <tr>
                                    <td class="ranked-bullet" style="vertical-align: top; padding-top: 10px;" valign="top">
                                      <div style="font-family: Helvetica, Arial, sans; color: #fff; font-size: 14px; font-weight: bold; border-radius: 4px; text-align: center; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: #d5140f;" align="center">

                                        31%

                                      </div>
                                    </td>
                                    <td class="ranked-label" style="vertical-align: top; padding-top: 15px; padding-left: 5px;" valign="top">
                                      <p style="font-family: Georgia, Times, serif; font-size: 14px; color: #000; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">Entertainment</p>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td class="ranked-bullet" style="vertical-align: top; padding-top: 10px;" valign="top">
                                      <div style="font-family: Helvetica, Arial, sans; color: #fff; font-size: 14px; font-weight: bold; border-radius: 4px; text-align: center; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: #3c5497;" align="center">

                                        20%

                                      </div>
                                    </td>
                                    <td class="ranked-label" style="vertical-align: top; padding-top: 15px; padding-left: 5px;" valign="top">
                                      <p style="font-family: Georgia, Times, serif; font-size: 14px; color: #000; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">Business</p>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td class="ranked-bullet" style="vertical-align: top; padding-top: 10px;" valign="top">
                                      <div style="font-family: Helvetica, Arial, sans; color: #fff; font-size: 14px; font-weight: bold; border-radius: 4px; text-align: center; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: #5f3557;" align="center">

                                        9%

                                      </div>
                                    </td>
                                    <td class="ranked-label" style="vertical-align: top; padding-top: 15px; padding-left: 5px;" valign="top">
                                      <p style="font-family: Georgia, Times, serif; font-size: 14px; color: #000; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">Communication &amp; Scheduling</p>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td class="ranked-bullet" style="vertical-align: top; padding-top: 10px;" valign="top">
                                      <div style="font-family: Helvetica, Arial, sans; color: #fff; font-size: 14px; font-weight: bold; border-radius: 4px; text-align: center; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: #9e2635;" align="center">

                                        8%

                                      </div>
                                    </td>
                                    <td class="ranked-label" style="vertical-align: top; padding-top: 15px; padding-left: 5px;" valign="top">
                                      <p style="font-family: Georgia, Times, serif; font-size: 14px; color: #000; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">Utilities</p>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td class="ranked-bullet" style="vertical-align: top; padding-top: 10px;" valign="top">
                                      <div style="font-family: Helvetica, Arial, sans; color: #fff; font-size: 14px; font-weight: bold; border-radius: 4px; text-align: center; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: #3c5497;" align="center">

                                        8%

                                      </div>
                                    </td>
                                    <td class="ranked-label" style="vertical-align: top; padding-top: 15px; padding-left: 5px;" valign="top">
                                      <p style="font-family: Georgia, Times, serif; font-size: 14px; color: #000; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">Social Networking</p>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <br>
                              <div class="report-link" style="border-left-width: 1px; border-bottom-width: 1px; border-right-width: 1px; border-top-color: #d5dce0; border-right-color: #d5dce0; border-bottom-color: #d5dce0; border-left-color: #d5dce0; border-top-width: 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-style: solid; border-radius: 10px; background-color: #fffdf4; text-align: center;"
                                align="center">
                                <h4 style="padding-top: 10px; padding-bottom: 10px; margin-top: 0; margin-left: 0; margin-bottom: 0; margin-right: 0; font-weight: normal; font-family: Helvetica, Arial, sans;">
            					      <a href="https://www.rescuetime.com/login?return_to=%2Fbrowse%2Foverviews%2Fby%2Frank%2Ffor%2Fthe%2Fweek%2Fof%2F2017-01-29%3Futm_campaign%3Dweekly-free%26utm_medium%3Demail%26utm_source%3Dstats" style="font-size: 14px; color: #0063cd; text-decoration: none;" target="_blank">See more categories &nbsp;<img src="https://www.rescuetime.com/images/new-email/red-arrow.png" style="vertical-align: middle;" alt="RescueTime" border="0"></a>
            					    </h4>
                              </div>

                            </div>
                          </td>
                          <td width="300" class="right-column" style="vertical-align: top; border-left-width: 1px; border-left-color: #fff; border-left-style: solid;" valign="top">
                            <div class="content" style="padding-left: 15px; padding-top: 0; padding-bottom: 0; padding-right: 15px; margin-right: auto; margin-top: 0; margin-bottom: 0; margin-left: auto; display: block;">
                              <h2 style="font-family: Georgia, Times, serif; font-size: 16px; font-weight: normal; color: #333; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">
             					    Top applications and websites:
             					  </h2>
                              <table class="ranked-bullet-list" style="border-spacing: 0;">


                                <tbody>
                                  <tr>
                                    <td class="ranked-bullet" style="vertical-align: top; padding-top: 10px;" valign="top">
                                      <div style="font-family: Helvetica, Arial, sans; color: #fff; font-size: 14px; font-weight: bold; border-radius: 4px; text-align: center; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: #d5140f;" align="center"
                                        class="protect-autolinks-darkbg">
                                        11h 48m
                                      </div>
                                    </td>
                                    <td class="ranked-label protect-autolinks" style="vertical-align: top; padding-top: 15px; padding-left: 5px;" valign="top">
                                      <p style="font-family: Georgia, Times, serif; font-size: 14px; color: #000; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">youtube.com</p>
                                    </td>
                                  </tr>


                                  <tr>
                                    <td class="ranked-bullet" style="vertical-align: top; padding-top: 10px;" valign="top">
                                      <div style="font-family: Helvetica, Arial, sans; color: #fff; font-size: 14px; font-weight: bold; border-radius: 4px; text-align: center; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: #3c5497;" align="center"
                                        class="protect-autolinks-darkbg">
                                        6h 46m
                                      </div>
                                    </td>
                                    <td class="ranked-label protect-autolinks" style="vertical-align: top; padding-top: 15px; padding-left: 5px;" valign="top">
                                      <p style="font-family: Georgia, Times, serif; font-size: 14px; color: #000; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">reallygoodemails.com</p>
                                    </td>
                                  </tr>


                                  <tr>
                                    <td class="ranked-bullet" style="vertical-align: top; padding-top: 10px;" valign="top">
                                      <div style="font-family: Helvetica, Arial, sans; color: #fff; font-size: 14px; font-weight: bold; border-radius: 4px; text-align: center; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: #d5140f;" align="center"
                                        class="protect-autolinks-darkbg">
                                        5h 31m
                                      </div>
                                    </td>
                                    <td class="ranked-label protect-autolinks" style="vertical-align: top; padding-top: 15px; padding-left: 5px;" valign="top">
                                      <p style="font-family: Georgia, Times, serif; font-size: 14px; color: #000; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">netflix.com</p>
                                    </td>
                                  </tr>


                                  <tr>
                                    <td class="ranked-bullet" style="vertical-align: top; padding-top: 10px;" valign="top">
                                      <div style="font-family: Helvetica, Arial, sans; color: #fff; font-size: 14px; font-weight: bold; border-radius: 4px; text-align: center; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: #1673d3;" align="center"
                                        class="protect-autolinks-darkbg">
                                        2h 18m
                                      </div>
                                    </td>
                                    <td class="ranked-label protect-autolinks" style="vertical-align: top; padding-top: 15px; padding-left: 5px;" valign="top">
                                      <p style="font-family: Georgia, Times, serif; font-size: 14px; color: #000; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">codepen.io</p>
                                    </td>
                                  </tr>


                                  <tr>
                                    <td class="ranked-bullet" style="vertical-align: top; padding-top: 10px;" valign="top">
                                      <div style="font-family: Helvetica, Arial, sans; color: #fff; font-size: 14px; font-weight: bold; border-radius: 4px; text-align: center; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: #5f3557;" align="center"
                                        class="protect-autolinks-darkbg">
                                        2h 8m
                                      </div>
                                    </td>
                                    <td class="ranked-label protect-autolinks" style="vertical-align: top; padding-top: 15px; padding-left: 5px;" valign="top">
                                      <p style="font-family: Georgia, Times, serif; font-size: 14px; color: #000; margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">slack.com</p>
                                    </td>
                                  </tr>


                                </tbody>
                              </table>

                              <br>
                              <div class="report-link" style="border-left-width: 1px; border-bottom-width: 1px; border-right-width: 1px; border-top-color: #d5dce0; border-right-color: #d5dce0; border-bottom-color: #d5dce0; border-left-color: #d5dce0; border-top-width: 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-style: solid; border-radius: 10px; background-color: #fffdf4; text-align: center;"
                                align="center">
                                <h4 style="padding-top: 10px; padding-bottom: 10px; margin-top: 0; margin-left: 0; margin-bottom: 0; margin-right: 0; font-weight: normal; font-family: Helvetica, Arial, sans;">
            					      <a href="https://www.rescuetime.com/login?return_to=%2Fbrowse%2Factivities%2Fby%2Frank%2Ffor%2Fthe%2Fweek%2Fof%2F2017-01-29%3Futm_campaign%3Dweekly-free%26utm_medium%3Demail%26utm_source%3Dstats" style="font-size: 14px; color: #0063cd; text-decoration: none;" target="_blank">See more of your activities &nbsp;<img src="https://www.rescuetime.com/images/new-email/red-arrow.png" style="vertical-align: middle;" alt="RescueTime" border="0"></a>
            					    </h4>
                              </div>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>

                    <!-- spacer table, yeah -->
                    <table class="spacer" style="border-spacing: 0; width: 600px;">
                      <tbody>
                        <tr>
                          <td class="divider-top" style="vertical-align: top; border-bottom-width: 1px; border-bottom-color: #bcbcbc; border-bottom-style: solid; height: 25px; font-size: 1px;" valign="top"><img src="https://www.rescuetime.com/images/spacer.gif" style="width: 1px; height: 15px;"></td>
                        </tr>
                        <tr>
                          <td class="divider-bottom" style="vertical-align: top; border-top-width: 1px; border-top-color: #fff; border-top-style: solid; height: 25px; font-size: 1px;" valign="top"><img src="https://www.rescuetime.com/images/spacer.gif" style="width: 1px; height: 15px;"></td>
                        </tr>
                      </tbody>
                    </table>


                    <!-- goals table -->

                    <table class="row" width="600" style="border-spacing: 0;">
                      <tbody>
                        <tr>
                          <td style="text-align: center; vertical-align: top;" align="center" valign="top">
                            <h2 style="font-family: Georgia, Times, serif; font-size: 16px; font-weight: normal; color: #333; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 15px; padding-left: 0;">Your goals for the past week:</h2>
                          </td>
                        </tr>
                      </tbody>
                    </table>

                    <table class="row goals-list" width="600" style="border-spacing: 0;">
                      <tbody>
                        <tr>
                          <td class="white-rounded" style="background-color: #fff; border-top-color: #d5dce0; border-right-color: #d5dce0; border-bottom-color: #d5dce0; border-left-color: #d5dce0; border-top-style: solid; border-right-style: solid; border-left-width: 1px; border-left-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-bottom-style: solid; border-radius: 10px;"
                            bgcolor="#fff">
                            <div class="content" style="padding-left: 15px; padding-top: 0; padding-bottom: 0; padding-right: 15px; margin-right: auto; margin-top: 0; margin-bottom: 0; margin-left: auto; display: block;">
                              <h4 class="goal-description" style="font-family: Georgia, Times, sans; color: #666; font-size: 16px; font-weight: normal; margin-bottom: 0; margin-top: 0; padding-top: 12px;">
                              <a href="https://www.rescuetime.com/login?return_to=%2Fbrowse%2Fgoals%2F1247193%2Fby%2Fday%2Ffor%2Fthe%2Fweek%2Fof%2F2017-01-29%3Futm_campaign%3Dweekly-free%26utm_medium%3Demail%26utm_source%3Dstats" style="text-decoration: none; color: #666; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #ccc; line-height: 21px;" target="_blank">
                                Spend <strong>more than 4 hours per day</strong> on All Productive Time
                              </a>
                            </h4>
                              <table width="100%" style="border-spacing: 0;">
                                <tbody>
                                  <tr>
                                    <td>
                                      <p style="font-family: Helvetica, Arial, sans; color: #999; padding-bottom: 10px; padding-right: 0; padding-top: 15px; padding-left: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; margin-top: 0; font-size: 14px;">
                                        <span class="goal-status" style="margin-right: 0; margin-top: 0; margin-bottom: 0; margin-left: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; font-family: Helvetica, Arial, sans; font-weight: bold; font-size: 14px; color: #666;">
                                          <img src="https://www.rescuetime.com/images/new-email/goal-not-met.png" alt="RescueTime" border="0"> CAME CLOSE
                                    </span>&nbsp;
                                        <span class="goal-amount">3h 30m avg per day</span>
                                      </p>
                                    </td>
                                    <td style="text-align: right;" align="right">
                                    </td>
                                  </tr>
                                </tbody>
                              </table>

                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td><img src="https://www.rescuetime.com/images/spacer.gif" style="height: 10px;"></td>
                        </tr>
                        <tr>
                          <td class="white-rounded" style="background-color: #fff; border-top-color: #d5dce0; border-right-color: #d5dce0; border-bottom-color: #d5dce0; border-left-color: #d5dce0; border-top-style: solid; border-right-style: solid; border-left-width: 1px; border-left-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-bottom-style: solid; border-radius: 10px;"
                            bgcolor="#fff">
                            <div class="content" style="padding-left: 15px; padding-top: 0; padding-bottom: 0; padding-right: 15px; margin-right: auto; margin-top: 0; margin-bottom: 0; margin-left: auto; display: block;">
                              <h4 class="goal-description" style="font-family: Georgia, Times, sans; color: #666; font-size: 16px; font-weight: normal; margin-bottom: 0; margin-top: 0; padding-top: 12px;">
                              <a href="https://www.rescuetime.com/login?return_to=%2Fbrowse%2Fgoals%2F1247194%2Fby%2Fday%2Ffor%2Fthe%2Fweek%2Fof%2F2017-01-29%3Futm_campaign%3Dweekly-free%26utm_medium%3Demail%26utm_source%3Dstats" style="text-decoration: none; color: #666; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #ccc; line-height: 21px;" target="_blank">
                                Spend <strong>less than 2 hours per day</strong> on All Distracting Time
                              </a>
                            </h4>
                              <table width="100%" style="border-spacing: 0;">
                                <tbody>
                                  <tr>
                                    <td>
                                      <p style="font-family: Helvetica, Arial, sans; color: #999; padding-bottom: 10px; padding-right: 0; padding-top: 15px; padding-left: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; margin-top: 0; font-size: 14px;">
                                        <span class="goal-status" style="margin-right: 0; margin-top: 0; margin-bottom: 0; margin-left: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; font-family: Helvetica, Arial, sans; font-weight: bold; font-size: 14px; color: #666;">
                                          <img src="https://www.rescuetime.com/images/new-email/goal-not-met.png" alt="RescueTime" border="0"> DIDN'T MAKE IT
                                    </span>&nbsp;
                                        <span class="goal-amount">3h 27m avg per day</span>
                                      </p>
                                    </td>
                                    <td style="text-align: right;" align="right">
                                    </td>
                                  </tr>
                                </tbody>
                              </table>

                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td><img src="https://www.rescuetime.com/images/spacer.gif" style="height: 10px;"></td>
                        </tr>

                      </tbody>
                    </table>


                    <!-- dashboard and follow links -->
                    <table class="row" width="600">
                      <tbody>
                        <tr>
                          <td class="dashboard-report-link" colspan="3" style="border-left-width: 1px; border-bottom-width: 1px; border-right-width: 1px; border-top-color: #d5dce0; border-right-color: #d5dce0; border-bottom-color: #d5dce0; border-left-color: #d5dce0; border-top-width: 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-style: solid; border-radius: 10px; background-color: #fffdf4; text-align: center;"
                            align="center" bgcolor="#fffdf4">
                            <h4 style="padding-top: 10px; padding-bottom: 10px; margin-top: 0; margin-left: 0; margin-bottom: 0; margin-right: 0; font-weight: normal; font-size: 14px; font-family: Helvetica, Arial, sans;"><a href="https://www.rescuetime.com/login?return_to=%2Fdashboard%2Ffor%2Fthe%2Fweek%2Fof%2F2017-01-29%3Futm_campaign%3Dweekly-free%26utm_medium%3Demail%26utm_source%3Dstats" style="text-decoration: none;" target="_blank">Go to your dashboard to learn more about how you spent your week &nbsp;<img src="https://www.rescuetime.com/images/new-email/red-arrow.png" style="vertical-align: middle;" alt="RescueTime" border="0"></a></h4>
                          </td>
                        </tr>
                      </tbody>
                    </table>

                    <!-- spacer table, yeah -->
                    <table class="spacer-short">
                      <tbody>
                        <tr>
                          <td><img src="https://www.rescuetime.com/images/spacer.gif"></td>
                        </tr>
                      </tbody>
                    </table>


                    <table class="row" width="600" id="follow-links">
                      <tbody>
                        <tr>
                          <td width="45">&nbsp;</td>
                          <td style="text-align: right; vertical-align: middle;" align="right">
                            <a href="https://twitter.com/rescuetime" style="text-decoration: none;" target="_blank">
                              <img src="http://www.rescuetime.com/images/blog-images/twitter-icon.gif" alt="Twitter" border="0">
                            </a>
                            <a href="https://www.facebook.com/rescuetime" style="text-decoration: none;" target="_blank">
                              <img src="http://www.rescuetime.com/images/blog-images/facebook-icon.gif" alt="Facebook" border="0">
                            </a>
                          </td>
                          <td width="18">&nbsp;</td>
                          <td>
                            <p style="font-family: Helvetica, Arial, sans; font-size: 14px; color: #666; line-height: 20px;"><strong>Follow RescueTime</strong> for tips and links about staying<br> happy and productive in the modern workplace.</p>
                          </td>
                          <td width="45">&nbsp;</td>
                        </tr>
                      </tbody>
                    </table>

                    <!-- spacer table, yeah -->
                    <table class="spacer" style="width: 600px;">
                      <tbody>
                        <tr>
                          <td style="height: 25px; font-size: 1px;"><img src="https://www.rescuetime.com/images/spacer.gif" style="width: 1px; height: 15px;"></td>
                        </tr>
                      </tbody>
                    </table>

                    <!-- tip and blog -->
                    <table class="row tips-and-notices" width="600" style="border-spacing: 0;">
                      <tbody>
                        <tr>
                          <td width="300" class="left-column" style="vertical-align: top; border-right-width: 1px; border-right-color: #bcbcbc; border-right-style: solid;" valign="top">


                            <div class="content" style="padding-left: 15px; padding-top: 0; padding-bottom: 0; padding-right: 15px; margin-right: auto; margin-top: 0; margin-bottom: 0; margin-left: auto; display: block;">


                              <h2 style="font-family: Georgia, Times, serif; font-size: 16px; font-weight: normal; color: #333; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">
                              Make this email more awesome!
                            </h2>
                              <p style="font-family: Helvetica, Arial, sans; font-size: 14px; color: #666; line-height: 20px;">By upgrading to RescueTime Premium, you'll get more details in this email, automated productivity alerts and daily highlights, offline time logging, and much more!</p>
                              <p class="quote-attribution" style="font-family: Helvetica, Arial, sans; font-size: 14px; color: #666; line-height: 20px;">~ <a target="_blank" href="https://www.rescuetime.com/upgrade?utm_source=stats&amp;utm_medium=email&amp;utm_campaign=weekly-free">Learn more and upgrade today!</a></p>


                            </div>


                          </td>
                          <td width="300" class="right-column" style="vertical-align: top; border-left-width: 1px; border-left-color: #fff; border-left-style: solid;" valign="top">
                            <div class="content" style="padding-left: 15px; padding-top: 0; padding-bottom: 0; padding-right: 15px; margin-right: auto; margin-top: 0; margin-bottom: 0; margin-left: auto; display: block;">
                              <h2 style="font-family: Georgia, Times, serif; font-size: 16px; font-weight: normal; color: #333; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">
                              On the blog...
                        </h2>
                              <p style="font-family: Helvetica, Arial, sans; font-size: 14px; color: #666; line-height: 20px;">How do you cope with overwhelming abounts of news and social media updates? This week we're thinking about digital clutter, and what to do about it when it gets out of hand.</p>


                              <p style="font-family: Helvetica, Arial, sans; font-size: 14px; color: #666; line-height: 20px;">
                                <a href="http://blog.rescuetime.com/2017/01/31/digital-clutter/?utm_source=stats&amp;utm_medium=email&amp;utm_campaign=weekly-free" target="_blank">Read more on the blog</a>
                              </p>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <!-- spacer table, yeah -->
                    <table class="spacer" style="border-spacing: 0; width: 600px;">
                      <tbody>
                        <tr>
                          <td class="divider-top" style="vertical-align: top; border-bottom-width: 1px; border-bottom-color: #bcbcbc; border-bottom-style: solid; height: 25px; font-size: 1px;" valign="top"><img src="https://www.rescuetime.com/images/spacer.gif" style="width: 1px; height: 15px;"></td>
                        </tr>
                        <tr>
                          <td class="divider-bottom" style="vertical-align: top; border-top-width: 1px; border-top-color: #fff; border-top-style: solid; height: 25px; font-size: 1px;" valign="top"><img src="https://www.rescuetime.com/images/spacer.gif" style="width: 1px; height: 15px;"></td>
                        </tr>
                      </tbody>
                    </table>

                    <!-- FOOTER -->
                    <table class="row footer" width="600" style="border-spacing: 0;">
                      <tbody>
                        <tr>
                          <td width="160" style="vertical-align: top;" valign="top">
                            <h5 class="logo" style="font-family: Helvetica, Arial, sans; font-size: 12px; color: #666; font-weight: normal; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 20px; padding-left: 0;"><a href="https://www.rescuetime.com?utm_source=stats&amp;utm_medium=email&amp;utm_campaign=weekly-free" title="RescueTime" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none;" target="_blank"><img src="https://www.rescuetime.com/images/new-email/rescuetime-logo-footer.png" alt="RescueTime" border="0"></a></h5>
                          </td>
                          <td style="vertical-align: top;" valign="top">
                            <div class="box" style="padding-top: 0; padding-right: 10px; padding-bottom: 0; padding-left: 10px;">
                              <p style="line-height: 16px; font-size: 11px; font-family: Helvetica, Arial, sans-serif; color: #666; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 15px; padding-left: 0;">You're receiving this weekly summary because you selected that option when signing up for RescueTime. Change your mind? We don't want to be a pest.
                                <unsubscribe><a href="#" style="color: #0063cd; text-decoration: none;" target="_blank">Unsubscribe Instantly</a></unsubscribe>.</p>

                              <p style="line-height: 16px; font-size: 11px; font-family: Helvetica, Arial, sans-serif; color: #666; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 15px; padding-left: 0;">RescueTime &amp; the RescueTime Logo are registered trademarks of RescueTime, Inc<br> RescueTime, Inc — 811 1st Ave. Suite 480 Seattle, WA 98104<br> RescueTime <a href="https://www.rescuetime.com/privacy" style="color: #0063cd; text-decoration: none;"
                                  target="_blank">Privacy Policy</a> last updated February 1, 2017</p>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>


  </div>


</body>
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console