css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

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

Add External Scripts/Pens

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

+ add another resource

Use npm Packages

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

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

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

HTML Settings

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

            
              <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta charset="utf-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta name="description">
  <meta name="author">
  <title>Welcome to Asana</title>
</head>

<body bgcolor="#fff !important" style="width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; background-color: #fff !important; margin: 0; padding: 0;"
  class="w-grey">
  <style>
    @media only screen and (max-width: 716px) {

      .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;

      }

      .menu.small-vertical .menu-item {

        padding-left: 0 !important;
        padding-right: 0 !important;

      }

      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;

      }

      .show-for-large {

        display: none !important;
        width: 0;
        mso-hide: all;
        overflow: hidden;

      }

      .hide-for-large {

        display: block !important;
        width: auto !important;
        overflow: visible !important;
        max-height: none !important;
        font-size: inherit !important;
        line-height: inherit !important;

      }

      .margin-auto-small {

        margin: 0 auto;

      }

    }

    @media (min-width: 600px) {

      html {

        font-size: 13px;

      }

    }

    @media (min-width: 800px) {

      html {

        font-size: 14px;

      }

    }

    @media (min-width: 716px) {

      .w-card-block-text-2 {

        padding: 25px 30px 0;

      }

      .w-card:first-of-type {

        padding-right: 30px !important;

      }

      .w-card:nth-of-type(2) {

        padding-left: 30px !important;

      }

    }

    @media only screen and (min-width: 716px) {

      .w-purple .wrapper-inner {

        padding-left: 30px !important;
        padding-right: 30px !important;

      }

    }
  </style>
  <!--[if mso]>

<style type="text/css">

body, table, td {font-family: Arial, Helvetica, sans-serif !important;}

</style>

<![endif]-->
  <table align="center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; max-width: 600px; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; margin: 0 auto; padding: 0;"
    class="container">
    <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
        <td align="left" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
          valign="top">
          <!-- 

###################################################



      PREHEADER (view online)

      

#################################################    

    -->
          <table align="center" style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; margin: 0; padding: 0;"
            class="wrapper preheader w-no-padding w-no-margin">
            <tbody></tbody>
          </table>
          <!-- 

###################################################



      HEADER 

      

#################################################    

    -->
          <table align="center" style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;" class="wrapper header w-outer">
            <tbody>
              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                <td align="left" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                  class="wrapper-inner" valign="top">
                  <table bgcolor="#fff" align="center" style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; background: #fff; margin: 0; padding: 35px 0 0; border 0 transparent #eff0f1;"
                    class="wrapper header w-mine w-inner w-no-padding w-no-margin w-grey">
                    <tbody>
                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                        <td align="right" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: right; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 20px 0 0;"
                          class="wrapper-inner" valign="top">
                          <div style="text-align: right;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:11px;"><span style="color:#FFFFFF;">Take these 3 steps to get started.</span></span>
                            </span>&nbsp;</div>
                          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: table; align-items: center; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;"
                            class="row">
                            <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
                              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;"></tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table bgcolor="#fff" align="center" style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; background: #fff; margin: 0; padding: 35px 0 0; border 0 transparent #eff0f1;"
                    class="wrapper header w-inner w-no-padding w-no-margin w-grey">
                    <tbody>
                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                        <td align="left" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                          class="wrapper-inner" valign="top">
                          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: table; align-items: center; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;"
                            class="row">
                            <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
                              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                <th align="center" style="width: 600px; text-align: center; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 40px;"
                                  class="w-logo text-center small-12 large-12 columns first last">
                                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                    <tbody>
                                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                        <th align="center" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: center; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                          class=""><a href="https://app.asana.com/app/asana/-/log?se=%7B%22name%22%3A%22AsanaLoaded%22%2C%22action%22%3A%22AsanaLoaded%22%2C%22sub_action%22%3A%22LogoClicked%22%2C%22location%22%3A%22NewUserWelcomeEmail%22%2C%22sub_location%22%3A%22InvitedCoreActionsVersion%22%2C%22domain%22%3A740691118876172%2C%22user%22%3A742369246945764%7D&amp;dest=http%3A%2F%2Fasana.com%2F%3Futm_source%3Dasana_email%26utm_medium%3Dorganic_email%26utm_campaign%3Dinvite_welcomeprod&amp;hash=63fdaf6e5de1281f49441ecc582b4f0776388838d0cca6fc334ebd3077534445"
                                            target="_blank"><span style="display: inline-block;"><img src="https://luna1.co/2eddb8.png" alt="Asana" style="width: 50%;outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: 160px; max-width: 100%; clear: both; display: inline-block; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; border: 0;" class="img-logo" width="160"></span></a></th>
                                        <th
                                          align="center" style="visibility: hidden; width: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: center; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                          class="expander">&nbsp;</th>
                                </tr>
                                </tbody>
                                </table>
                                </th>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- 

###################################################



      HERO BLOCK 01 

      

#################################################    

    -->
          <table align="center" style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;" class="wrapper hero-block-1 w-outer">
            <tbody>
              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                <td align="left" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                  class="wrapper-inner" valign="top">
                  <table bgcolor="#fff" align="center" style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; background: #fff; padding: 35px 0 0; border: 1px solid #eff0f1;"
                    class="wrapper hero-block-1 w-inner text-center">
                    <tbody>
                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                        <td align="left" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 35px 0 36px;"
                          class="wrapper-inner" valign="top">
                          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: table; align-items: center; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;"
                            class="row">
                            <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
                              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                <th text-center="" align="left" style="width: 600px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 33px;"
                                  class="w-text-spacing small-12 large-12 columns first last">
                                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                    <tbody>
                                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                        <th align="left" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                          class="">
                                          <h1 align="center" style="color: inherit; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: center; line-height: 130%; word-wrap: normal; font-size: 30px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                            class="hl">Hurray! You joined your team <em>and</em> ours</h1>
                                          <p align="center" style="color: #676D76; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: center; line-height: 1.38; font-size: 18px; position: relative; box-sizing: border-box; margin: 0 0 35px; padding: 0;"
                                            class="text-regular text-light-grey spacing-xlarge">Start working in Asana and join in your team's success.</p>
                                        </th>
                                        <th align="left" style="visibility: hidden; width: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                          class="expander">&nbsp;</th>
                                      </tr>
                                    </tbody>
                                  </table>
                                </th>
                              </tr>
                            </tbody>
                          </table>
                          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: table; align-items: center; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;"
                            class="row">
                            <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
                              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                <td align="center" class=""><a href="https://app.asana.com/app/asana/-/log?se=%7B%22name%22%3A%22AsanaLoaded%22%2C%22action%22%3A%22AsanaLoaded%22%2C%22sub_action%22%3A%22GifClicked%22%2C%22location%22%3A%22NewUserWelcomeEmail%22%2C%22sub_location%22%3A%22InvitedCoreActionsVersion%22%2C%22domain%22%3A740691118876172%2C%22user%22%3A742369246945764%7D&amp;dest=https%3A%2F%2Fapp.asana.com%2F%3Futm_source%3Dasana_email%26utm_medium%3Dorganic_email%26utm_campaign%3Dinvite_welcomeprod_image&amp;hash=42848d995bd43add99b19f7f92039ff89259eae833b481c1e97b764dd509b0dc"
                                    target="_blank"><img src="http://connect2.asana.com/l/232142/2018-03-26/4lrvf/232142/1650/signup_welcome_email_edited.gif" style="outline: none; text-decoration: none; max-width: 100%; clear: both; display: inline-block; text-align: center; position: relative; box-sizing: border-box; margin: 0px auto; width: 600px; border-width: 0px; border-style: solid; font-family: Helvetica, Arial, sans-serif !important;" align="center" width="600" alt="" border="0" class="img-hero-block-1 float-center"></a></td>
                              </tr>
                            </tbody>
                          </table>&nbsp;
                          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: table; align-items: center; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;"
                            class="row">
                            <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
                              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                <th align="left" style="width: 600px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 33px;"
                                  class="w-text-spacing small-12 large-12 columns first last">
                                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0; margin-top: 20px;">
                                    <tbody>
                                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                        <th align="left" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                          class="">
                                          <p align="center" style="color: #676D76; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: center; line-height: 1.38; font-size: 18px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                            class="text-light-grey spacing-xlarge">We're here to teach you how to use Asana with quick, simple tips—starting with these 3 things to try out now:</p>
                                        </th>
                                      </tr>
                                    </tbody>
                                  </table>
                                  <!-- 

###################################################



      LIST BLOCK (List of elements that have a circular photo left with text right) 

      

#################################################    

    -->
                                  <table bgcolor="#fff" align="center" style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; background: #fff; padding: 35px 0 0; border: 0px solid #eff0f1;"
                                    class="wrapper list-block w-inner">
                                    <tbody>
                                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                        <td align="left" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 35px 0 36px;"
                                          class="wrapper-inner" valign="top">
                                          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: table; align-items: center; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;"
                                            class="row">
                                            <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
                                              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                <th align="left" style="width: 600px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 16px 16px;"
                                                  class="small-12 large-12 columns first last">
                                                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                    <tbody></tbody>
                                                  </table>
                                                </th>
                                              </tr>
                                            </tbody>
                                          </table>
                                          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 80% !important; position: relative; display: table; align-items: center; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; margin: 0 auto; padding: 0;"
                                            class="row w-80">
                                            <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
                                              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                <th align="left" style="width: 159px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 8px 16px 16px;"
                                                  class="small-text-center small-12 large-3 columns first">
                                                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                    <tbody>
                                                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                        <th align="left" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                                          class="">
                                                          <div style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; border-radius: 50%; overflow: hidden; width: 80px; height: 80px; background: url('../images/gradient.jpg');"
                                                            class="img-circle margin-auto-small"><img src="http://connect2.asana.com/l/232142/2018-03-27/4lywy/232142/1688/Add_to_projects_2x_preview.png" alt="" border="0" style="outline: none; text-decoration: none; max-width: 100%; clear: both; display: inline-block; position: relative; box-sizing: border-box; width: 80px; border-width: 0px; border-style: solid; font-family: Helvetica, Arial, sans-serif !important;"
                                                              width="80"></div>
                                                        </th>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                </th>
                                                <th align="left" style="width: 509px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 16px 16px 8px;"
                                                  class="small-text-left small-12 large-9 columns last">
                                                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                    <tbody>
                                                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                        <th align="left" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                                          class="">
                                                          <div style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
                                                            <h3 align="left" style="text-align: left; color: inherit; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 130%; word-wrap: normal; font-size: 24px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                                              class="title small-text-center text-left">Create a task</h3>
                                                            <p align="left" style="text-align: left; color: #676D76; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 1.38; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 0 35px; padding: 0;"
                                                              class="text-small text-light-grey small-text-center text-left spacing-xlarge"><a style="text-decoration:none;color:#796EFF;" href="https://app.asana.com/app/asana/-/log?se=%7B%22name%22%3A%22AsanaGuideLoaded%22%2C%22action%22%3A%22AsanaGuideLoaded%22%2C%22sub_action%22%3A%22WorkOnTasksTogether%22%2C%22href%22%3A%22https%3A%2F%2Fasana.com%2Fguide%2Fget-started%2Ftry%2Fwork-together%3Futm_source%3Dasana_email%26utm_medium%3Dorganic_email%26utm_campaign%3Dinvite_welcomeprod_textlink%22%2C%22location%22%3A%22NewUserWelcomeEmail%22%2C%22sub_location%22%3A%22InvitedCoreActionsVersion%22%2C%22domain%22%3A740691118876172%2C%22user%22%3A742369246945764%7D&amp;dest=https%3A%2F%2Fasana.com%2Fguide%2Fget-started%2Ftry%2Fwork-together%3Futm_source%3Dasana_email%26utm_medium%3Dorganic_email%26utm_campaign%3Dinvite_welcomeprod_textlink&amp;hash=897c1387b339f4ec1adb2d0f113da3e39751fd91888cb0ca4f24da9df2caffcc"
                                                                target="_blank"><strong>Use tasks</strong></a> to keep track of to do's and details across your plans and projects. Head to any project and start typing.&nbsp;</p>
                                                          </div>
                                                        </th>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                </th>
                                              </tr>
                                            </tbody>
                                          </table>
                                          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 80% !important; position: relative; display: table; align-items: center; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; margin: 0 auto; padding: 0;"
                                            class="row w-80">
                                            <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
                                              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                <th align="left" style="width: 159px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 8px 16px 16px;"
                                                  class="small-text-center small-12 large-3 columns first">
                                                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                    <tbody>
                                                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                        <th align="left" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                                          class="">
                                                          <div style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; border-radius: 50%; overflow: hidden; width: 80px; height: 80px; background: url('../images/gradient.jpg');"
                                                            class="img-circle margin-auto-small"><img src="http://connect2.asana.com/l/232142/2018-03-27/4lysk/232142/1686/Set_due_dates_2x.png" alt="" border="0" style="outline: none; text-decoration: none; max-width: 100%; clear: both; display: inline-block; position: relative; box-sizing: border-box; width: 80px; border-width: 0px; border-style: solid; font-family: Helvetica, Arial, sans-serif !important;"
                                                              width="80"></div>
                                                        </th>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                </th>
                                                <th align="left" style="width: 509px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 16px 16px 8px;"
                                                  class="small-text-left small-12 large-9 columns last">
                                                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                    <tbody>
                                                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                        <th align="left" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                                          class="">
                                                          <div style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
                                                            <h3 align="left" style="text-align: left; color: inherit; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 130%; word-wrap: normal; font-size: 24px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                                              class="title small-text-center text-left">Update a due date</h3>
                                                            <p align="left" style="text-align: left; color: #676D76; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 1.38; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 0 35px; padding: 0;"
                                                              class="text-small text-light-grey small-text-center text-left spacing-xlarge">Set due dates for each task so you can manage deadlines and make it clear when the work will be done.</p>
                                                          </div>
                                                        </th>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                </th>
                                              </tr>
                                            </tbody>
                                          </table>
                                          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 80% !important; position: relative; display: table; align-items: center; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; margin: 0 auto; padding: 0;"
                                            class="row w-80">
                                            <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
                                              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                <th align="left" style="width: 159px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 8px 16px 16px;"
                                                  class="small-text-center small-12 large-3 columns first">
                                                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                    <tbody>
                                                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                        <th align="left" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                                          class="">
                                                          <div style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; border-radius: 50%; overflow: hidden; width: 80px; height: 80px; background: url('../images/gradient.jpg');"
                                                            class="img-circle margin-auto-small"><img src="http://connect2.asana.com/l/232142/2018-03-27/4lyx1/232142/1690/Complete_tasks_2x_preview.png" alt="" border="0" style="outline: none; text-decoration: none; max-width: 100%; clear: both; display: inline-block; position: relative; box-sizing: border-box; width: 80px; border-width: 0px; border-style: solid; font-family: Helvetica, Arial, sans-serif !important;"
                                                              width="80"></div>
                                                        </th>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                </th>
                                                <th align="left" style="width: 509px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 16px 16px 8px;"
                                                  class="small-text-left small-12 large-9 columns last">
                                                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                    <tbody>
                                                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                        <th align="left" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                                          class="">
                                                          <div style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
                                                            <h3 align="left" style="text-align: left; color: inherit; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 130%; word-wrap: normal; font-size: 24px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                                              class="title small-text-center text-left">Complete a task</h3>
                                                            <p align="left" style="text-align: left; color: #676D76; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 1.38; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 0 35px; padding: 0;"
                                                              class="text-small text-light-grey small-text-center text-left spacing-xlarge">When your to do is done, mark it complete. You might even see a <a style="text-decoration:none;color:#796EFF;" href="https://app.asana.com/app/asana/-/log?se=%7B%22name%22%3A%22AsanaGuideLoaded%22%2C%22action%22%3A%22AsanaGuideLoaded%22%2C%22sub_action%22%3A%22CelebrationCreatures%22%2C%22href%22%3A%22http%3A%2F%2Fasana.com%2Fguide%2Fhelp%2Ftasks%2Fcelebrations%3Futm_source%3Dasana_email%26utm_medium%3Dorganic_email%26utm_campaign%3Dinvite_welcomeprod_textlink%22%2C%22location%22%3A%22NewUserWelcomeEmail%22%2C%22sub_location%22%3A%22InvitedCoreActionsVersion%22%2C%22domain%22%3A740691118876172%2C%22user%22%3A742369246945764%7D&amp;dest=http%3A%2F%2Fasana.com%2Fguide%2Fhelp%2Ftasks%2Fcelebrations%3Futm_source%3Dasana_email%26utm_medium%3Dorganic_email%26utm_campaign%3Dinvite_welcomeprod_textlink&amp;hash=f36cad9f9fca50df96671b63d90896f3a1d3cb5656ed44fb344545a561a9a6a0"
                                                                target="_blank"><strong>unicorn…</strong></a></p>
                                                          </div>
                                                        </th>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                </th>
                                              </tr>
                                            </tbody>
                                          </table>
                                          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: table; align-items: center; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;"
                                            class="row">
                                            <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
                                              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                <th align="left" style="width: 600px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 16px 0;"
                                                  class="small-12 large-12 columns first last">
                                                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                    <tbody>
                                                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                                                        <th align="left" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                                          class="">
                                                          <div align="center" style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; text-align: center;" class="text-center">
                                                            <!--[if mso]>

                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://app.asana.com/?utm_source=asana_email&utm_medium=organic_email&utm_campaign=invite_welcomeprod_button" style="height:48px;v-text-anchor:middle;width:226px;" arcsize="7%" stroke="f" fillcolor="#7968FF">

                      <w:anchorlock></w:anchorlock>

                      <center>

                    <![endif]--><a style="border-radius: 3px; color: #ffffff; display: inline-block; font-size: 18px; font-weight: normal; line-height: 48px; text-align: center; text-decoration: none; width: 226px; -webkit-text-size-adjust: none; font-family: Helvetica, Arial, sans-serif !important; position: relative; box-sizing: border-box; background: #7968FF; padding: 0;"
                                                              href="https://app.asana.com/app/asana/-/log?se=%7B%22name%22%3A%22AsanaLoaded%22%2C%22action%22%3A%22AsanaLoaded%22%2C%22sub_action%22%3A%22GetStartedButtonClicked%22%2C%22location%22%3A%22NewUserWelcomeEmail%22%2C%22sub_location%22%3A%22InvitedCoreActionsVersion%22%2C%22domain%22%3A740691118876172%2C%22user%22%3A742369246945764%7D&amp;dest=https%3A%2F%2Fapp.asana.com%2F%3Futm_source%3Dasana_email%26utm_medium%3Dorganic_email%26utm_campaign%3Dinvite_welcomeprod_button&amp;hash=4ecc8a8e9a8d9b2c8d59aebf892bd054c606e6a51c013c0dbe723dd6bf690fea"
                                                              class="text-center" target="_blank">Get Started</a>
                                                            <!--[if mso]>

                      </center>

                    </v:roundrect>

                  <![endif]-->
                                                          </div>
                                                        </th>
                                                        <th align="left" style="visibility: hidden; width: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                                                          class="expander">&nbsp;</th>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                </th>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                  <!-- 

###################################################



      END LIST BLOCK

      

#################################################    

    -->
                                </th>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>&nbsp;
                  <table align="center" style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;"
                    class="wrapper footer w-outer">
                    <tbody>
                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                        <td align="left" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                          class="wrapper-inner" valign="top">
                          <!-- 

###################################################



      FOOTER 

      

#################################################    

    -->
                        </td>
                        <th align="left" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                          class="">
                          <p align="center" style="color: #A1A4AA; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: center; line-height: 16px; font-size: 11px; position: relative; box-sizing: border-box; margin: 0 0 20px; padding: 0;"
                            class="text-footer spacing-large">You've received this email as confirmation of your Asana account.<br>1550 Bryant Street #800, San Francisco, CA 94103</p>
                        </th>
                        <th align="left" style="visibility: hidden; width: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                          class="expander">&nbsp;</th>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: table; align-items: center; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;"
            class="row">
            <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                <th align="left" style="width: 217.33333px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 8px 16px 16px;"
                  class="small-4 large-4 columns first">
                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                    <tbody>
                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                        <th align="left" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                          class="">&nbsp;</th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th align="left" style="width: 100.66667px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 8px 16px;"
                  class="center-img small-2 large-2 columns">
                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                    <tbody>
                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                        <th align="center" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: center; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                          class=""><a style="  font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; position: relative; box-sizing: border-box; padding: 0;color: #2199e8;" href="https://app.asana.com/app/asana/-/log?se=%7B%22name%22%3A%22AsanaFacebookPageLoaded%22%2C%22action%22%3A%22AsanaFacebookPageLoaded%22%2C%22location%22%3A%22NewUserWelcomeEmail%22%2C%22sub_location%22%3A%22InvitedCoreActionsVersion%22%2C%22domain%22%3A740691118876172%2C%22user%22%3A742369246945764%7D&amp;dest=https%3A%2F%2Fwww.facebook.com%2Fsharer%2Fsharer.php%3Fu%3Dasana.com&amp;hash=6801c99461be768e3a8dc58f9bd6b9611d85600e90446c1c877c287a481487c7"
                            target="_blank"><img src="https://luna1.co/e6a544.png" align="none" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; clear: both; display: inline-block; float: none; text-align: center; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; margin: 0 auto; border 0 transparent #ffffff;" alt="Link to Asana's Facebook'" class="img-footer float-center"></a></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th align="left" style="width: 100.66667px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 8px 16px;"
                  class="center-img small-2 large-2 columns">
                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                    <tbody>
                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                        <th align="center" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: center; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                          class=""><a style="  font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; position: relative; box-sizing: border-box; padding: 0;color: #2199e8;" href="https://app.asana.com/app/asana/-/log?se=%7B%22name%22%3A%22AsanaTwitterLoaded%22%2C%22action%22%3A%22AsanaTwitterLoaded%22%2C%22location%22%3A%22NewUserWelcomeEmail%22%2C%22sub_location%22%3A%22InvitedCoreActionsVersion%22%2C%22domain%22%3A740691118876172%2C%22user%22%3A742369246945764%7D&amp;dest=https%3A%2F%2Ftwitter.com%2Fshare%3Fvia%3Dasana%3Burl%3Dasana.com%3Btext%3DMove%2520work%2520forward%2520with%2520Asana&amp;hash=c3759f9a107e95c7f5a88761e130816f162c167196bf7d7be0142e795e711474"
                            target="_blank"><img src="https://luna1.co/58de78.png" align="none" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; clear: both; display: inline-block; float: none; text-align: center; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; margin: 0 auto; border 0 transparent #ffffff;" alt="Link to Asana's Twitter" class="img-footer float-center"></a>
                          <a
                            style="color: #2199e8; text-decoration: none; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; position: relative; box-sizing: border-box; padding: 0;" target="_blank">
                          </a>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th align="left" style="width: 217.33333px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 16px 16px 8px;"
                  class="small-4 large-4 columns last">
                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                    <tbody>
                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                        <th align="left" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0;"
                          class="">&nbsp;</th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <table bgcolor="#fff" align="center" style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; background: #fff; padding: 35px 0 0; border 0 transparent #eff0f1;"
    class="wrapper footer w-inner w-grey">
    <tbody>
      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
        <td align="left" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0; padding: 0 0 36px;"
          class="wrapper-inner" valign="top">
          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 80% !important; position: relative; display: table; align-items: center; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; margin: 0 auto; padding: 0;"
            class="row w-80">
            <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                <th align="left" style="width: 600px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 16px 16px;"
                  class="small-12 large-12 columns first last">
                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                    <tbody></tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>
          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: table; align-items: center; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;"
            class="row">
            <tbody style="position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important;">
              <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                <th align="left" style="width: 217.33333px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 8px 16px 16px;"
                  class="small-4 large-4 columns first">
                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                    <tbody></tbody>
                  </table>
                </th>
                <th align="left" style="width: 100.66667px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 8px 16px;"
                  class="center-img small-2 large-2 columns">
                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                    <tbody>
                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;"></tr>
                    </tbody>
                  </table>
                </th>
                <th align="left" style="width: 100.66667px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 8px 16px;"
                  class="center-img small-2 large-2 columns">
                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                    <tbody>
                      <tr align="left" style="vertical-align: top; text-align: left; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;"></tr>
                    </tbody>
                  </table>
                </th>
                <th align="left" style="width: 217.33333px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif !important; font-weight: normal; text-align: left; line-height: 130%; font-size: 16px; position: relative; box-sizing: border-box; margin: 0 auto; padding: 0 16px 16px 8px;"
                  class="small-4 large-4 columns last">
                  <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif !important; padding: 0;">
                    <tbody></tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console