123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

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

Add External Scripts/Pens

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

+ add another resource

Use npm Packages

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

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

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

HTML Settings

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

            
              <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">
    <title>Litmus</title>
    <style type="text/css">
      a {
              text-decoration: none;
          }
          .link:hover {
              text-decoration: none !important;
          }
    </style>
    <style type="text/css">
      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;
          }
          @media { }
          @media screen {
              @font-face {
                  font-family: 'proxima_nova_rgregular';
                  src: url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.eot');
                  src: url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
                       url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.woff') format('woff'),
                       url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.ttf') format('truetype'),
                       url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
                  font-weight: normal;
                  font-style: normal;
              }
              @font-face {
                  font-family: 'proxima_nova_rgbold';
                  src: url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.eot');
                  src: url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
                       url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.woff') format('woff'),
                       url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.ttf') format('truetype'),
                       url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.svg#proxima_nova_rgbold') format('svg');
                  font-weight: normal;
                  font-style: normal;
              }
          }
          @media screen and (-webkit-min-device-pixel-ratio: 0), and (min--moz-device-pixel-ratio: 0) {
              #normal {
                  font-weight: normal !important;
              }
          }
    </style>
    <style>
      u + .body .pt50 {
              	padding-top: 150px !important;
              }
              u + #body a {
          color: inherit;
          text-decoration: none;
          font-size: inherit;
          font-family: inherit;
          font-weight: inherit;
          line-height: inherit;
      }
    </style>
    <style type="text/css">
      /***************
      PADDING 0px
      ***************/
      /***************
      PADDING 5px
      ***************/
      /***************
      PADDING 10px
      ***************/
      /***************
      PADDING 15px
      ***************/
      /***************
      PADDING 20px
      ***************/
      /***************
      PADDING 25px
      ***************/
      /***************
      PADDING 30px
      ***************/
      /***************
      PADDING 35px
      ***************/
      /***************
      PADDING 40px
      ***************/
      /***************
      PADDING 45px
      ***************/
      /***************
      PADDING 50px
      ***************/
      /***************
      PADDING 55px
      ***************/
      /***************
      PADDING 60px
      ***************/
      /***************
      PADDING 65px
      ***************/
      /***************
      PADDING 70px
      ***************/
      /***************
      PADDING 75px
      ***************/
      /***************
      PADDING 100px
      ***************/
      /***************
      PADDING 125px
      ***************/
      /***************
      PADDING 150px
      ***************/
          /**********
          FONT SIZES
          ***********/
          /***********
          LINE HEIGHTS
          ***********/
          /***********
          COLORS
          ***********/
          /***********
          ALIGNMENT
          ***********/
      @media screen and (min-width: 750px) {
          h1 {
              font-size: 48px !important;
              line-height: 54px !important;
          }
      }
      @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-width: 800px) {
      .frame {
      /*display: table-cell;
          position: absolute;
          height: 100%;
          width: 100%;
      min-width: 100vw;
          overflow: scroll;*/
      }
      .webkit-hide {
      display: none !important;
      }
      .webkit-show {
      	display: block !important;
      }
      .webkit-show-td {
      	display: table-cell !important;
      }
      .webkit-spacer {
      	padding-bottom: 100px;
      }
      .arrow {
      padding: 18px 20px;
      margin: 15px;
      font-family: Trebuchet MS;
      color: #fff;
      cursor: pointer;
      font-size: 30px;
      line-height: 40px;
      width: 40px;
      display: inline-block;
      border-radius: 50%;
      }
      .arrow:hover {
      background: rgba(0,0,0,.2);
      }
      .arrow:hover:before {
          position: absolute;
          font-size: 12px;
          font-family: arial;
          color: #fff;
          padding: 5px;
          border-radius: 3px;
          opacity: 1;
          margin-top: 50px;
      }
      .arrow[name="next"]:hover:before {
      	content: 'Next article';
          margin-left: -22px;
      }
      .arrow[name="prev"]:hover:before {
      	content: 'Last article';
          margin-left: -18px;
      }
      .arrow[title="grey"]:hover:before {
      	color: #888888;
      }
      .slider-dots {
      	position: fixed; bottom: 0px; margin: 0 auto; width: 100%;
      }
      .dot {
      	display: inline-block;
          border: 6px solid rgba(255,255,255,0.4);
          border-radius: 8px;
          cursor: pointer;
      }
      .dot:hover {
      	border-color: #fff;
      }
      .dot:hover:before {
          position: absolute;
          font-size: 12px;
          font-family: arial;
          background: rgba(0,0,0,.3);
          color: #fff;
          padding: 5px;
          border-radius: 3px;
          opacity: 1;
          margin-top: -40px;
          transform: translateX(-50%);
          font-family: 'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;
      }
      #one:checked ~ .slider-dots .dot[name="one"] {
      	border-color: #ffffff !important;
      }
      #two:checked ~ .slider-dots .dot[name="two"] {
      	border-color: #ffffff !important;
      }
      #three:checked ~ .slider-dots .dot[name="three"] {
      	border-color: #ffffff !important;
      }
      #four:checked ~ .slider-dots .dot[name="four"] {
      	border-color: #ffffff !important;
      }
      #five:checked ~ .slider-dots .dot[name="five"] {
      	border-color: #ffffff !important;
      }
      #six:checked ~ .slider-dots .dot[name="six"] {
      	border-color: #ffffff !important;
      }
      #seven:checked ~ .slider-dots .dot[name="seven"] {
      	border-color: #ffffff !important;
      }
      #eight:checked ~ .slider-dots .dot[name="eight"] {
      	border-color: #ffffff !important;
      }
      .dot[name="one"]:hover:before {
      	content: 'Interactive Email: Opportunities and Challenges';
          width: 260px;
      }
      .dot[name="two"]:hover:before {
      	content: 'The Ultimate Guide to List-Unsubscribe';
          width: 210px;
      }
      .dot[name="three"]:hover:before {
      	content: 'iPhone X Email Previews Are Here';
          width: 190px;
      }
      .dot[name="four"]:hover:before {
      	content: 'Everything You Need to Know About Bulletproof Buttons';
          width: 305px;
      }
      .dot[name="five"]:hover:before {
      	content: 'Email Pixel Art: The Rarest and Coolest Defensive Design Tactic';
          width: 340px;
      }
      .dot[name="six"]:hover:before {
      	content: 'The Root Cause of Poor Email Deliverability Webinar Recording and Q&A';
          width: 390px;
      }
      .dot[name="seven"]:hover:before {
      	content: 'New episodes of The Email Design Podcast';
          width: 240px;
      }
      .dot[name="eight"]:hover:before {
      	content: 'Sign Up for a Free Litmus Demo';
          width: 180px;
      }
      .slide-content {
      	display: table;
          width: 100%;
          margin: 0 auto;
          height: 100vh;
          vertical-align: middle;
          background: none !important;
      }
      .abc {
      display: block !important;
      }
      #ok:checked, #ok:checked~[type="radio"] {
          display: inline-block !important;
      }
      #one:not(:checked)~* .def {
      display: none;
      }
      #two:not(:checked)~* .ghi {
      display: none;
      opacity: 0;
      }
      #three:not(:checked)~* .jkl {
      display: none;
      }
      #four:not(:checked)~* .mno {
      display: none;
      }
      #five:not(:checked)~* .pqr {
      display: none;
      }
      #six:not(:checked)~* .stu {
      display: none;
      }
      #seven:not(:checked)~* .vwx {
      display: none;
      }
      #eight:not(:checked)~* .yz {
      display: none;
      }
      .def, .ghi, .jkl {
      animation: fadein 1s;
      }
      @keyframes fadein {
      0% {
      opacity: 0;
      }
      100% {
      opacity: 1;
      }
      }
      input {
      -display: none;
      }
      #two:checked ~ .frame  {
      	background: #f3863d !important;
          -transition: 1.5s;
      }
      #three:checked ~ .frame {
      	background: #444 !important;
          -transition: 1.5s;
          height: 105% !important;
      }
      #four:checked ~ .frame {
          background: #56c2b8 !important;
          -transition: 1.5s;
          height: 105% !important;
      }
      #five:checked ~ .frame {
          background: #f06d65 !important;
          -transition: 1.5s;
      }
      #six:checked ~ .frame {
          background: #54c2a2 !important;
          -transition: 1.5s;
          height: 140% !important;
      }
      #six:checked~* .deliv {
      	-padding-top: 300px !important;
      }
      #seven:checked ~ .frame {
          background: #f3b35c !important;
          -transition: 1.5s;
          height: 135% !important;
      }
      #seven:checked~* .podcast {
      	-padding-top: 250px !important;
      }
      #eight:checked ~ .frame {
          background: #f0f0f0 !important;
          -transition: 1.5s;
          height: 130% !important;
      }
      #eight:checked~* .demo {
      	-padding-top: 250px !important;
      }
      }
    </style>
  </head>
  <body style="padding: 0; margin: 0;" class="body" id="body">
    <div class="preheader" style="display:none;max-height:0;overflow:hidden;">
      Interactive email, iPhone X previews, list-unsubscribe, bulletproof buttons, and more.
    </div>
    <div style="display: none; width: 0px; height: 0px; max-height: 0px; overflow: hidden;">
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;
    </div>
    <!--[if (gte mso 9)|(IE)]><!-->
<input type="checkbox" style="display: none;" id="check">
<input type="radio" name="page" style="display: none;" id="one" checked>
<input type="radio" name="page" style="display: none;" id="two">
<input type="radio" name="page" style="display: none;" id="three">

<input type="radio" name="page" style="display: none;" id="four">

<input type="radio" name="page" style="display: none;" id="five">

<input type="radio" name="page" style="display: none;" id="six">
<input type="radio" name="page" style="display: none;" id="seven">

<input type="radio" name="page" style="display: none;" id="eight">
<!--<![endif]-->
      <div class="frame" style="background:#a884d3;">
        <div style="padding-top:5px;padding-bottom:5px;padding-right:10px;padding-left:10px;background-color:#333; -width: 100%; position: relative; z-index: 9999;" class="pt5 pb5 pl10 pr10">
          <p class="tac" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;text-align:center;">
            <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbtl/444538589" target="_blank" class="webkit-show white fsz12 lh16 link" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#0088cc;text-decoration:underline;font-size:12px;line-height:16px;color:#ffffff;display: none;">Read how we created the interactive slider in this month&rsquo;s newsletter.</a><br>
            <a href="http://pages.litmus.com/e/31032/2017-11-20/dgqbtn/444538589" target="_blank" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;"><img src="http://pages.litmus.com/l/31032/2014-10-06/h3mtw/31032/36290/litmus_logo_wheel.png" alt="Litmus" width="70" height="70" style="display: block; margin: 0 auto;" border="0"/></a><br>
          </p>
        </div>
        <div class="abc">
          <div class="def">
            <!--[if (gte mso 9)|(IE)]>
              <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
                <tr>
                  <td align="center" bgcolor="#a884d3" style="mso-padding-top-alt: 50px; mso-padding-bottom-alt: 50px;">
            <![endif]-->
            <div class="slide-content table center" style="display:table;width:100% !important;">
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="eight" name="prev" class="arrow">&#9664;</label>
              </div>
              <div class="td pl25 pr25 tac pb50 pt25 vam" style="padding-top:25px;padding-right:25px;padding-left:25px;padding-bottom:50px;text-align:center;vertical-align:middle;display:table-cell;">
                <!--[if (gte mso 9)|(IE)]>
                  <table cellspacing="0" cellpadding="0" border="0" width="700" align="center" role="presentation">
                    <tr>
                      <td align="center">
                <![endif]-->
                <div class="max650 center" style="max-width:700px;margin:0 auto;">
                  <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbsg/444538589" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;"><img src="http://pages.litmus.com/l/31032/2017-11-15/dfjz1z/31032/131967/interactive_challenges.png" alt="interactive email, oh my!" width="300" border="0" class="fsz16 white" style="font-size:16px;color:#ffffff;max-width: 60%;"/></a>
                  <h1 class="pt15" style="margin:0;font-size:40px;line-height:44px;color:#ffffff;font-weight:bold;display:inline-block;mso-margin-top-alt:20px;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;padding-top:15px;">Interactive Email: Opportunities and Challenges</h1>
                  <p class="pt25" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:25px;">Hamburger menus, image carousels, and even shopping carts&mdash;interactive elements we never thought were possible in email are becoming more common. We break down the opportunities and challenges of interactive email.</p>
                  <!--[if (gte mso 12)]><br>
                  <![endif]-->
                  <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbsg/444538589" class="cta" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;font-weight:normal;color:#ffffff;text-decoration:none;border-radius:30px;padding:15px 30px;display:inline-block;font-weight:bold;mso-padding-alt:0px;margin-top:20px;font-size:18px;background-color: #e86f42; border: 1px solid #e86f42; mso-border-alt: 8px solid #e86f42;" target="_blank">See the pros and cons &rarr;</a>
                </div>
                <div class="webkit-spacer"></div>
                <!--[if (gte mso 9)|(IE)]>
                </td>
              </tr>
            </table>
                <![endif]-->
              </div>
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="two" name="next" class="arrow">&#9654;</label>
              </div>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
            <![endif]-->
          </div>
          <div class="ghi">
            <!--[if (gte mso 9)|(IE)]>
              <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
                <tr>
                  <td align="center" bgcolor="#f3863d" style="mso-padding-top-alt: 50px; mso-padding-bottom-alt: 50px;">
            <![endif]-->
            <div class="slide-content table center" style="display:table;width:100% !important;background: #f3863d;">
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="one" name="prev" class="arrow">&#9664;</label>
              </div>
              <div class="td pl50 pr50 tac pt25 pb50 vam" style="padding-top:25px;padding-bottom:50px;padding-right:50px;padding-left:50px;text-align:center;vertical-align:middle;display:table-cell;">
                <!--[if (gte mso 9)|(IE)]>
                  <table cellspacing="0" cellpadding="0" border="0" width="700" align="center" role="presentation">
                    <tr>
                      <td align="center">
                <![endif]-->
                <div class="max650 center" style="max-width:700px;margin:0 auto;">
                  <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbsj/444538589" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;"><img src="http://pages.litmus.com/l/31032/2017-11-15/dfjz2d/31032/131971/list_unsubscribe.png" alt="embrace it" width="380" border="0"/></a>
                  <h1 class="pt15" style="margin:0;font-size:40px;line-height:44px;color:#ffffff;font-weight:bold;display:inline-block;mso-margin-top-alt:20px;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;padding-top:15px;">The Ultimate Guide to List-Unsubscribe</h1>
                  <p class="pt25" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:25px;">List-unsubscribe strikes fear into the hearts of many marketers. But it shouldn&rsquo;t! Discover what list-unsubscribe is, how it works, and why an easy unsubscribe is actually a good thing.</p>
                  <!--[if gte mso 12]><br>
                  <![endif]-->
                  <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbsj/444538589" class="cta" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;font-weight:normal;color:#ffffff;text-decoration:none;border-radius:30px;padding:15px 30px;display:inline-block;font-weight:bold;mso-padding-alt:0px;margin-top:20px;font-size:18px;background-color: #549AE1; border: 1px solid #549AE1; mso-border-alt: 8px solid #549AE1;" target="_blank">Don&rsquo;t fear the unsubscribe &rarr;</a>
                </div>
                <div class="webkit-spacer"></div>
                <!--[if (gte mso 9)|(IE)]>
                </td>
              </tr>
            </table>
                <![endif]-->
              </div>
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="three" name="next" class="arrow">&#9654;</label>
              </div>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
            <![endif]-->
          </div>
          <div class="jkl">
            <!--[if (gte mso 9)|(IE)]>
              <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
                <tr>
                  <td align="center" bgcolor="#444444" style="mso-padding-top-alt: 50px; mso-padding-bottom-alt: 50px;">
            <![endif]-->
            <div class="slide-content table center" style="display:table;width:100% !important;background: #444444;">
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="two" name="prev" class="arrow">&#9664;</label>
              </div>
              <div class="td pl35 pr35 tac pt25 pb50 vam" style="padding-top:25px;padding-right:35px;padding-left:35px;padding-bottom:50px;text-align:center;vertical-align:middle;display:table-cell;">
                <!--[if (gte mso 9)|(IE)]>
                  <table cellspacing="0" cellpadding="0" border="0" width="700" align="center" role="presentation">
                    <tr>
                      <td align="center">
                <![endif]-->
                <div class="max650 center" style="max-width:700px;margin:0 auto;">
                  <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbtq/444538589" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;"><img src="http://pages.litmus.com/l/31032/2017-11-08/ddc5hb/31032/131157/iphonex_new.png" alt="iPhone X" width="200" border="0" class="fsz16 white" style="font-size:16px;color:#ffffff;border-bottom: 1px solid #666; display: block; margin: 0 auto;"/></a>
                  <h1 class="pt15" style="margin:0;font-size:40px;line-height:44px;color:#ffffff;font-weight:bold;display:inline-block;mso-margin-top-alt:20px;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;padding-top:15px;">iPhone X Email Previews <br>
                    are Here</h1>
                  <p class="pt25" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:25px;color: #bbb;">Curious to find out how the iPhone X will affect your email campaigns? Great news&mdash;we&rsquo;ve added Apple&rsquo;s latest device to Litmus Email Previews.
                            </p>
                  <p class="pt20" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:20px;color: #bbbbbb;">
                    New email clients can introduce unforeseen rendering issues for your campaigns. Sign up for Litmus and start testing today in all popular email clients and devices including iPhone X, Outlook for Android, and Apple Mail 11—and never send another broken email.
                            </p>
                  <!--[if gte mso 12]><br>
                  <![endif]-->
                  <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgzdcv/444538589" class="cta" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;font-weight:normal;color:#ffffff;text-decoration:none;border-radius:30px;padding:15px 30px;display:inline-block;font-weight:bold;mso-padding-alt:0px;margin-top:20px;font-size:18px;background-color: #e86f42; border: 1px solid #e86f42; mso-border-alt: 8px solid #e86f42;" target="_blank">Sign up now →</a>
                        </div>
                <div class="webkit-spacer"></div>
                <!--[if (gte mso 9)|(IE)]>
                </td>
              </tr>
            </table>
                <![endif]-->
              </div>
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="four" name="next" class="arrow">&#9654;</label>
              </div>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
            <![endif]-->
          </div>
          <div class="mno">
            <!--[if (gte mso 9)|(IE)]>
              <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
                <tr>
                  <td align="center" bgcolor="#56c2b8" style="mso-padding-top-alt: 50px; mso-padding-bottom-alt: 50px;">
            <![endif]-->
            <div class="slide-content table center" style="display:table;width:100% !important;background: #56c2b8;">
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="three" name="prev" class="arrow">&#9664;</label>
              </div>
              <div class="td pl50 pr50 tac pt25 pb50 vam" style="padding-top:25px;padding-bottom:50px;padding-right:50px;padding-left:50px;text-align:center;vertical-align:middle;display:table-cell;">
                <!--[if (gte mso 9)|(IE)]>
                  <table cellspacing="0" cellpadding="0" border="0" width="700" align="center" role="presentation">
                    <tr>
                      <td align="center">
                <![endif]-->
                <div class="max650 center" style="max-width:700px;margin:0 auto;">
                  <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbsn/444538589" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;"><img src="http://pages.litmus.com/l/31032/2017-11-15/dfjz4n/31032/131977/bb_button2.png" alt="buttons buttons buttons" width="300" border="0" class="fsz16 white" style="font-size:16px;color:#ffffff;"/></a>
                  <h1 style="margin:0;font-size:40px;line-height:44px;color:#ffffff;font-weight:bold;display:inline-block;mso-margin-top-alt:20px;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;">Everything You Need to Know About Bulletproof Buttons</h1>
                  <p class="pt25" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:25px;">
                    Marketers have moved away from using image-based call-to-action buttons in their emails due to image blocking and accessibility concerns. The alternative? Bulletproof buttons. Learn what a bulletproof button is and how you can use them in your emails.
                        </p>
                  <!--[if gte mso 12]><br>
                  <![endif]-->
                  <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbsn/444538589" class="cta" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;font-weight:normal;color:#ffffff;text-decoration:none;border-radius:30px;padding:15px 30px;display:inline-block;font-weight:bold;mso-padding-alt:0px;margin-top:20px;font-size:18px;background-color: #e86f42; border: 1px solid #e86f42; mso-border-alt: 8px solid #e86f42;" target="_blank">Build better buttons &rarr;</a>
                </div>
                <div class="webkit-spacer"></div>
                <!--[if (gte mso 9)|(IE)]>
                </td>
              </tr>
            </table>
                <![endif]-->
              </div>
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="five" name="next" class="arrow">&#9654;</label>
              </div>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
            <![endif]-->
          </div>
          <div class="pqr">
            <!--[if (gte mso 9)|(IE)]>
              <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
                <tr>
                  <td align="center" bgcolor="#f06d65" style="mso-padding-top-alt: 50px; mso-padding-bottom-alt: 50px;">
            <![endif]-->
            <div class="slide-content table center" style="display:table;width:100% !important;background: #f06d65;">
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="four" name="prev" class="arrow">&#9664;</label>
              </div>
              <div class="td pl50 pr50 tac pt25 pb50 vam" style="padding-top:25px;padding-bottom:50px;padding-right:50px;padding-left:50px;text-align:center;vertical-align:middle;display:table-cell;">
                <!--[if (gte mso 9)|(IE)]>
                  <table cellspacing="0" cellpadding="0" border="0" width="700" align="center" role="presentation">
                    <tr>
                      <td align="center">
                <![endif]-->
                <div class="max650 center" style="max-width:700px;margin:0 auto;">
                  <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbsq/444538589" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;"><img src="http://pages.litmus.com/l/31032/2017-11-15/dfjz4s/31032/131979/email_pixel_art_the_rarest_and_coolest_defensive_design_tactic.png" alt="the coolest tactic" width="400" border="0" style="max-width: 80%;"/></a>
                  <h1 style="margin:0;font-size:40px;line-height:44px;color:#ffffff;font-weight:bold;display:inline-block;mso-margin-top-alt:20px;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;">Email Pixel Art: The Rarest and Coolest Defensive Design Tactic</h1>
                  <p class="pt25" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:25px;">
                    Including pictures in your emails even when images are blocked is possible with pixel art. Learn how and understand some of the issues you need to consider before using them.
                        </p>
                  <!--[if gte mso 12]><br>
                  <![endif]-->
                  <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbsq/444538589" class="cta" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;font-weight:normal;color:#ffffff;text-decoration:none;border-radius:30px;padding:15px 30px;display:inline-block;font-weight:bold;mso-padding-alt:0px;margin-top:20px;font-size:18px;background-color: #54C1E3; border: 1px solid #54C1E3; mso-border-alt: 8px solid #54C1E3;" target="_blank">Transform your emails &rarr;</a>
                </div>
                <div class="webkit-spacer"></div>
                <!--[if (gte mso 9)|(IE)]>
                </td>
              </tr>
            </table>
                <![endif]-->
              </div>
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="six" name="next" class="arrow">&#9654;</label>
              </div>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
            <![endif]-->
          </div>
          <div class="stu">
            <!--[if (gte mso 9)|(IE)]>
              <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
                <tr>
                  <td align="center" bgcolor="#55c2a2" style="mso-padding-top-alt: 50px; mso-padding-bottom-alt: 50px;">
            <![endif]-->
            <div class="slide-content table center deliv" style="display:table;width:100% !important;background: #55c2a2;">
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="five" name="prev" class="arrow">&#9664;</label>
              </div>
              <div class="td pl35 pr35 tac pt25 pb50" style="padding-top:25px;padding-right:35px;padding-left:35px;padding-bottom:50px;text-align:center;display:table-cell;">
                <!--[if (gte mso 9)|(IE)]>
                  <table cellspacing="0" cellpadding="0" border="0" width="700" align="center" role="presentation">
                    <tr>
                      <td align="center">
                <![endif]-->
                <div class="max650 center" style="max-width:700px;margin:0 auto;">
                  <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbss/444538589" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;"><img src="http://pages.litmus.com/l/31032/2017-11-15/dfjzjb/31032/132011/deliv_qa.png" alt="{alt}" width="450" border="0" style="max-width: 100%;"/></a>

                  <p class="white bold pt15" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:15px;color:#353a3e;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;font-weight:bold;color:#ffffff;">
                    &ndash; WEBINAR RECORDING AND Q&A &ndash;
                     	</p>
                  <h1 style="margin:0;font-size:40px;line-height:44px;color:#ffffff;font-weight:bold;display:inline-block;mso-margin-top-alt:20px;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;">
                    The Root Cause of Poor Email Deliverability
                        </h1>
                  <p class="pt25" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:25px;">
                    Discover the various ways that marketers try to improve their poor email deliverability and learn which tactics work best. Download the slides or catch up on the webinar recording and let Litmus Research Director Chad White and Product Manager Jay Brangiforte answer your burning deliverability questions.
                        </p>
                  <!--[if gte mso 12]><br>
                  <![endif]-->
                  <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbss/444538589" class="cta" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;font-weight:normal;color:#ffffff;text-decoration:none;border-radius:30px;padding:15px 30px;display:inline-block;font-weight:bold;mso-padding-alt:0px;margin-top:20px;font-size:18px;background-color: #e86f42; border: 1px solid #e86f42; mso-border-alt: 8px solid #e86f42;" target="_blank">Watch the webinar &rarr;</a>
                  <br>
                  <br>
                  <br>
                  <br>
                  <div class="pt25 pb25 pl25 pr25" style="padding-top:25px;padding-bottom:25px;padding-right:25px;padding-left:25px;background: #1d9a75; border-radius: 3px;">
                    <!--[if (gte mso 9)|(IE)]>
                      <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
                        <tr>
                          <td align="center" style="mso-padding-alt: 25px;" bgcolor="#1d9a75">
                    <![endif]-->
                    <h2 class="white" style="margin:0;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;color:#ffffff;">
                      Make It to the Inbox, Not the Spam Folder
                                </h2>
                    <p class="pt10" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:10px;-color: #fff;">
                      Quickly identify issues preventing your email from being delivered and improve your chances of reaching the inbox with Litmus Spam Testing. Try it free for 7 days when you start a free trial of a Litmus Plus plan.
                                </p>
                    <br>
                    <p style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;"><a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgzdcx/444538589" class="link fsz20 white lh30" target="_blank" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#0088cc;text-decoration:underline;font-size:20px;line-height:30px;color:#ffffff;">Start my free trial →</a></p>
                    <!--[if (gte mso 9)|(IE)]>
                    </td>
                  </tr>
                </table>
                    <![endif]-->
                  </div>
                    	</div>
                <div class="webkit-spacer"></div>
                <!--[if (gte mso 9)|(IE)]>
                </td>
              </tr>
            </table>
                <![endif]-->
              </div>
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="seven" name="next" class="arrow">&#9654;</label>
              </div>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
            <![endif]-->
          </div>
          <!--[if (gte mso 9)|(IE)]>
            <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
              <tr>
                <td align="center" bgcolor="#f3b35c" style="mso-padding-top-alt: 50px; mso-padding-bottom-alt: 50px;">
          <![endif]-->
          <div class="vwx">
            <div class="slide-content table center podcast" style="display:table;width:100% !important;background: #f3b35c;">
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="six" name="prev" class="arrow">&#9664;</label>
              </div>
              <div class="td pl35 pr35 tac pt25 pb50 vam" style="padding-top:25px;padding-right:35px;padding-left:35px;padding-bottom:50px;text-align:center;vertical-align:middle;display:table-cell;">
                <!--[if (gte mso 9)|(IE)]>
                  <table cellspacing="0" cellpadding="0" border="0" width="700" align="center" role="presentation">
                    <tr>
                      <td align="center">
                <![endif]-->
                <div class="max650 center" style="max-width:700px;margin:0 auto;">
                  <a href="http://pages.litmus.com/e/31032/2017-11-20/dgqbts/444538589" target="_blank" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;"><img src="http://pages.litmus.com/l/31032/2017-02-09/bqvf44/31032/107351/podcast_icon2.png" width="225" height="218" alt="music to your emails" style="display: block; border: 0px; margin: 0 auto;" class="center"/></a>
                  <h1 class="pt25" style="margin:0;font-size:40px;line-height:44px;color:#ffffff;font-weight:bold;display:inline-block;mso-margin-top-alt:20px;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;padding-top:25px;">The Email Design Podcast</h1>
                  <p class="pt25" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:25px;">
                    Join hosts Kevin Mandeville & Jason Rodriguez as they talk about the latest news in the email world.
                        </p>
                  <p class="pt25 fsz20 lh26" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:25px;font-size:20px;line-height:26px;">
                    <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbsx/444538589" class="link white" target="_blank" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#0088cc;text-decoration:underline;color:#ffffff;">#80: A new email mentorship program and POP/IMAP accounts come to Gmail iOS</a><br>
                    <br>
                    <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbsz/444538589" class="link white" target="_blank" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#0088cc;text-decoration:underline;color:#ffffff;">#81: MailChimp moves to single-opt-in and Alto Mail to be retired</a><br>

                    <br>
                    <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbt2/444538589" class="link white" target="_blank" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#0088cc;text-decoration:underline;color:#ffffff;">#82: Litmus Community Q&A Rapid Fire</a>
                  </p>
                  <p class="pt25 pb25" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:25px;padding-bottom:25px;">
                    Subscribe to the #EmailDesignPodcast on iTunes, YouTube, SoundCloud or follow along on Twitter.
                        </p>
                  <div class="tac vam pl50" style="padding-left:50px;text-align:center;vertical-align:middle;">
                    <!--[if (gte mso 9)|(IE)]>
                      <table cellspacing="0" cellpadding="0" border="0" width="500" role="presentation" style="mso-padding-alt: 25px;" align="center">
                        <tr>
                          <td align="center" valign="top">
                    <![endif]-->
                    <a href="http://pages.litmus.com/e/31032/cITFC7iyh9D4DtBAnWowjyPBKN4vmF/dgqbt4/444538589" target="_blank" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;">
                      <img src="http://pages.litmus.com/l/31032/2017-02-09/bqvf48/31032/107355/YouTube_logo_dark1.png" width="100" height="57" alt="youtube" style="display:inline-block;border:0px;" class="center podcast-hover"/>
                </a>
                    &nbsp; &nbsp; &nbsp;
                <!--[if (gte mso 9)|(IE)]>
                    </td>
                    <td align="center">
                    <![endif]-->
                    <a href="http://pages.litmus.com/e/31032/email-design-podcast/dgqbt6/444538589" target="_blank" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;">
                      <img src="http://pages.litmus.com/l/31032/2017-02-09/bqvf4b/31032/107357/soundcloud_logo.png" width="100" height="57" style="display:inline-block;border:0px;" alt="soundcloud" class="center podcast-hover vat"/>
                </a>
                    &nbsp; &nbsp; &nbsp;
                <!--[if (gte mso 9)|(IE)]>
                    </td>
                    <td align="center">
                    <![endif]-->
                    <a href="http://pages.litmus.com/e/31032/ail-design-podcast-id904262438/dgqbt8/444538589" target="_blank" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;">
                      <img src="http://pages.litmus.com/l/31032/2017-02-09/bqvf4d/31032/107359/itunes_logo.png" width="150" height="45" alt="itunes" style="padding-top:5px;display:inline-block;border:0px;" class="center podcast-hover vat pt5"/></a>
                    <!--[if (gte mso 9)|(IE)]>
                    </td>
                  </tr>
                </table>
                    <![endif]-->
                  </div>
                </div>
                <div class="webkit-spacer"></div>
                <!--[if (gte mso 9)|(IE)]>
                </td>
              </tr>
            </table>
                <![endif]-->
              </div>
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="eight" name="next" class="arrow">&#9654;</label>
              </div>
            </div>
          </div>
          <!--[if (gte mso 9)|(IE)]>
          </td>
        </tr>
      </table>
          <![endif]-->
          <div class="yz">
            <!--[if (gte mso 9)|(IE)]>
              <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
                <tr>
                  <td align="center" bgcolor="#f0f0f0" style="mso-padding-top-alt: 50px; mso-padding-bottom-alt: 50px;">
            <![endif]-->
            <div class="slide-content table center" style="display:table;width:100% !important;background: #f0f0f0;">
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="seven" name="prev" title="grey" class="arrow">&#9664;</label>
              </div>
              <div class="td pl35 pr35 tac pt25 pb50 vam" style="padding-top:25px;padding-right:35px;padding-left:35px;padding-bottom:50px;text-align:center;vertical-align:middle;display:table-cell;">
                <!--[if (gte mso 9)|(IE)]>
                  <table cellspacing="0" cellpadding="0" border="0" width="700" align="center" role="presentation">
                    <tr>
                      <td align="center">
                <![endif]-->
                <div class="max650 center" style="max-width:700px;margin:0 auto;">
                  <!--[if (gte mso 9)|(IE)]>
                    <table cellspacing="0" padding="0" border="0" width="600" role="presentation">
                      <tr>
                        <td align="center">
                  <![endif]-->
                  <div class="max600 center pl25 pr25" style="padding-right:25px;padding-left:25px;max-width: 600px; margin: 0 auto; padding-top: 35px;">
                    <div class="session tac" style="text-align:center;">
                      <!--[if (gte mso 9)|(IE)]>
                        <table cellspacing="0" padding="0" border="0" width="100%" role="presentation">
                          <tr>
                            <td align="center" valign="top">
                      <![endif]-->
                      <h1 style="margin:0;font-size:40px;line-height:44px;color:#ffffff;font-weight:bold;display:inline-block;mso-margin-top-alt:20px;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;padding-top:15px;mso-margin-top-alt: 15px; font-size: 36px !important; color: #333333; line-height: 40px !important;" class="pt15">
                        Sign Up for a Free Litmus Demo
                    </h1>
                      <p class="pt15" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:15px;color: #888888; mso-padding-top-alt: 15px;">
                        New to Litmus, curious, or just need a quick refresher on how Litmus can improve your email creation process? Join our customer support team for a walk through of the Litmus Email Creative Platform.

                        <!--[if gte mso 12]>
                          <br>
                          <br>
                        <![endif]-->
                      </p>
                      <!--[if (gte mso 9)|(IE)]>
                      </td>
                    </tr>
                  </table>
                      <![endif]-->
                    </div>
                  </div>
                  <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
                  <![endif]-->
                  <div class="center pt25 pl25 pr25" style="padding-top:25px;padding-right:25px;padding-left:25px;max-width: 600px; margin: 0 auto;">
                    <!--[if gte mso 12]>
                      <table cellspacing="0" padding="0" border="0" width="800" role="presentation" align="center">
                        <tr>
                          <td align="center" valign="top">
                    <![endif]-->
                    <div class="tac" style="text-align:center;">
                      <div class="table w100p" style="display:table;width:100% !important;">
                        <!--[if gte mso 12]>
                          <table cellspacing="0" padding="0" border="0" width="100%" role="presentation">
                            <tr>
                              <td width="190" align="center" style="mso-padding-top-alt: 25px;">
                        <![endif]-->
                        <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
                          <tr>
                            <td bgcolor="#f36c5e" class="pt5 pb5 pl10 pr10" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;padding-top:5px;padding-bottom:5px;padding-right:10px;padding-left:10px;border-radius: 3px 3px 0 0;" align="center">
                              <p class="white fsz20 bold" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;color:#353a3e;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;font-weight:bold;font-size:20px;color:#ffffff;">NOV</p>
                            </td>
                          </tr>
                          <tr>
                            <td align="center" bgcolor="#ffffff" class="pt15 pb15 pl10 pr10" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;padding-right:10px;padding-left:10px;padding-top:15px;padding-bottom:15px;border-radius: 0 0 3px 3px;">
                              <p class="fsz60 lh60" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;font-size:60px;line-height:60px;">
                                <b style="color: #333333;">22</b>
                              </p>
                              <p style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;color: #333333;">11AM EST</p>
                            </td>
                          </tr>
                        </table>
                        <!--[if gte mso 12]>
                        </td>
                        <td width="13" align="center" style="mso-padding-top-alt: 25px;">
                        <![endif]-->
                        <div class="td w5p" style="display:table-cell;">&nbsp;</div>
                        <!--[if gte mso 12]>
                        </td>
                        <td width="190" align="center" style="mso-padding-top-alt: 25px;">
                        <![endif]-->
                        <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
                          <tr>
                            <td bgcolor="#f36c5e" class="pt5 pb5 pl10 pr10" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;padding-top:5px;padding-bottom:5px;padding-right:10px;padding-left:10px;border-radius: 3px 3px 0 0;" align="center">
                              <p class="white fsz20 bold" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;color:#353a3e;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;font-weight:bold;font-size:20px;color:#ffffff;">NOV</p>
                            </td>
                          </tr>
                          <tr>
                            <td align="center" bgcolor="#ffffff" class="pt15 pb15 pl10 pr10" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;padding-right:10px;padding-left:10px;padding-top:15px;padding-bottom:15px;border-radius: 0 0 3px 3px;">
                              <p class="fsz60 lh60" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;font-size:60px;line-height:60px;">
                                <b style="color: #333333;">30</b>
                              </p>
                              <p style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;color: #333333;">2PM EST</p>
                            </td>
                          </tr>
                        </table>
                        <!--[if gte mso 12]>
                        </td>
                        <td width="14" align="center" style="mso-padding-top-alt: 25px;">
                        <![endif]-->
                        <div class="td w5p" style="display:table-cell;">&nbsp;</div>
                        <!--[if gte mso 12]>
                        </td>
                      </tr>
                    </table>
                        <![endif]-->
                      </div>
                    </div>
                    <!--[if gte mso 12]>
                    </td>
                  </tr>
                </table>
                    <![endif]-->
                  </div>
                  <div class="pt20 max600 center pl25 pr25" style="padding-top:20px;padding-right:25px;padding-left:25px;max-width: 600px; margin: 0 auto;">
                    <!--[if (gte mso 9)|(IE)]>
                      <table cellspacing="0" padding="0" border="0" width="600" role="presentation" align="center">
                        <tr>
                          <td align="center" valign="top" style="mso-padding-top-alt: 25px;" >
                    <![endif]-->
                    <div class="tac" style="text-align:center;">
                      <p style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;">
                        <a href="http://pages.litmus.com/e/31032/rt-8307007545656357377/dgqbtb/444538589" target="_blank" class="cta fsz18" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;font-weight:normal;color:#ffffff;text-decoration:none;border-radius:30px;padding:15px 30px;display:inline-block;font-weight:bold;mso-padding-alt:0px;margin-top:20px;font-size:18px;background-color: #f36c5e; border: 1px solid #f36c5e; mso-border-alt: 8px solid #f36c5e; color: #ffffff;">Register now &rarr;</a>
                      </p>
                      <br>
                      <br>
                      <br>
                      <br>
                      <h2 class="lh36 fsz30" style="margin:0;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;font-size:30px;line-height:36px;color:#333333;">
                        Want more email news in your inbox?
                  </h2>
                      <p class="p pt20" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:20px;color: #888888;">
                        Get a weekly dose of Litmus and the latest email marketing news when you sign up for Litmus Weekly.<br>
                        <!--[if gte mso 12]><br>
                        <![endif]-->
                        <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbtd/444538589" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;font-family:'proxima_nova_rgbold', Proxima Nova, Helvetica, Arial, sans-serif;font-weight:normal;color:#ffffff;text-decoration:none;border-radius:30px;padding:15px 30px;display:inline-block;font-weight:bold;mso-padding-alt:0px;margin-top:20px;font-size:18px;background-color: #aaaaaa; border: 1px solid #aaaaaa; mso-border-alt: 8px solid #aaaaaa;" class="cta fsz18">Sign up now &rarr;</a>
                      </p>
                      <div class="webkit-spacer"></div>
                      <br>
                      <style>
                        @media print{ #_t { background-image: url('https://afjry7z8.emltrk.com/afjry7z8?p&d=matt@reallygoodemails.com');}} div.OutlookMessageHeader {background-image:url('https://afjry7z8.emltrk.com/afjry7z8?f&d=matt@reallygoodemails.com')} table.moz-email-headers-table {background-image:url('https://afjry7z8.emltrk.com/afjry7z8?f&d=matt@reallygoodemails.com')} blockquote #_t {background-image:url('https://afjry7z8.emltrk.com/afjry7z8?f&d=matt@reallygoodemails.com')} #MailContainerBody #_t {background-image:url('https://afjry7z8.emltrk.com/afjry7z8?f&d=matt@reallygoodemails.com')}
                      </style>
                      <div id="_t"></div>
                      <img src="https://afjry7z8.emltrk.com/afjry7z8?d=matt@reallygoodemails.com" width="1" height="1" border="0" alt=""/>
                </div>
                    <!--[if (gte mso 9)|(IE)]>
                    </td>
                  </tr>
                </table>
                <table cellspacing="0" cellpadding="0" border="0" width="600" align="center" role="presentation">
                  <tr>
                    <td align="center" style="padding-top: 75px;">
                    <![endif]-->
                    <div class="webkit-hide">
                      <div style="padding-right:15px;padding-left:15px;text-align:center;padding-right:15px;padding-left:15px;text-align:center;color:#999999;max-width: 600px; margin: 0 auto;" class="footer tac pl15 pr15">
                        <br>
                        <br/>
                  <br/>
                  <br/>
                <a href="http://pages.litmus.com/e/31032/2017-11-20/dgqbtg/444538589" target="_blank" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#999999;text-decoration:underline;">
                          <img src="http://pages.litmus.com/l/31032/2014-04-17/2hs6f/31032/17328/litmus_logo_footer.png" width="30" height="30" border="0" style="display:inline-block;"></a>
                        <p class="pt15" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:15px;margin:0;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Hevletica, Arial, sans-serif;padding-top:15px;font-size:13px;line-height:18px;color:#888888;">
                          <span class="appleFooter">675 Massachusetts Ave.<br>
                            Cambridge, MA 02139, USA</span><br>
                          <a href="http://pages.litmus.com/webmail/31032/444538589/da24a71a55efdee0fc3ff4f8651fac665ec75b03b2cf44e51270ab29f2f289f1" target="_blank" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#0088cc;text-decoration:underline;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;" class="link">View online</a><br>
                          <br>
                          You&rsquo;re receiving this email because you&rsquo;ve signed up to receive updates from Litmus. If you&rsquo;d prefer not to receive updates, you can <a href="http://pages.litmus.com/emailPreference/31032/da24a71a55efdee0fc3ff4f8651fac665ec75b03b2cf44e51270ab29f2f289f1/444538589" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#0088cc;text-decoration:underline;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;" class="link">manage your preferences</a> or <a href="http://pages.litmus.com/unsubscribe/u/31032/da24a71a55efdee0fc3ff4f8651fac665ec75b03b2cf44e51270ab29f2f289f1/444538589" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#0088cc;text-decoration:underline;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial,
sans-serif;" class="link">unsubscribe</a>.<br>
                          <br>
                          Litmus works alongside your existing email marketing tools to ensure you never send a broken email. <a href="http://pages.litmus.com/e/31032/source-pardot-utm-medium-email/dgqbtj/444538589" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#0088cc;text-decoration:underline;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;" class="link">Learn how Litmus can help you send better email today</a>.<br>
                          <br>
                        </p>
                      </div>
                    </div>
                    <!--[if (gte mso 9)|(IE)]></td>
                  </tr>
                </table>
                    <![endif]-->
                  </div>
                  <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
                  <![endif]-->
                </div>
              </div>
              <div class="td tac vam webkit-show-td" style="text-align:center;vertical-align:middle;display:table-cell;display: none;">
                <label for="one" name="next" title="grey" class="arrow">&#9654;</label>
              </div>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
            <![endif]-->
          </div>
          <!--[if (gte mso 9)|(IE)]>
          </td>
        </tr>
      </table>
          <![endif]-->
        </div>
      </div>
      <!--[if (gte mso 9)|(IE)]><!-->
    <div class="slider-dots webkit-show" style="display: none;">
        <div style="position:absolute;left: 0;right: 0;margin: 0 auto; width: 300px; text-align: center;">
            <label name="one" for="one" class="dot"></label>
            &nbsp;
            <label name="two" for="two" class="dot"></label>
            &nbsp;
            <label name="three" for="three" class="dot"></label>
            &nbsp;
            <label name="four" for="four" class="dot"></label>
            &nbsp;
            <label name="five" for="five" class="dot"></label>
            &nbsp;
            <label name="six" for="six" class="dot"></label>
            &nbsp;
            <label name="seven" for="seven" class="dot"></label>
            &nbsp;
            <label name="eight" for="eight" class="dot"></label>
        </div>
        <p class="tac fsz13 pt5 pb5" style="margin:0;mso-margin-top-alt:15px;font-size:16px;line-height:24px;font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#333;padding-top:5px;padding-bottom:5px;font-size:13px;text-align:center;width: 100%; background: #ffffff; color: #333333; margin-top: 30px;">
                <a href="http://pages.litmus.com/e/31032/2017-11-20/dgqbtn/444538589" class="link" target="_blank" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#0088cc;text-decoration:underline;">Litmus</a> &nbsp; &bull; &nbsp; 675 Massachusetts Avenue, Cambridge, MA 02139 &nbsp; &bull; &nbsp; <a href="#" class="link" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#0088cc;text-decoration:underline;">View Online</a> &nbsp; &bull; &nbsp; <a href="#" class="link" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial,
sans-serif;color:#0088cc;text-decoration:underline;">Unsubscribe</a> &nbsp; &bull; &nbsp; <a href="#" class="link" style="font-family:'proxima_nova_rgregular', Proxima Nova, Helvetica, Arial, sans-serif;color:#0088cc;text-decoration:underline;">Update Preferences</a>
            </p>
    </div>
    <!--<![endif]-->
      </body>
    </html>

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console