Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

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

Add External Scripts/Pens

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

+ add another resource

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Slack Frontiers 2017 Invitation</title>
<!--[if gte mso 9]>
  <style>
    li {
    text-indent: -1em !important;
    /* Normalise space between bullets and text */
    !important}
  </style>
<![endif]-->
<!--[if mso]>
  <style>
    span, td, table, div, .h1, .h2, .h3, .text, .header-text, .sub-text, a[class*=button], a{
    font-family: Helvetica, Arial, serif !important !important;
    }
  </style>
<![endif]-->
<style type="text/css">
  body, table, td, a{ -ms-text-size-adjust: 100%;}
  table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;}
  img{-ms-interpolation-mode: bicubic;}
  img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; }
  table, td {border-collapse: collapse !important;}
  body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}
  a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important;
  font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
  div[style*="margin: 16px 0;"] { margin: 0 !important; }
  body { margin: 0; padding: 0; height: 100%; width: 100% }
  table[align="center"] {margin: 0 auto;}
  body, .section, .spacer { background-color: #f8f4f1; }
  .container { background-color: #ffffff; }
  table{border-spacing:0;}
  .blue{background-color:#1A1938;}
  .white{color:#ffffff;}
  .h1,.h2, .h3, .h4 {
  font-family: 'Futura LT w01 Book', Futura-Book, "Futura Book", Helvetica, Arial, sans-serif;
  color: #1A1938;
  }
  .h1, h1 { font-size: 30px; line-height:26px; padding-bottom: 0px; }
  .h2, h2 { font-size: 22px; line-height:26px; padding-bottom: 10px; }
  .h3, h3 { font-size: 18px; line-height:26px; letter-spacing: 1px; padding-bottom: 0; margin-bottom: 0; text-align: center; }
  .h4, h4 { font-size: 14px; line-height:20px; text-align: center; font-weight: bold; text-transform: uppercase; }
  .text, ul, li {
  color: #1A1938;
  font-size: 16px;
  line-height: 28px;
  font-family: 'Futura LT w01 Book', Futura-Book, "Futura Book", Helvetica, Arial, sans-serif;
  text-decoration: none;
  }
  .header-text{
  color:#ffffff;
  font-size:16px;
  line-height:28px;
  font-family:'Futura LT w01 Book', Futura-Book, "Futura Book", Helvetica, Arial, sans-serif; text-align:center;
  }
  .header-callout{color:#88d0e4;}
  .sub-text{
  color:#8c8b9b;
  font-size:16px;
  line-height:28px;
  text-align:center;
  margin:0;
  font-family:'Futura LT w01 Book', Futura-Book, "Futura Book", Helvetica, Arial, sans-serif;
  }
  a[class*=button] {
  font-family: 'Futura LT w01 Book', Futura-Book, "Futura Book", Helvetica, Arial, sans-serif;
  color: #ffffff;
  font-size:18px;
  text-decoration: none;
  background-color:#FC4D1E;
  border-radius:4px;
  -moz-border-radius:4px;
  height:50px;
  letter-spacing:3px;
  }
  a[class=".button-large"] { border-width: 12px 38px; }
  a.button-small { border-width: 6px 28px; }
  .list-container ul { padding: 0; Margin: 0 0 0 15px;}
  .list-container li { Margin: 0 0 5px 0; }
  .line-break, .line-break td { background-color: #1A1938; line-height: 10px; font-size: 10px; }
  img[class="flexibleImage"]{ height:auto !important; width:100% !important; }
  .container { width: 650px;}
  .section-padding { padding: 6px; }
  .footer-padding { padding: 0 15px 15px 15px; height:80px;}
  .button-container { padding: 20px 0 0 0; }
  td.text { padding-top: 0; padding-bottom: 40px; }
  .tagline .section-padding { padding: 12px 0; background-color: #500820; }
  .tagline .white { padding: 0 30px }
  .full-bleed-image .section-padding { padding: 0; margin:0; }
  .header .section-padding { padding: 0 }
  .header .logo { padding: 14px 30px }
  .header .col-left
  .heading-image .section-padding { padding: 0 30px }
  .heading-image{max-width:650px; }
  .col{ display:block; float:left; width:50%; }
  .col table{margin:0 auto;}
  .col-left{float:left;}
  .col-right{float:right;}
  .card-group {}
  .card-group .card-full { padding-bottom: 6px; }
  .card-group .card-full img { }
  .card-group td[class^="card-bg"] { min-height: 200px; height: 200px; padding: 20px; width:100%; }
  .card-group .card-bg-1 { background-color: #d11f66 }
  .card-group .card-bg-2 { background-color: #2c4870; }
  .card-group .card-bg-1 .text { color: #ffffff; }
  .card-group .card-bg-2 .text { color: #ffffff; }
  .card-left-split { }
  .two-column .content .col:nth-child(1) { padding-right: 15px; }
  .two-column .content .col:nth-child(2) { padding-left: 15px; }
  .keyline .line { background:none; height:1px; width:100%; margin:0px 0px 0px 0px; }
  .social{width:36px; padding:5px;}
  .footer-padding { background-color: #1A1938; }
  .footer .text { color: #ffffff; font-size: 12px; line-height: 20px; }
  .footer a { color: #231f20; text-decoration: none; }
  .footer .col { padding-top: 12px; }
  .footer .col-left { width: 65%; }
  .footer .col-right { width: 35%; }
  /* MEDIA QUERIES */
  @media only screen and (max-width: 670px) {
  /* typography */
  p.sub-text{margin-bottom:30px;}
  .h2{font-size:20px; line-height:24px;}
  h3 { font-size: 14px !important; line-height: 18px !important; }
  h4 { font-size: 13px !important; line-height: 15px !important; }
  /* image */
  /* layout */
  table.container { width: 100% !important; }
  table.container td { border: none !important; }
  .section-padding{padding:20px !important;}
  [class^="padding"] { padding-top: 20px !important; padding-bottom: 0 !important }
  .col { width: 100% !important; float: left; border: 0; margin-bottom:10px; }
  .col img{margin-top:20px !important;}
  .col-left, .col-right { width: 100% !important; display:table;}
  .line-break { width: 100%; }
  td.full-bleed-image table.container td.section-padding:first-child{padding:0 !important;}
  td.full-bleed-image img{width:100%;}
  /* sections */
  .top-table { width: 100%; }
  .top-register { display: none; }
  .top-table td.header-text br { display: none; }
  td.h3 br { display: none; }
  }
  .header .text { text-align: center !important; }
  .header .content { width: 100% !important; }
  .header .col-left { text-align: left; width: auto !important; }
  .header .col-right { text-align: right; width: auto !important; }
  .header .logo { display: inline-block; padding: 10px; }
  .footer .text { font-size: 11px !important; line-height: 14px !important; }
  .card-group .col:first-child .card,
  .card-group .card-full { padding-bottom: 10px; }
  .two-column .content .col td:last-child { padding-bottom: 20px; }
  .card-left-split .col:first-child .card-bg { padding-bottom:20px; }
  .col .card-bg { padding-left: 0 !important; }
  .section .keyline { display: none; }
  .social{max-width:36px; padding:5px;}
  .hide-mobile { display: none !important; }
  }
</style>
<!--[if mso]>
  <style>
    body, table, td, .text, .header-text {font-family: Helvetica, Arial, sans-serif !important !important;}
  </style>
<![endif]-->
<!-- Spacer -->
<table class="spacer hide-mobile" width="100%" height="15" border="0" cellspacing="0"
cellpadding="0" style="border-spacing: 0px; background-color: #f8f4f1; border-image: initial; border-collapse: collapse !important;">
  <tbody>
    <tr>
      <td height="15" style="border-image: initial; border-collapse: collapse !important;"></td>
    </tr>
  </tbody>
</table>
<!-- end Spacer -->
<!-- full-bleed-image-section -->
<table class="section" width="100%" border="0" cellspacing="0" cellpadding="0"
style="border-spacing: 0px; background-color: #f8f4f1; border-image: initial; border-collapse: collapse !important;">
  <tbody>
    <tr>
      <td class="full-bleed-image" style="border-image: initial; border-collapse: collapse !important;">
        <!-- top row -->
        <table class="container" max-width="650" align="center" border="0" cellpadding="0"
        cellspacing="0" style="border-spacing: 0px; background-color: #ffffff; width: 650px; border-image: initial; border-collapse: collapse !important;">
          <tbody>
            <tr>
              <td valign="middle" class="section-padding" style="padding: 0px; margin: 0px; border-image: initial; border-collapse: collapse !important;">
                <table cellpadding="0" cellspacing="0" width="100%" border="0" align="center"
                style="border-spacing: 0px; border-image: initial; border-collapse: collapse !important;">
                  <tbody>
                    <tr align="center">
                      <td class="heading-image" bgcolor="#ffffff" style="max-width: 650px; border-image: initial; border-collapse: collapse !important;">
                        <a href="https%3A%2F%2Fslackfrontiers.com%2F?cvosrc=email.etouches.frontiers&utm_source=etouches&utm_medium=email&utm_content=future_of_work_is_the_next_frontier&utm_campaign=frontiers&c3ch=etouches&c3nid=future_of_work_is_the_next_frontier"
                        target="_blank">
                          <img src="https://slackfrontiers.com/img/email/email-header-tagline.jpg" width="100%"
                          max-width="650" alt="" style="-ms-interpolation-mode:bicubic;border-width:0;height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;"
                          />
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<!-- end-full-bleed-image-section -->
<!-- TEXT CONTENT -->
<table class="section" width="100%" border="0" cellspacing="0" cellpadding="0"
style="border-spacing: 0px; background-color: #f8f4f1; border-image: initial; border-collapse: collapse !important;">
  <tbody>
    <tr>
      <td class="text-content" style="border-image: initial; border-collapse: collapse !important;">
        <table class="container" width="650" align="center" border="0" cellpadding="0"
        cellspacing="0" outline="0" style="border-spacing: 0px; background-color: #ffffff; width: 650px; border-image: initial; border-collapse: collapse !important;">
          <tbody>
            <tr>
              <td valign="top" class="section-padding blue" style="padding-top: 20px; padding-bottom: 20px; background-color: #1a1938; border-image: initial; border-collapse: collapse !important;">
                <table cellpadding="0" cellspacing="0" width="50%" border="0" outline="0" align="left"
                class="content top-table" style="border-spacing: 0px; border-image: initial; border-collapse: collapse !important;">
                  <tbody>
                    <tr>
                      <td class="header-text" style="color: #ffffff; font-size: 16px; line-height: 28px; font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; text-align: center; border-image: initial; border-collapse: collapse !important;">September 12 - 13th
                        <br />Pier 27, San Francisco</td>
                    </tr>
                  </tbody>
                </table>
                <table cellpadding="0" cellspacing="0" width="50%" border="0" outline="0" align="left"
                class="content top-register" style="border-spacing: 0px; border-image: initial; border-collapse: collapse !important;">
                  <tbody>
                    <tr>
                      <td style="border-collapse: collapse !important; border-image: initial;">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="btn-border"
                        style="border-spacing: 0px; border-collapse: collapse !important; border-image: initial;">
                          <tbody>
                            <tr>
                              <td style="border-collapse: collapse !important; border-image: initial;">
                                <table align="center" border="0" cellspacing="0" cellpadding="0" style="border-spacing: 0px; border-collapse: collapse !important; border-image: initial;">
                                  <tbody>
                                    <tr>
                                      <td class="center" style="border-collapse: collapse !important; border-image: initial;">
                                        <a href="https%3A%2F%2Fslackfrontiers.com%2F?cvosrc=email.etouches.frontiers&utm_source=etouches&utm_medium=email&utm_content=future_of_work_is_the_next_frontier&utm_campaign=frontiers&c3ch=etouches&c3nid=future_of_work_is_the_next_frontier"
                                        target="_blank" style="font-size:18px;font-family:Helvetica, Arial, sans-serif;color:#ffffff;background-color:#FC4D1E;text-decoration:none;border-radius:3px;border-top-width:14px;border-top-style:solid;border-top-color:#FC4D1E;border-bottom-width:14px;border-bottom-style:solid;border-bottom-color:#FC4D1E;border-right-width:18px;border-right-style:solid;border-right-color:#FC4D1E;border-left-width:18px;border-left-style:solid;border-left-color:#FC4D1E;display:inline-block;-ms-text-size-adjust:100%;">REGISTER NOW</a>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td class="text-content" style="border-image: initial; border-collapse: collapse !important;">
        <table class="container" width="650" align="center" border="0" cellpadding="0"
        cellspacing="0" style="border-spacing: 0px; background-color: #ffffff; width: 650px; border-image: initial; border-collapse: collapse !important;">
          <tbody>
            <tr>
              <td valign="top" class="section-padding" style="padding: 20px 90px; border-image: initial; border-collapse: collapse !important;">
                <!-- content -->
                <table cellpadding="0" cellspacing="0" width="100%" border="0" align="left" class="content"
                style="border-spacing: 0px; border-image: initial; border-collapse: collapse !important;">
                  <tbody>
                    <tr valign="middle">
                      <td class="h5" style="font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; color: #000059; font-size: 30px; line-height: 42px; border-collapse: collapse !important; border-image: initial; text-align: center;">The Future of Work is the Next Frontier</td>
                    </tr>
                    <tr valign="middle">
                      <td class="text" style="color: #1a1938; font-size: 16px; line-height: 28px; font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; text-decoration: none; padding-top: 20px; padding-bottom: 40px; border-image: initial; border-collapse: collapse !important;">Introducing Frontiers - a conference, by Slack, about teams and teamwork where
                        we’re bringing together our unparalleled community of customers, partners and developers
                        to share best practices and find common ground.</td>
                    </tr>
                    <tr valign="middle">
                      <td style="border-image: initial; border-collapse: collapse !important;">
                        <table class="col" width="50%" align="center" border="0" cellpadding="0" cellspacing="0"
                        style="border-spacing: 0px; display: block; width: 50%; float: left; border-image: initial; border-collapse: collapse !important;">
                          <tbody>
                            <tr>
                              <td align="center" style="border-image: initial; border-collapse: collapse !important;">
                                <a href="https%3A%2F%2Fslackfrontiers.com%2F?cvosrc=email.etouches.frontiers&utm_source=etouches&utm_medium=email&utm_content=future_of_work_is_the_next_frontier&utm_campaign=frontiers&c3ch=etouches&c3nid=future_of_work_is_the_next_frontier"
                                target="_blank">
                                  <img src="https://slackfrontiers.com/img/email/andre-iguodala.jpg" alt="Andre Iguodala"
                                  border="0" style="-ms-interpolation-mode:bicubic;border-width:0;height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;"
                                  />
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td height="15" style="border-image: initial; border-collapse: collapse !important;"></td>
                            </tr>
                            <tr>
                              <td align="center" class="h2" style="font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; color: #1a1938; font-size: 22px; line-height: 26px; padding-bottom: 10px; border-image: initial; border-collapse: collapse !important;">Andre Iguodala</td>
                            </tr>
                            <tr>
                              <td align="center" style="border-image: initial; border-collapse: collapse !important;">
                                <p class="sub-text" style="color:#8c8b9b;font-size:16px;line-height:28px;text-align:center;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;font-family:'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif;">Entrepreneur, Venture Capitalist
                                  <br />NBA Champion, Golden State Warriors</p>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <table class="col" width="50%" align="center" border="0" cellpadding="0" cellspacing="0"
                        style="border-spacing: 0px; display: block; width: 50%; float: left; border-image: initial; border-collapse: collapse !important;">
                          <tbody>
                            <tr>
                              <td align="center" style="border-image: initial; border-collapse: collapse !important;">
                                <a href="https%3A%2F%2Fslackfrontiers.com%2F?cvosrc=email.etouches.frontiers&utm_source=etouches&utm_medium=email&utm_content=future_of_work_is_the_next_frontier&utm_campaign=frontiers&c3ch=etouches&c3nid=future_of_work_is_the_next_frontier"
                                target="_blank">
                                  <img src="https://slackfrontiers.com/img/email/jen-rubio.jpg" alt="Jen Rubio"
                                  border="0" style="-ms-interpolation-mode:bicubic;border-width:0;height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;"
                                  />
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td height="15" style="border-image: initial; border-collapse: collapse !important;"></td>
                            </tr>
                            <tr>
                              <td align="center" class="h2" style="width: 240px; font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; color: #1a1938; font-size: 22px; line-height: 26px; padding-bottom: 10px; border-image: initial; border-collapse: collapse !important;">Jen Rubio</td>
                            </tr>
                            <tr>
                              <td align="center" style="border-image: initial; border-collapse: collapse !important;">
                                <p class="sub-text" style="color:#8c8b9b;font-size:16px;line-height:28px;text-align:center;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;font-family:'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif;">Co-Founder
                                  <br />Away</p>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr valign="middle">
                      <td style="border-image: initial; border-collapse: collapse !important;">
                        <table class="col" width="50%" align="center" border="0" cellpadding="0" cellspacing="0"
                        style="border-spacing: 0px; display: block; width: 50%; float: left; border-image: initial; border-collapse: collapse !important;">
                          <tbody>
                            <tr>
                              <td align="center" style="border-image: initial; border-collapse: collapse !important;">
                                <a href="https%3A%2F%2Fslackfrontiers.com%2F?cvosrc=email.etouches.frontiers&utm_source=etouches&utm_medium=email&utm_content=future_of_work_is_the_next_frontier&utm_campaign=frontiers&c3ch=etouches&c3nid=future_of_work_is_the_next_frontier"
                                target="_blank">
                                  <img src="https://slackfrontiers.com/img/email/steven-johnson.jpg" alt="Steven Johnson"
                                  border="0" style="-ms-interpolation-mode:bicubic;border-width:0;height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;"
                                  />
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td height="15" style="border-image: initial; border-collapse: collapse !important;"></td>
                            </tr>
                            <tr>
                              <td align="center" class="h2" style="font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; color: #1a1938; font-size: 22px; line-height: 26px; padding-bottom: 10px; border-image: initial; border-collapse: collapse !important;">Steven Johnson</td>
                            </tr>
                            <tr>
                              <td align="center" style="border-image: initial; border-collapse: collapse !important;">
                                <p class="sub-text" style="color:#8c8b9b;font-size:16px;line-height:28px;text-align:center;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;font-family:'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif;">PBS Host &amp; Bestselling Author “How We Got To Now”</p>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <table class="col" width="50%" align="center" border="0" cellpadding="0" cellspacing="0"
                        style="border-spacing: 0px; display: block; width: 50%; float: left; border-image: initial; border-collapse: collapse !important;">
                          <tbody>
                            <tr>
                              <td align="center" style="border-image: initial; border-collapse: collapse !important;">
                                <a href="https%3A%2F%2Fslackfrontiers.com%2F?cvosrc=email.etouches.frontiers&utm_source=etouches&utm_medium=email&utm_content=future_of_work_is_the_next_frontier&utm_campaign=frontiers&c3ch=etouches&c3nid=future_of_work_is_the_next_frontier"
                                target="_blank">
                                  <img src="https://slackfrontiers.com/img/email/edith-cooper.jpg" alt="Edith Cooper"
                                  border="0" style="-ms-interpolation-mode:bicubic;border-width:0;height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;"
                                  />
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td height="15" style="border-image: initial; border-collapse: collapse !important;"></td>
                            </tr>
                            <tr>
                              <td align="center" class="h2" style="font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; color: #1a1938; font-size: 22px; line-height: 26px; padding-bottom: 10px; border-image: initial; border-collapse: collapse !important;">Edith Cooper</td>
                            </tr>
                            <tr>
                              <td align="center" style="border-image: initial; border-collapse: collapse !important;">
                                <p class="sub-text" style="color:#8c8b9b;font-size:16px;line-height:28px;text-align:center;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;font-family:'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif;">Global Head of Human Capital Management, Goldman Sachs</p>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr valign="middle">
                      <td class="text" style="color: #1a1938; font-size: 16px; line-height: 28px; font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; text-decoration: none; padding-top: 40px; padding-bottom: 20px; border-image: initial; border-collapse: collapse !important;">Hear from customers and peers about their approach to transforming everything
                        from productivity to culture. And get insights from industry leaders on how you
                        can get ahead of the changing technology trends.</td>
                    </tr>
                    <tr valign="middle">
                      <td class="text" style="color: #1a1938; font-size: 16px; line-height: 28px; font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; text-decoration: none; padding-bottom: 20px; border-image: initial; border-collapse: collapse !important;">Sessions include in-depth discussions on:
                        <ul>
                          <li style="padding-bottom: 8px;">How to Build the Teams of the Future</li>
                          <li style="padding-bottom: 8px;">Diversity as a Competitive Advantage</li>
                          <li style="padding-bottom: 8px;">Get Into the Flow: Achieving a One-Window Work Day</li>
                          <li>Using Modern Tools to Turn Traditional Industries Into Digital Leaders</li>
                        </ul>See the full agenda at
                        <a href="https%3A%2F%2Fslackfrontiers.com%2Fagenda?cvosrc=email.etouches.frontiers&utm_source=etouches&utm_medium=email&utm_content=future_of_work_is_the_next_frontier&utm_campaign=frontiers&c3ch=etouches&c3nid=future_of_work_is_the_next_frontier"
                        target="_blank">slackfrontiers.com/agenda</a>.</td>
                    </tr>
                    <tr>
                      <td class="text" style="color: #1a1938; font-size: 16px; line-height: 28px; font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; text-decoration: none; padding-top: 0px; padding-bottom: 20px; border-image: initial; border-collapse: collapse !important;">Hope to see you September 12 - 13 to network, learn, and explore the future of
                        work, together.</td>
                    </tr>
                    <tr>
                      <td height="15" style="border-image: initial; border-collapse: collapse !important;"></td>
                    </tr>
                    <tr>
                      <td style="border-image: initial; border-collapse: collapse !important;">
                        <hr width="75%" style="border: 0; border-top: 1px solid #88D0E4; border-bottom: 1px solid #fff;"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td height="15" style="border-image: initial; border-collapse: collapse !important;"></td>
                    </tr>
                    <tr valign="middle">
                      <td class="h3" style="font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; color: #000059; font-size: 20px; font-weight: bold; line-height: 30px; padding-top: 15px; padding-bottom: 10px; border-image: initial; text-align: center; border-collapse: collapse !important;">Frontiers At-A-Glance</td>
                    </tr>
                    <tr>
                      <td class="text" style="text-align: center; color: #1a1938; font-size: 16px; line-height: 36px; font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; text-decoration: none; padding-top: 0px; padding-bottom: 20px; border-image: initial; border-collapse: collapse !important;">2 days
                        <br />3 tracks
                        <br />4 keynotes
                        <br />20+ guest speakers
                        <br />24 breakout sessions
                        <br />30+ sponsors and platform partners
                        <br />1 Frontiers Fest (it’s an after-party!)
                        <br />1000+ amazing attendees (hi there!)</td>
                    </tr>
                    <tr>
                      <td align="center" class="text" style="text-align: center; color: #1a1938; font-size: 16px; line-height: 28px; font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; text-decoration: none; padding-top: 0px; padding-bottom: 20px; border-image: initial; border-collapse: collapse !important;">See the full agenda and register at
                        <a href="https%3A%2F%2Fslackfrontiers.com%2F?cvosrc=email.etouches.frontiers&utm_source=etouches&utm_medium=email&utm_content=future_of_work_is_the_next_frontier&utm_campaign=frontiers&c3ch=etouches&c3nid=future_of_work_is_the_next_frontier"
                        target="_blank">slackfrontiers.com</a>
                      </td>
                    </tr>
                    <tr>
                      <td height="15" style="border-image: initial; border-collapse: collapse !important;"></td>
                    </tr>
                    <tr>
                      <td style="border-image: initial; border-collapse: collapse !important;">
                        <hr width="75%" style="border: 0; border-top: 1px solid #88D0E4; border-bottom: 1px solid #fff;"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td height="30" style="border-image: initial; border-collapse: collapse !important;"></td>
                    </tr>
                    <tr>
                      <td class="h2" align="center" style="font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; color: #1a1938; font-size: 22px; line-height: 26px; padding-bottom: 10px; border-image: initial; border-collapse: collapse !important;">Will you join us?</td>
                    </tr>
                    <tr>
                      <td height="15" style="border-image: initial; border-collapse: collapse !important;"></td>
                    </tr>
                    <tr>
                      <td class="h2" align="center" style="text-transform: capitalize; line-height: 36px; font-family: 'Futura LT w01 Book', Futura-Book, 'Futura Book', Helvetica, Arial, sans-serif; color: #1a1938; font-size: 22px; padding-bottom: 10px; border-image: initial; border-collapse: collapse !important;">September 12 - 13th, 2017
                        <br />Pier 27, San Francisco, CA</td>
                    </tr>
                    <tr>
                      <td height="30" style="border-image: initial; border-collapse: collapse !important;"></td>
                    </tr>
                    <tr>
                      <td style="border-image: initial; border-collapse: collapse !important;">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="btn-border"
                        style="border-spacing: 0px; border-image: initial; border-collapse: collapse !important;">
                          <tbody>
                            <tr>
                              <td style="border-image: initial; border-collapse: collapse !important;">
                                <table align="center" border="0" cellspacing="0" cellpadding="0" style="border-spacing: 0px; border-image: initial; border-collapse: collapse !important;">
                                  <tbody>
                                    <tr>
                                      <td class="center" style="border-image: initial; border-collapse: collapse !important;">
                                        <a href="https%3A%2F%2Fslackfrontiers.com%2F?cvosrc=email.etouches.frontiers&utm_source=etouches&utm_medium=email&utm_content=future_of_work_is_the_next_frontier&utm_campaign=frontiers&c3ch=etouches&c3nid=future_of_work_is_the_next_frontier"
                                        target="_blank" style="font-size:18px;font-family:Helvetica, Arial, sans-serif;color:#ffffff;background-color:#FC4D1E;text-decoration:none;border-radius:3px;border-top-width:14px;border-top-style:solid;border-top-color:#FC4D1E;border-bottom-width:14px;border-bottom-style:solid;border-bottom-color:#FC4D1E;border-right-width:18px;border-right-style:solid;border-right-color:#FC4D1E;border-left-width:18px;border-left-style:solid;border-left-color:#FC4D1E;display:inline-block;-ms-text-size-adjust:100%;">REGISTER NOW</a>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                            <tr>
                              <td height="35" style="border-image: initial; border-collapse: collapse !important;"></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- END TEXT CONTENT -->
        <!-- FOOTER -->
        <table class="section" align="center" width="100%" border="0" cellspacing="0"
        cellpadding="0" style="border-spacing: 0px; background-color: #f8f4f1; border-image: initial; border-collapse: collapse !important;">
          <tbody>
            <tr>
              <td class="footer" style="border-image: initial; border-collapse: collapse !important;">
                <table class="container" width="650" align="center" border="0" cellpadding="0"
                cellspacing="0" style="border-spacing: 0px; background-color: #ffffff; width: 650px; border-image: initial; border-collapse: collapse !important;">
                  <tbody>
                    <tr>
                      <td align="center" style="border-image: initial; border-collapse: collapse !important;">
                        <img class="flexibleImage" src="https://ps-etouches-com.s3.amazonaws.com/slack/2017-user-conference/email-assets/blobs-footer%401x.png"
                        alt="Blobs" style="-ms-interpolation-mode:bicubic;border-width:0;height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td class="footer-padding" valign="top" style="padding: 0px 15px 15px; height: 80px; background-color: #1a1938; border-image: initial; border-collapse: collapse !important;">
                        <table cellpadding="0" cellspacing="0" width="100%" border="0" align="center"
                        style="border-spacing: 0px; border-image: initial; border-collapse: collapse !important;">
                          <tbody>
                            <tr>
                              <td height="15" style="border-image: initial; border-collapse: collapse !important;">&nbsp;</td>
                            </tr>
                            <tr valign="bottom">
                              <td align="center" style="border-image: initial; border-collapse: collapse !important;">
                                <table style="border-spacing: 0px; border-image: initial; border-collapse: collapse !important;">
                                  <tbody>
                                    <tr>
                                      <td style="border-image: initial; border-collapse: collapse !important;">
                                        <a href="https%3A%2F%2Ftwitter.com%2Fslackhq" style="-ms-text-size-adjust:100%;color:#231f20;text-decoration:none;">
                                          <img class="social" src="https://ps-etouches-com.s3.amazonaws.com/slack/2017-user-conference/email-assets/twitter%402x.png"
                                          max-width="50" alt="Twitter" style="-ms-interpolation-mode:bicubic;border-width:0;height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;width:36px;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:5px;"
                                          />
                                        </a>
                                      </td>
                                      <td style="border-image: initial; border-collapse: collapse !important;">
                                        <a href="https%3A%2F%2Fwww.facebook.com%2Fslackhq%2F" style="-ms-text-size-adjust:100%;color:#231f20;text-decoration:none;">
                                          <img class="social" src="https://ps-etouches-com.s3.amazonaws.com/slack/2017-user-conference/email-assets/facebook%402x.png"
                                          max-width="50" alt="Facebook" style="-ms-interpolation-mode:bicubic;border-width:0;height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;width:36px;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:5px;"
                                          />
                                        </a>
                                      </td>
                                      <td style="border-image: initial; border-collapse: collapse !important;">
                                        <a href="https%3A%2F%2Fwww.instagram.com%2Fslackhq%2F" style="-ms-text-size-adjust:100%;color:#231f20;text-decoration:none;">
                                          <img class="social" src="https://ps-etouches-com.s3.amazonaws.com/slack/2017-user-conference/email-assets/inst%402x.png"
                                          max-width="50" alt="Instagram" style="-ms-interpolation-mode:bicubic;border-width:0;height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;width:36px;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:5px;"
                                          />
                                        </a>
                                      </td>
                                      <td style="border-image: initial; border-collapse: collapse !important;">
                                        <a href="https%3A%2F%2Fwww.linkedin.com%2Fcompany%2Ftiny-speck-inc" style="-ms-text-size-adjust:100%;color:#231f20;text-decoration:none;">
                                          <img class="social" src="https://ps-etouches-com.s3.amazonaws.com/slack/2017-user-conference/email-assets/linkedin%402x.png"
                                          max-width="50" alt="LinkedIn" style="-ms-interpolation-mode:bicubic;border-width:0;height:auto;line-height:100%;outline-style:none;text-decoration:none;display:block;width:36px;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:5px;"
                                          />
                                        </a>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- END FOOTER -->
        <!---- Spacer ---->
        <table class="spacer hide-mobile" width="100%" height="15" border="0" cellspacing="0"
        cellpadding="0" style="border-spacing: 0px; background-color: #f8f4f1; border-image: initial; border-collapse: collapse !important;">
          <tbody>
            <tr>
              <td height="25" class="white" align="center" style="color: #ffffff; border-image: initial; border-collapse: collapse !important;">
                <a href="#"
                style="color:#1a1938;text-decoration:none;font-size:8pt;-ms-text-size-adjust:100%;">Unsubscribe</a><span style="font-size:8pt;color:#1a1938;"> | </span>
                <a href="#"
                style="color:#1a1938;text-decoration:none;font-size:8pt;-ms-text-size-adjust:100%;">View in web browser</a>
              </td>
            </tr>
          </tbody>
        </table>
        <!---- end Spacer ---->
      </td>
    </tr>
  </tbody>
</table>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console