Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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

              
                <html>
  
  <head>
    <title>MOO</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
      table.primary-copy table.primary-button :hover{background:#F3F3F3;box-shadow:0 2px 4px 0 rgba(75,79,84,0.30);border-radius:3px;transition:background 200ms}
              table.primary-copy table.primary-button-alt :hover{background:#F3F3F3;box-shadow:0 2px 4px 0 rgba(75,79,84,0.30);border-radius:3px;transition:background 200ms}
              table.two-columns table.button :hover{background: rgba(48,55,59,0.80); border-radius:3px; transition:background 200ms}
              table.two-columns table.button td:hover a{color:#FFFFFF !important; transition:color 200ms}
              table.two-columns table.button-alt :hover{background: rgba(48,55,59,0.80); border-radius:3px; transition:background 200ms}
              table.two-columns table.button-alt td:hover a{color:#FFFFFF !important; transition:color 200ms}
    </style>
    <style type="text/css">
      @font-face {
              font-family: 'Bryant MOO Pro';
              src: url(http://www.moo.com/us/bower_components/moo-toolkit/dist/fonts/bryant/BryantMooWebProRegular.eot?q=a7b25614973421c3730b3dfe73191a77);
              src: url(http://www.moo.com/us/bower_components/moo-toolkit/dist/fonts/bryant/BryantMooWebProRegular.eot?q=a7b25614973421c3730b3dfe73191a77#iefix) format('embedded-opentype'), url(http://www.moo.com/us/bower_components/moo-toolkit/dist/fonts/bryant/BryantMooWebProRegular.woff?q=a7b25614973421c3730b3dfe73191a77) format('woff');
              font-weight: 700;
              font-style: normal;
              font-variant: normal;
              }
              @font-face {
              font-family: 'Bryant MOO Pro Medium';
              src: url(http://www.moo.com/us/bower_components/moo-toolkit/dist/fonts/bryant/BryantMooWebProMedium.eot?q=a7b25614973421c3730b3dfe73191a77);
              src: url(http://www.moo.com/us/bower_components/moo-toolkit/dist/fonts/bryant/BryantMooWebProMedium.eot?q=a7b25614973421c3730b3dfe73191a77#iefix) format('embedded-opentype'), url(http://www.moo.com/us/bower_components/moo-toolkit/dist/fonts/bryant/BryantMooWebProMedium.woff?q=a7b25614973421c3730b3dfe73191a77) format('woff');
              font-weight: 700;
              font-style: normal;
              font-variant: normal;
              }
      a{text-decoration:none;}
              @media all and (max-width: 650px) {
              table.frame {
              min-width: auto !important;
              width: 100% !important;
              }
              table.secondary-frame {
              min-width: auto !important;
              width: 100% !important;
              }
              td.hide {
              display: none !important;
              }
              table.nav {
              width: 90% !important;
              }
              table.nav td {
              width: 33.33333% !important;
              padding-left:0px !important;
              padding-right:0px !important;
              white-space: nowrap;
              }
              table.alert {
              width: 90% !important;
              }
              table.divider {
              width: 90% !important;
              }
              table.secondary-divider {
              width: 90% !important;
              }
              table.two-columns {
              width: 90% !important;
              }
              table.two-columns th.top {
              display: block;
              width: 100% !important;
              text-align: center;
              }
              table.two-columns th.middle {
              display: none !important;
              }
              table.two-columns th.bottom {
              display: block;
              width: 100% !important;
              padding-top: 25px !important;
              }
              table.two-columns img {
              width: 100% !important;
              max-width: 100% !important;
              }
              table.promise {
              width: 100% !important;
              }
              table.promise table {
              width: 90% !important;
              }
              table.promise img,
              table.promise p {
              vertical-align: middle;
              }
              table.footer-divider {
              width: 90% !important;
              }
              table.footer-links {
              width: 90% !important;
              }
              table.terms {
              width: 90% !important;
              }
              table.social {
              width: 90% !important;
              }
              }
    </style>
  </head>
  
  <body>
    <!--[if gte mso 9]>
      <style>
        h1,h2,h3, .button, .primary-button, h1 a, .primary-button td a, td a{
        font-family: 'Trebuchet MS', Trebuchet, 'Liberation Sans', sans-serif !important;
        }
      </style>
    <![endif]-->
    <div class="supersubject" style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">Hardcover Notebooks, Softcover Journals or something even more special.</div>
    <p
    style="font-size:0px; line-height:0px;">&nbsp;</p>
      <table align="center" border="0" cellpadding="0" cellspacing="0" class="frame"
      role="presentation" style="width:650px;max-width:100%;margin:0 auto;text-align:center;background-color:#cac9c9;">
        <tr>
          <td align="center">
            <div class="spacer" style="line-height:30px;height:30px;">&emsp;</div>
            <!-- logo -->
            <a href="https://www.moo.com/us/?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_2&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
            name="www_moo_com_2" style="text-decoration:none;">
              <img alt="" class="logo" height="35" src='http://contentz.mkt8924.com/ra/2018/12324/10/2163787/224974_logox2-alt.png'
              style="display:block;border:none;" width="112" />
            </a>
            <a href="https://www.moo.com/us/?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
            name="www_moo_com" style="text-decoration:none;"></a>
            <div class="spacer" style="line-height:40px;height:40px;">&emsp;</div>
            <table align="center" border="0" cellpadding="0" cellspacing="0" class="nav"
            role="presentation" style="width:650px;max-width:100%;margin:0 auto;text-align:center;">
              <tbody>
                <tr>
                  <td style="padding-left:24px;padding-right:24px;font-size:14px;line-height:20px;">
                    <a href="https://www.moo.com/us/products.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_products_html%285%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                    name="www_moo_com_products_html" style="font-family: 'Avenir Next', Avenir, Verdana, Geneva, sans-serif;color:#545454;margin:0;font-weight:400;text-decoration:none;">Products</a>
                  </td>
                  <td style="padding-left:24px;padding-right:24px;font-size:14px;line-height:20px;">
                    <a href="https://www.moo.com/us/ideas/inspiration.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_inspiration%285%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                    name="www_moo_com_inspiration" style="font-family: 'Avenir Next', Avenir, Verdana, Geneva, sans-serif;color:#545454;margin:0;font-weight:400;text-decoration:none;">Inspiration</a>
                  </td>
                  <td class="hide" style="padding-left:24px;padding-right:24px;font-size:14px;line-height:20px;">
                    <a href="https://www.moo.com/us/business-services.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_business_services_%285%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                    name="www_moo_com_business_services_" style="font-family: 'Avenir Next', Avenir, Verdana, Geneva, sans-serif;color:#545454;margin:0;font-weight:400;text-decoration:none;">10+&nbsp;Employees?</a>
                  </td>
                  <td class="hide" style="padding-left:24px;padding-right:24px;font-size:14px;line-height:20px;">
                    <a href="https://support.moo.com/hc/en-gb.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=support_moo_com%285%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                    name="support_moo_com" style="font-family: 'Avenir Next', Avenir, Verdana, Geneva, sans-serif;color:#545454;margin:0;font-weight:400;text-decoration:none;">Help&nbsp;&amp;&nbsp;FAQ</a>
                  </td>
                  <td style="padding-left:24px;padding-right:24px;font-size:14px;line-height:20px;">
                    <a href="https://www.moo.com/us/account/signin.php?return_url=email&spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_account%285%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                    name="www_moo_com_account" style="font-family: 'Avenir Next', Avenir, Verdana, Geneva, sans-serif;color:#545454;margin:0;font-weight:400;text-decoration:none;">Account</a>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- divider with space -->
            <div class="spacerx05" style="line-height:12px;height:12px;">&emsp;</div>
            <table border="0" cellpadding="0" cellspacing="0" class="divider"
            role="presentation" style="width:650px;max-width:100%;margin:0 auto;text-align:center;border-top:1px solid;border-color:rgb(000,000,000);border-color:rgba(000,000,000,0.3); width:590px;height: 25px;">
              <tbody>
                <tr>
                  <td>&nbsp;</td>
                </tr>
              </tbody>
            </table>
            <table align="center" border="0" cellpadding="0" cellspacing="0" class="secondary-frame"
            role="presentation" style="margin:0 auto;text-align:center;background-color:#cac9c9;width:650px;max-width:100%;">
              <tbody>
                <tr>
                  <td>
                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="primary-copy"
                    role="presentation" style="margin:0 auto;text-align:center;width:88%;">
                      <tbody>
                        <tr>
                          <td>&nbsp;&nbsp;</td>
                          <td align="center" style="overflow: visible;" width="500">
                            	<h1 style="margin:0;font-size:48px;line-height:50px;overflow: visible;"><a href="https://www.moo.com/us/products/notebooks.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=headline%282%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb" name="headline" style="font-family:'Bryant MOO Pro', 'Trebuchet MS', Trebuchet, 'Liberation Sans', sans-serif;color:#545454;font-weight: normal;margin:0;text-decoration:none;" target="_blank" >Leave no thought unscribbled </a></h1>

                            <div class="spacer" style="line-height:25px;height:25px;">&emsp;</div>
                            <p style="font-family: 'Avenir Next', Avenir, Verdana, Geneva, sans-serif;color:#545454;margin:0;font-weight:400;text-decoration:none;font-size:18px;line-height:24px;">With MOO Notebooks you&rsquo;re never stuck for a place to jot inspiration. Notes
                              on the go? Try a Softcover Journal.
                              <br />Need more pages? Choose a Hardcover Notebook.
                              <br />Or for BIG ideas, we&rsquo;ve got just the thing&hellip;</p>
                            <div class="spacer"
                            style="line-height:25px;height:25px;">&emsp;</div>
                            <!-- primary button -->
                          </td>
                          <td>&nbsp;&nbsp;</td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
            <table align="center" border="0" cellpadding="0" cellspacing="0" class="secondary-frame"
            role="presentation" style="margin:0 auto;text-align:center;background-color:#cac9c9;width:650px;max-width:100%;">
              <tbody>
                <tr>
                  <td>
                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="primary-copy"
                    role="presentation" style="margin:0 auto;text-align:center;width:88%;">
                      <tbody>
                        <tr>
                          <td>&nbsp;&nbsp;</td>
                          <td align="center" style="overflow: visible;" width="500">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="primary-button"
                            role="presentation" style="width:650px;margin:0 auto;text-align:center;width:auto;max-width:90%;font-size:16px;line-height:21px;background:#FFFFFF;box-shadow:0 2px 2px 0 rgb(48,55,59);box-shadow:0 2px 2px 0 rgba(48,55,59,0.25);border-radius:3px;">
                              <tbody>
                                <tr>
                                  <td style="padding:12px 24px;">
                                    <a href="https://www.moo.com/us/products/notebooks.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=cta%282%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                                    name="cta" style="font-family:'Bryant MOO Pro Medium', 'Trebuchet MS', Trebuchet, 'Liberation Sans', sans-serif;color:#30373B;margin:0;font-weight:400;text-decoration:none; box-shadow: none;"
                                    target="_blank">Shop now</a>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                            <div class="spacer" style="line-height:25px;height:25px;">&emsp;</div>
                          </td>
                          <td>&nbsp;&nbsp;</td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- primary image -->
            <a href="https://www.moo.com/us/products/notebooks.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=image%282%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
            name="image" style="text-decoration:none;" target="_blank">
              <img class="primary-image" src='http://contentz.mkt8924.com/ra/2018/12324/10/2163787/notebook_uk_opt_update.gif'
              style="display: block; border: none; max-width: 100%;" width="650" />
            </a>
            <table align="center" border="0" cellpadding="0" cellspacing="0" class="secondary-frame"
            role="presentation" style="width:100%;max-width:650px;margin:0 auto;text-align:center;background-color:#cac9c9;width:650px;max-width:100%;">
              <tbody>
                <tr>
                  <td>
                    <!-- divider with space -->
                    <div class="spacerx05" style="line-height:25px;height:25px;">&emsp;</div>
                    <table class="secondary-divider" role="presentation" style="margin:0 auto;text-align:center;border-top:1px solid;border-color:rgb(0,0,0); border-color:rgba(0,0,0,0.3);width:590px; max-width:90%; height: 25px;">
                      <tbody>
                        <tr>
                          <td>&emsp;</td>
                        </tr>
                      </tbody>
                    </table>
                    <!-- two columns left-to-right -->
                    <div data-content-region-name="sticker-section">
                      <table align="center" border="0" cellpadding="0" cellspacing="0" class="two-columns"
                      dir="rtl" role="presentation" style="width:100%;max-width:650px;margin:0 auto;text-align:center;width:90%;max-width:590px;">
                        <tbody>
                          <tr>
                            <th class="top" style="width:286px;">
                              <a href="https://www.moo.com/us/products/notebooks/moo-hardcover-notebook.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_products_tailored_%289%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                              name="www_moo_com_products_tailored_" style="text-decoration:none;" target="_blank">
                                <img src='http://contentz.mkt8924.com/ra/2018/12324/10/2163787/CRB-5755-CRM-Module-572x390px-Hard-cover-notebook.jpg_4.jpe'
                                style="display:block;border:none;width: 100%; max-width: 286px;" width="572" />
                              </a>
                            </th>
                            <th class="middle" style="width:18px;">&emsp;</th>
                            <th align="left" class="bottom" dir="ltr" style="width:286px;text-align: left;"
                            valign="top">
                              	<h3 style="font-family:'Bryant MOO Pro', 'Trebuchet MS', Trebuchet, 'Liberation Sans', sans-serif;color:#ffffff;margin:0;font-weight:400;text-decoration:none;font-size:18px;line-height:24px;color:#545454;">Hardcover Notebook</h3>

                              <div class="spacerx05" style="line-height:12px;height:12px;">&emsp;</div>
                              <p style="font-family: Avenir, Verdana, Geneva, sans-serif;color:#ffffff;margin:0;font-weight:400;text-decoration:none;font-size:15px;line-height:21px;color:#545454;">160 pages of Munken Kristall paper, lay-flat design and a tough cover. This one&rsquo;s
                                got it all.</p>
                              <div class="spacerx05" style="line-height:12px;height:12px;">&emsp;</div>
                              <table align="left" border="0" cellpadding="0" cellspacing="0" class="button"
                              style="margin:0 auto;text-align:center;width:auto;max-width:90%;border-radius:3px;font-size:16px;line-height:21px; border: 1px solid rgb(48,55,59); border: 1px solid rgba(48,55,59,0.50); background: rgb(255,255,255); background: rgba(255,255,255,0.15);background-size:cover;">
                                <tbody>
                                  <tr>
                                    <td style="padding:12px 24px">
                                      <a href="https://www.moo.com/us/products/notebooks/moo-hardcover-notebook.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com%2811%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                                      name="www_moo_com" style="font-family:'Bryant MOO Pro Medium', 'Trebuchet MS', Trebuchet, 'Liberation Sans', sans-serif;margin:0;font-weight:400;text-decoration:none;color:#30373b; box-shadow: none;">Shop Hardcover Notebooks</a>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </th>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="secondary-frame"
                    role="presentation" style="width:100%;max-width:650px;margin:0 auto;text-align:center;background-color:#cac9c9;width:650px;max-width:100%;">
                      <tbody>
                        <tr>
                          <td>
                            <!-- divider with space -->
                            <div class="spacerx05" style="line-height:25px;height:25px;">&emsp;</div>
                            <table class="secondary-divider" role="presentation" style="margin:0 auto;text-align:center;border-top:1px solid;border-color:rgb(0,0,0); border-color:rgba(0,0,0,0.3);width:590px; max-width:90%; height: 25px;">
                              <tbody>
                                <tr>
                                  <td>&emsp;</td>
                                </tr>
                              </tbody>
                            </table>
                            <!-- two columns right-to-left -->
                            <div data-content-region-name="sticker-section">
                              <table align="center" border="0" cellpadding="0" cellspacing="0" class="two-columns"
                              dir="ltr" role="presentation" style="width:100%;max-width:650px;margin:0 auto;text-align:center;width:90%;max-width:590px;">
                                <tbody>
                                  <tr>
                                    <th class="top" style="width:286px;">
                                      <a href="https://www.moo.com/us/products/notebooks/softcover-journal.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_products_tail_1%282%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                                      name="www_moo_com_products_tail_1" style="text-decoration:none;" target="_blank">
                                        <img src='http://contentz.mkt8924.com/ra/2018/12324/10/2163787/CRB-5755-CRM-Module-572x390px-Soft-cover-notebook.jpg_4.jpe'
                                        style="display:block;border:none;width: 100%; max-width: 286px;" width="572" />
                                      </a>
                                    </th>
                                    <th class="middle" style="width:18px;">&emsp;</th>
                                    <th align="left" class="bottom" dir="ltr" style="width:286px;text-align: left;"
                                    valign="top">
                                      	<h3 style="font-family:'Bryant MOO Pro', 'Trebuchet MS', Trebuchet, 'Liberation Sans', sans-serif;color:#ffffff;margin:0;font-weight:400;text-decoration:none;font-size:18px;line-height:24px;color:#545454;">Softcover Journal</h3>

                                      <div class="spacerx05" style="line-height:12px;height:12px;">&emsp;</div>
                                      <p style="font-family: Avenir, Verdana, Geneva, sans-serif;color:#ffffff;margin:0;font-weight:400;text-decoration:none;font-size:15px;line-height:21px;color:#545454;">60 pages of Munken Kristall paper, lightweight design and available in dotted,
                                        lined or plain.</p>
                                      <div class="spacerx05" style="line-height:12px;height:12px;">&emsp;</div>
                                      <table align="left" border="0" cellpadding="0" cellspacing="0" class="button"
                                      style="margin:0 auto;text-align:center;width:auto;max-width:90%;border-radius:3px;font-size:16px;line-height:21px; border: 1px solid rgb(48,55,59); border: 1px solid rgba(48,55,59,0.50); background: rgb(255,255,255); background: rgba(255,255,255,0.15);background-size:cover;">
                                        <tbody>
                                          <tr>
                                            <td style="padding:12px 24px">
                                              <a href="https://www.moo.com/us/products/notebooks/softcover-journal.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_1%282%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                                              name="www_moo_com_1" style="font-family:'Bryant MOO Pro Medium', 'Trebuchet MS', Trebuchet, 'Liberation Sans', sans-serif;margin:0;font-weight:400;text-decoration:none;color:#30373b; box-shadow: none;">Shop Softcover Journals</a>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </th>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                            <div class="spacerx05" style="line-height:25px;height:25px;">&emsp;</div>
                            <table class="secondary-divider" role="presentation" style="margin:0 auto;text-align:center;border-top:1px solid;border-color:rgb(0,0,0); border-color:rgba(0,0,0,0.3);width:590px; max-width:90%; height: 25px;">
                              <tbody>
                                <tr>
                                  <td>&emsp;</td>
                                </tr>
                              </tbody>
                            </table>
                            <!-- two columns right-to-left -->
                            <div data-content-region-name="sticker-section">
                              <table align="center" border="0" cellpadding="0" cellspacing="0" class="two-columns"
                              dir="rtl" role="presentation" style="width:100%;max-width:650px;margin:0 auto;text-align:center;width:90%;max-width:590px;">
                                <tbody>
                                  <tr>
                                    <th class="top" style="width:286px;">
                                      <a href="https://www.moo.com/us/products/notebooks/seth-godin-notebook.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_products_tail_2%282%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                                      name="www_moo_com_products_tail_2" style="text-decoration:none;" target="_blank">
                                        <img src='http://contentz.mkt8924.com/ra/2018/12324/10/2163787/CRB-5755-CRM-Module-572x390px-Seth-notebook.jpg'
                                        style="display:block;border:none;width: 100%; max-width: 286px;" width="572" />
                                      </a>
                                    </th>
                                    <th class="middle" style="width:18px;">&emsp;</th>
                                    <th align="left" class="bottom" dir="ltr" style="width:286px;text-align: left;"
                                    valign="top">
                                      	<h3 style="font-family:'Bryant MOO Pro', 'Trebuchet MS', Trebuchet, 'Liberation Sans', sans-serif;color:#ffffff;margin:0;font-weight:400;text-decoration:none;font-size:18px;line-height:24px;color:#545454;">MOO x Seth Godin Notebook</h3>

                                      <div class="spacerx05" style="line-height:12px;height:12px;">&emsp;</div>
                                      <p style="font-family: Avenir, Verdana, Geneva, sans-serif;color:#ffffff;margin:0;font-weight:400;text-decoration:none;font-size:15px;line-height:21px;color:#545454;">Meet Seth Godin&rsquo;s brilliantly simple (and simply brilliant) workbook and
                                        bring your ideas to life.</p>
                                      <div class="spacerx05" style="line-height:12px;height:12px;">&emsp;</div>
                                      <table align="left" border="0" cellpadding="0" cellspacing="0" class="button"
                                      style="margin:0 auto;text-align:center;width:auto;max-width:90%;border-radius:3px;font-size:16px;line-height:21px; border: 1px solid rgb(48,55,59); border: 1px solid rgba(48,55,59,0.50); background: rgb(255,255,255); background: rgba(255,255,255,0.15);background-size:cover;">
                                        <tbody>
                                          <tr>
                                            <td style="padding:12px 24px">
                                              <a href="https://www.moo.com/us/products/notebooks/seth-godin-notebook.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_1_1%282%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                                              name="www_moo_com_1_1" style="font-family:'Bryant MOO Pro Medium', 'Trebuchet MS', Trebuchet, 'Liberation Sans', sans-serif;margin:0;font-weight:400;text-decoration:none;color:#30373b; box-shadow: none;">Shop now</a>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </th>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                            <div class="spacerx05" style="line-height:25px;height:25px;">&emsp;</div>
                            <table class="secondary-divider" role="presentation" style="margin:0 auto;text-align:center;border-top:1px solid;border-color:rgb(0,0,0); border-color:rgba(0,0,0,0.3);width:590px; max-width:90%; height: 25px;">
                              <tbody>
                                <tr>
                                  <td>&emsp;</td>
                                </tr>
                              </tbody>
                            </table>
                            <!-- two columns right-to-left -->
                            <div data-content-region-name="sticker-section">
                              <table align="center" border="0" cellpadding="0" cellspacing="0" class="two-columns"
                              dir="ltr" role="presentation" style="width:100%;max-width:650px;margin:0 auto;text-align:center;width:90%;max-width:590px;">
                                <tbody>
                                  <tr>
                                    <th class="top" style="width:286px;">
                                      <a href="https://www.moo.com/us/products/notebooks/custom-notebook.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_products_tail_3%282%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                                      name="www_moo_com_products_tail_3" style="text-decoration:none;" target="_blank">
                                        <img src='http://contentz.mkt8924.com/ra/2018/12324/10/2163787/CRB-5755-CRM-Module-572x390px-custom-notebooks.jpg'
                                        style="display:block;border:none;width: 100%; max-width: 286px;" width="572" />
                                      </a>
                                    </th>
                                    <th class="middle" style="width:18px;">&emsp;</th>
                                    <th align="left" class="bottom" dir="ltr" style="width:286px;text-align: left;"
                                    valign="top">
                                      	<h3 style="font-family:'Bryant MOO Pro', 'Trebuchet MS', Trebuchet, 'Liberation Sans', sans-serif;color:#ffffff;margin:0;font-weight:400;text-decoration:none;font-size:18px;line-height:24px;color:#545454;">Custom Notebooks</h3>

                                      <div class="spacerx05" style="line-height:12px;height:12px;">&emsp;</div>
                                      <p style="font-family: Avenir, Verdana, Geneva, sans-serif;color:#ffffff;margin:0;font-weight:400;text-decoration:none;font-size:15px;line-height:21px;color:#545454;">Want your own unique Notebooks? For orders of 50+ you can add your brand&rsquo;s
                                        name, logo and imagery.</p>
                                      <div class="spacerx05" style="line-height:12px;height:12px;">&emsp;</div>
                                      <table align="left" border="0" cellpadding="0" cellspacing="0" class="button"
                                      style="margin:0 auto;text-align:center;width:auto;max-width:90%;border-radius:3px;font-size:16px;line-height:21px; border: 1px solid rgb(48,55,59); border: 1px solid rgba(48,55,59,0.50); background: rgb(255,255,255); background: rgba(255,255,255,0.15);background-size:cover;">
                                        <tbody>
                                          <tr>
                                            <td style="padding:12px 24px">
                                              <a href="https://www.moo.com/us/products/notebooks/custom-notebook.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_1_2%282%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                                              name="www_moo_com_1_2" style="font-family:'Bryant MOO Pro Medium', 'Trebuchet MS', Trebuchet, 'Liberation Sans', sans-serif;margin:0;font-weight:400;text-decoration:none;color:#30373b; box-shadow: none;">Find out more</a>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </th>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                            <div class="spacerx05" style="line-height:25px;height:25px;">&emsp;</div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </table>
      <table align="center" border="0" cellpadding="0" cellspacing="0" class="frame"
      role="presentation" style="margin:0 auto;text-align:center;width:650px;max-width:100%;">
        <tr>
          <td align="center">
            <table align="center" border="0" cellpadding="0" cellspacing="0" class="social"
            style="margin:0 auto;text-align:center;width:385px;max-width:90%;">
              <tbody>
                <div class="spacer" style="line-height:25px;height:25px;">&emsp;</div>
                <tr>
                  <td>
                    <a href="https://twitter.com/moo" name="www_twitter_com_moo" style="text-decoration:none;">
                      <img alt="" height="37" src='http://contentz.mkt8924.com/ra/2018/12324/10/2163787/twitter.png_3.png'
                      style="display:block;border:none;margin:0;vertical-align:top;display:inline-block !important;"
                      width="37" />
                    </a>
                  </td>
                  <td>
                    <a href="https://www.instagram.com/moo/" name="www_instagram_com_moo" style="text-decoration:none;">
                      <img alt="" height="37" src='http://contentz.mkt8924.com/ra/2018/12324/10/2163787/instagram.png_3.png'
                      style="display:block;border:none;margin:0;vertical-align:top;display:inline-block !important;"
                      width="37" />
                    </a>
                  </td>
                  <td>
                    <a href="https://www.pinterest.com/moo/" name="www_pinterest_com_moo" style="text-decoration:none;">
                      <img alt="" height="37" src='http://contentz.mkt8924.com/ra/2018/12324/10/2163787/pinterest.png_3.png'
                      style="display:block;border:none;margin:0;vertical-align:top;display:inline-block !important;"
                      width="37" />
                    </a>
                  </td>
                  <td>
                    <a href="https://www.facebook.com/moo" name="www_facebook_com_moo" style="text-decoration:none;">
                      <img alt="" height="37" src='http://contentz.mkt8924.com/ra/2018/12324/10/2163787/facebook.png_3.png'
                      style="display:block;border:none;margin:0;vertical-align:top;display:inline-block !important;"
                      width="37" />
                    </a>
                  </td>
                  <td>
                    <a href="https://www.linkedin.com/company/moo-com" name="www_linkedin_com_company_moo_c"
                    style="text-decoration:none;">
                      <img alt="" height="37" src='http://contentz.mkt8924.com/ra/2018/12324/10/2163787/linkedin.png_3.png'
                      style="display:block;border:none;margin:0;vertical-align:top;display:inline-block !important;"
                      width="37" />
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="spacerx05" style="line-height:26px;height:26px;">&emsp;</div>
            <table align="center" border="0" cellpadding="0" cellspacing="0" class="footer-links"
            style="margin:0 auto;text-align:center; width:590px;max-width:90%;">
              <tbody>
                <tr>
                  <td>
                    <p style="font-family: 'Avenir Next', Avenir, Verdana, Geneva, sans-serif;color:#ffffff;margin:0;font-weight:400;text-decoration:none;font-size:12px;line-height:21px;color:#757578;">
                      <a href="https://www.moo.com/us/unsubscribe.php?q=a596e674-56d9-4d87-b9fd-4ee549766b24"
                      name="unsubscribe" style="text-decoration:none;color:#017449;" target="_blank">Unsubscribe</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                      <a href="http://links.mooprint.mkt8924.com/servlet/MailView?ms=MjE2Mzc4NwS2&r=OTIwNzQ2MDYyNzQS1&j=NjQwMTMzMjExS0&mt=2&rj=NjQwMTMzMjExS0&rt=0"
                      name="view_online" style="text-decoration:none;color:#017449;" target="_blank"
                      xt="SPCLICKTOVIEW">View online</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                      <a href="https://www.moo.com/us/about/privacy-policy.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_about_privacy_poli%285%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                      name="www_moo_com_about_privacy_poli" style="text-decoration:none;color:#017449;">Privacy policy</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                      <a href="https://www.moo.com/us/refer.html?spJobID=640133211&spMailingID=2163787&spReportId=NjQwMTMzMjExS0&spUserID=OTIwNzQ2MDYyNzQS1&utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&utm_content=www_moo_com_refer_html%285%29&utm_medium=email&utm_source=ibm&viqc=US&viqsrc=email.ibm.promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb"
                      name="www_moo_com_refer_html" style="text-decoration:none;color:#017449;">Refer&nbsp;a&nbsp;friend</a>
                    </p>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- divider with space -->
            <div class="spacerx05" style="line-height:26px;height:26px;">&emsp;</div>
            <table border="0" cellpadding="0" cellspacing="0" class="footer-divider"
            role="presentation" style="max-width:100%;margin:0 auto;text-align:center;border-top:1px solid #f1f1f1;width:590px;height: 10px;">
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table>
            <table align="center" border="0" cellpadding="0" cellspacing="0" class="address"
            style="margin:0 auto;text-align:center;max-width:90%;vertical-align:middle !important;">
              <tbody>
                <tr>
                  <td style="vertical-align: top;">
                    <img alt="" height="21" src='http://contentz.mkt8924.com/ra/2018/12324/10/2163787/logo_moo_mark3.png'
                    style="display:block;border:none;" width="14" />
                  </td>
                  <td width="10">&emsp;</td>
                  <td>
                    <p style="font-family: 'Avenir Next', Avenir, Verdana, Geneva, sans-serif;color:#ffffff;margin:0;font-weight:400;text-decoration:none;font-size:12px;line-height:21px;color:#757578;text-align:center;">&copy; MOO Inc. 14 Blackstone Valley Place, Lincoln, RI 02865, USA</p>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </table>
      <img alt="" src="https://t.myvisualiq.net/impression_pixel?r=20181004&et=i&ago=212&ao=835&aca=-11&si=-11&ci=-11&pi=-11&ad=-11&advt=-11&chnl=-11&vndr=1371&sz=6145&u=utm_source=ibm&#124;utm_medium=email&#124;utm_campaign=promo-20181004-notebook_family-launch-engaged_15pcntbc-none-us_ca-nb&#124;utm_content=%%LINK_NAME%%&pt=i"
      />
      <img src="https://t.myvisualiq.net/impression_pixel?r=20181004&et=i&ago=212&ao=835&aca=-19&si=-19&ci=-19&pi=-19&ad=-19&advt=-19&chnl=-19&vndr=1446&sz=6055&u=Eid_a596e674-56d9-4d87-b9fd-4ee549766b24&pt=i">
      <div class="spacerx05" style="line-height:12px;height:12px;">&emsp;</div>
      <IMG src="http://links.mooprint.mkt8924.com/open/log/2163787/OTIwNzQ2MDYyNzQS1/0/NjQwMTMzMjExS0/1/0">
  </body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console