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.

            
              <head>
  <meta charset="UTF-8">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>1973 Ltd</title>
  <style>
    /* Web Fonts */

    @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');

    /* Element selectors */

    body {
      width: 100% !important;
      -webkit-text-size-adjust: none;
      -ms-text-size-adjust: none;
      margin: 0;
      padding: 0;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      font-family: 'Lato', Helvetica, Arial, sans-serif;
    }

    img {
      outline: none;
      text-decoration: none;
      border: none;
      display: block;
      -ms-interpolation-mode: bicubic;
    }

    sup {
      line-height: 0;
    }

    a {
      text-decoration: none
    }

    /* Apple Link colour fix/Outlook visited link fix */

    .appleLinksFooter a {
      color: #b1b6cb;
      text-decoration: none
    }

    .appleLinksWhite a {
      color: #ffffff !important;
      text-decoration: none !important
    }

    span.MsoHyperlink {
      mso-style-priority: 99;
      color: inherit;
    }

    span.MsoHyperlinkFollowed {
      mso-style-priority: 99;
      color: inherit;
    }

    /*This resolves the Outlook 07, 10, and Gmail td padding issue fix*/

    table,
    table td {
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }

    /* CSS effects - https://codepen.io/phenax/pen/vOoOWK */

    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      .rollover {
        overflow: hidden;
        position: relative;
        color: #fff;
        transition: all 0.6s
      }
      .rollover .insider {
        background-color: #eee;
        width: 100%;
        height: 20px;
        position: absolute;
        left: -220px;
        transform: rotateZ(45deg);
        -webkit-transform: rotateZ(45deg);
        -moz-transform: rotateZ(45deg);
        -o-transform: rotateZ(45deg);
        -ms-transform: rotateZ(45deg);
      }
      .rollover:hover {
        background-color: #3e9632 !important;
        color: #fff;
      }
      .rollover:hover .insider {
        transition: all 0.6s ease;
        -webkit-transition: all 0.6s ease;
        -moz-transition: all 0.6s ease;
        -o-transition: all 0.6s ease;
        -ms-transition: all 0.6s ease;
        left: 220px;
      }
    }

    /* Rollover effects */

    .rollover:hover {
      background-color: #2387c6 !important;
      color: #ffffff !important
    }

    .rollover a:hover {
      color: #ffffff !important
    }

    .hover-footer:hover,
    .hover-footer:active {
      color: #2387c6 !important;
      text-decoration: underline !important;
    }

    .social-hover {
      opacity: 1;
      transition: all 0.3s
    }

    .social-hover:hover {
      opacity: 0;
    }

    /* ANDROID CENTER FIX */

    div[style*="margin: 16px 0;"] {
      margin: 0 !important;
    }

    .new-gmail-hack {
      display: block;
    }

    /* Default Mobile Stuff */

    @media screen and (max-width: 600px) {

      /* Gmail Fixes */
      .header-fix {
        width: 100% !important;
        min-width: 320px !important;
      }
      u~div {
        min-width: 100vw;
      }
    }

    @media screen and (max-width: 576px) {

      /* Display */
      .mob-hide,
      .pixel-mob-hide {
        display: none !important
      }
      .mob-show {
        display: block !important
      }
      .remove-bg {
        background-image: none !important;
        height: auto !important
      }

      /* Widths */
      .w-100,
      .social-mob {
        width: 100% !important;
        max-width: 576px !important;
        float: none !important
      }
      .w-30 {
        width: 30px !important
      }
      .mob-img-100 img {
        width: 100% !important;
        height: auto !important;
      }

      /* Mobile Cols - Layout Classes */
      .col-1 {
        width: 8.333333% !important
      }
      .col-2 {
        width: 16.666667% !important
      }
      .col-3 {
        width: 25% !important
      }
      .col-4 {
        width: 33.333333% !important
      }
      .col-5 {
        width: 41.666667% !important
      }
      .col-6 {
        width: 50% !important
      }
      .col-7 {
        width: 58.333333% !important
      }
      .col-8 {
        width: 66.666667% !important
      }
      .col-9 {
        width: 75% !important
      }
      .col-10 {
        width: 83.333333% !important
      }
      .col-11 {
        width: 91.666667% !important
      }
      .col-12 {
        width: 100% !important;
        float: none !important;
      }
    }

    /* Bespoke Mobile Stuff */

    @media screen and (max-width: 576px) {

      .no-gutters {
        padding: 0px !important
      }
      .mob-line {
        padding-top: 30px !important;
        border-top: 2px solid #e55353;
      }
      .w-15 {
        width: 15px !important
      }

      .w-75 {
        width: 75px !important
      }
      .story-pad {
        padding: 20px 15px 30px !important
      }
      .f-14 {
        font-size: 14px !important;
        line-height: 21px !important
      }

      .h-43 {
        height: 43px !important
      }
      .head-pad {
        padding: 30px 0px !important
      }
      .w-200 {
        width: 200px !important
      }

      /* Footer */
      .text-left {
        text-align: left !important
      }
      .align-left {
        float: left !important
      }
      .mt-30 {
        margin-top: 30px !important
      }
      .h-30 {
        height: 30px !important
      }

    }
  </style>

  <!--[if mso]>
<style>
table, td, div, a, font {
        font-family: Arial, sans-serif;
}
</style>
<![endif]-->

  <!--[if gte mso 9]>
      <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
      </xml>
<![endif]-->
</head>

<body>
  <div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;" align="center">Check out our spanking new brand and website. Get the lowdown with our latest blogs…</div>

  <div>
    <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#272b43" style="background: #272b43 no-repeat 100% 100%; background-image: linear-gradient(180deg,#272b43 0,#272b43 15%,#e55353 45%,#e55353 99%,#ffffff);">
      <tbody>
        <tr>
          <td>

            <table cellpadding="0" cellspacing="0" border="0" width="100%">
              <tbody>
                <tr>
                  <td style="font-size: 0px">&nbsp;</td>
                  <td width="600" style="padding: 30px 0px 60px" class="head-pad">

                    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="header-fix" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px; width: 600px; min-width:600px">
                      <tbody>
                        <tr>
                          <td width="40" class="w-15">&nbsp;</td>
                          <td align="center">

                            <table width="100" border="0" cellspacing="0" cellpadding="0" align="left" class="w-75">
                              <tbody>
                                <tr>
                                  <td class="h-43" align="left"><a href="https://1973ltd.com/" target="_blank"><img src="http://i1.cmail20.com/ei/j/E6/3D1/253/213800/images/1973-logo.png" width="98" alt="1973 LTD" class="w-75" style="display: block"></a></td>
                                </tr>
                              </tbody>
                            </table>

                            <table width="320" border="0" cellspacing="0" cellpadding="0" align="right" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #ffffff; letter-spacing: 0.45px;" class="f-14 w-200">
                              <tbody>
                                <tr>
                                  <td align="right" height="48" style="color: #ffffff; font-weight: 400" class="h-43">Newsletter<span style="display: none; font-size: 1px; line-height: 1px" class="mob-show">&nbsp;</span><span class="mob-hide"> — </span>May&nbsp;2018</td>
                                </tr>
                              </tbody>
                            </table>

                          </td>
                          <td width="40" class="w-15">&nbsp;</td>
                        </tr>
                      </tbody>
                    </table>

                  </td>
                  <td style="font-size: 0px">&nbsp;</td>
                </tr>
              </tbody>
            </table>

          </td>
        </tr>
        <tr>
          <td>

            <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
              <tbody>
                <tr>
                  <td>

                    <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
                      <tbody>
                        <tr>
                          <td style="font-size: 0px">&nbsp;</td>
                          <td width="600" align="center" valign="middle" style="width: 600px">

                            <table cellpadding="0" cellspacing="0" border="0" width="540" role="presentation" align="center" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px; width: 540px" class="col-12">
                              <tbody>
                                <tr>
                                  <td align="left" style="padding: 0px 15px">

                                    <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 36px; line-height: 43px; color: #ffffff; letter-spacing: 0.45px;">
                                      <tbody>
                                        <tr>
                                          <td width="180" valign="top" class="mob-hide">

                                            <table width="165" border="0" cellspacing="0" cellpadding="0" align="left">
                                              <tbody>
                                                <tr>
                                                  <td height="20" style="height: 20px; line-height: 20px; font-size: 0px">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                  <td height="2" style="height: 2px; line-height: 2px; font-size: 0px" bgcolor="#e55353">&nbsp;</td>
                                                </tr>
                                              </tbody>
                                            </table>

                                          </td>
                                          <td align="left" style="color: #ffffff; font-weight: 300" class="mob-line">Hello Smiles Davis</td>
                                        </tr>
                                      </tbody>
                                    </table>

                                    <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #ffffff; letter-spacing: 0.45px;">
                                      <tbody>
                                        <tr>
                                          <td width="180" class="mob-hide">&nbsp;</td>
                                          <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td class="mob-hide">&nbsp;</td>
                                          <td align="left" style="color: #ffffff; font-weight: 300">It’s been a while since we last connected, but for good reason! We’ve been really busy in the background working on our rebrand. Get up to speed in this selection of our latest blogs. And please remember to tell
                                            us what you think…</td>
                                        </tr>
                                        <tr>
                                          <td class="mob-hide">&nbsp;</td>
                                          <td align="left" style="color: #ffffff; font-weight: 400"><br>
                                            <a href="https://1973ltd.com/" target="_blank" style="text-decoration: underline; color: #63b1e3">1973ltd.com</a></td>
                                        </tr>
                                        <tr>
                                          <td class="mob-hide">&nbsp;</td>
                                          <td height="60">&nbsp;</td>
                                        </tr>
                                      </tbody>
                                    </table>

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

                          </td>
                          <td style="font-size: 0px">&nbsp;</td>
                        </tr>
                      </tbody>
                    </table>

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

          </td>
        </tr>
        <tr>
          <td>

            <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
              <tbody>
                <tr>
                  <td>

                    <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
                      <tbody>
                        <tr>
                          <td style="font-size: 0px" class="mob-hide">&nbsp;</td>
                          <td width="600" align="center" valign="middle" style="width: 600px">

                            <table cellpadding="0" cellspacing="0" border="0" width="540" role="presentation" align="center" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px; width: 540px" class="col-12">
                              <tbody>
                                <tr>
                                  <td align="left" style="padding: 0px 15px" class="no-gutters">

                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px; box-shadow: 0 8px 38px 0 rgba(22,24,38,.5)">
                                      <tbody>
                                        <tr>
                                          <td class="mob-img-100" style="font-size: 0px; line-height: 0px"><a href="https://1973ltd.com/blog/1973-rebrand/" target="_blank"><img src="http://i2.cmail20.com/ei/j/E6/3D1/253/213800/images/article1-img.jpg" width="510" alt="" style="display: block"></a></td>
                                        </tr>
                                        <tr>
                                          <td bgcolor="#ffffff">

                                            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
                                              <tbody>
                                                <tr>
                                                  <td style="padding: 30px 30px 45px" class="story-pad">

                                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
                                                      <tbody>
                                                        <tr>
                                                          <td align="left" style="font-size: 24px; line-height: 31px; color: #272b43;"><a href="https://1973ltd.com/blog/1973-rebrand/" target="_blank" style="color: #272b43">1973 Rebrand</a></td>
                                                        </tr>
                                                        <tr>
                                                          <td height="15" style="height: 15px; line-height: 15px;">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                          <td align="left" style="font-size: 14px; line-height: 21px; color: #272b43; text-transform: uppercase; letter-spacing: 2.8000000000000003px">Blog post by Nick</td>
                                                        </tr>
                                                        <tr>
                                                          <td height="15" style="height: 15px; line-height: 15px;">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                          <td align="left" style="color: #272b43; font-weight: 300">We’re delighted with our new brand so thought we’d share a little insight. Get the lowdown from the designer himself on our new logo, new look and why we felt the need for a change.</td>
                                                        </tr>
                                                        <tr>
                                                          <td height="15" style="height: 15px; line-height: 15px;">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                          <td>

                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                              <tbody>
                                                                <tr>
                                                                  <td>
                                                                    <table border="0" cellspacing="0" cellpadding="0">
                                                                      <tbody>
                                                                        <tr>
                                                                          <td align="center" class="rollover" style="font-family: 'Lato', Helvetica, Arial, sans-serif"><a href="https://1973ltd.com/blog/1973-rebrand/" target="_blank" style="font-size: 14px; line-height: 21px; color: #2387c6; text-decoration: none; padding: 7px 16px 9px; border: 2px solid #2387c6; display: inline-block; width: 225px; box-sizing: border-box"><!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->Branding by Nick<!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--></a></td>
                                                                        </tr>
                                                                      </tbody>
                                                                    </table>
                                                                  </td>
                                                                </tr>
                                                              </tbody>
                                                            </table>

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

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

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

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

                          </td>
                          <td style="font-size: 0px" class="mob-hide">&nbsp;</td>
                        </tr>
                      </tbody>
                    </table>

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

          </td>
        </tr>
        <tr>
          <td height="60">&nbsp;</td>
        </tr>
        <tr>
          <td>

            <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
              <tbody>
                <tr>
                  <td>

                    <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
                      <tbody>
                        <tr>
                          <td style="font-size: 0px" class="mob-hide">&nbsp;</td>
                          <td width="600" align="center" valign="middle" style="width: 600px">

                            <table cellpadding="0" cellspacing="0" border="0" width="540" role="presentation" align="center" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px; width: 540px" class="col-12">
                              <tbody>
                                <tr>
                                  <td align="left" style="padding: 0px 15px" class="no-gutters">

                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px; box-shadow: 0 8px 38px 0 rgba(22,24,38,.5)">
                                      <tbody>
                                        <tr>
                                          <td class="mob-img-100" style="line-height: 0px; font-size: 0px"><a href="https://1973ltd.com/blog/copywriting/" target="_blank"><img src="http://i3.cmail20.com/ei/j/E6/3D1/253/213800/images/article2-img.jpg" width="510" alt="" style="display: block"></a></td>
                                        </tr>
                                        <tr>
                                          <td bgcolor="#e4e7f3">

                                            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
                                              <tbody>
                                                <tr>
                                                  <td style="padding: 30px 30px 45px" class="story-pad">

                                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
                                                      <tbody>
                                                        <tr>
                                                          <td align="left" style="font-size: 24px; line-height: 31px; color: #272b43;"><a href="https://1973ltd.com/blog/copywriting/" target="_blank" style="color: #272b43">Copywriting: We all have a book inside us</a></td>
                                                        </tr>
                                                        <tr>
                                                          <td height="15" style="height: 15px; line-height: 15px;">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                          <td align="left" style="font-size: 14px; line-height: 21px; color: #272b43; text-transform: uppercase; letter-spacing: 2.8000000000000003px">Blog post by Jamie</td>
                                                        </tr>
                                                        <tr>
                                                          <td height="15" style="height: 15px; line-height: 15px;">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                          <td align="left" style="color: #272b43; font-weight: 300">It’s not all about design - messaging and relevance are important too! All too often people focus on design over copy, however, this shouldn't be the case.</td>
                                                        </tr>
                                                        <tr>
                                                          <td height="15" style="height: 15px; line-height: 15px;">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                          <td>

                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                              <tbody>
                                                                <tr>
                                                                  <td>
                                                                    <table border="0" cellspacing="0" cellpadding="0">
                                                                      <tbody>
                                                                        <tr>
                                                                          <td align="center" class="rollover" style="font-family: 'Lato', Helvetica, Arial, sans-serif"><a href="https://1973ltd.com/blog/copywriting/" target="_blank" style="font-size: 14px; line-height: 21px; color: #2387c6; text-decoration: none; padding: 7px 16px 9px; border: 2px solid #2387c6; display: inline-block; width: 225px; box-sizing: border-box"><!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->Jamie explains more<!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--></a></td>
                                                                        </tr>
                                                                      </tbody>
                                                                    </table>
                                                                  </td>
                                                                </tr>
                                                              </tbody>
                                                            </table>

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

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

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

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

                          </td>
                          <td style="font-size: 0px" class="mob-hide">&nbsp;</td>
                        </tr>
                      </tbody>
                    </table>

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

          </td>
        </tr>
        <tr>
          <td height="60">&nbsp;</td>
        </tr>
        <tr>
          <td>

            <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
              <tbody>
                <tr>
                  <td>

                    <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
                      <tbody>
                        <tr>
                          <td style="font-size: 0px" class="mob-hide">&nbsp;</td>
                          <td width="600" align="center" valign="middle" style="width: 600px">

                            <table cellpadding="0" cellspacing="0" border="0" width="540" role="presentation" align="center" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px; width: 540px" class="col-12">
                              <tbody>
                                <tr>
                                  <td align="left" style="padding: 0px 15px" class="no-gutters">

                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px; box-shadow: 0 8px 38px 0 rgba(22,24,38,.5)">
                                      <tbody>
                                        <tr>
                                          <td class="mob-img-100" style="font-size: 0px; line-height: 0px"><a href="https://1973ltd.com/blog/more-than-just-a-one-hit-wonder/" target="_blank"><img src="http://i4.cmail20.com/ei/j/E6/3D1/253/213800/images/article3-img.gif" width="510" alt="" style="display: block"></a></td>
                                        </tr>
                                        <tr>
                                          <td bgcolor="#ffffff">

                                            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
                                              <tbody>
                                                <tr>
                                                  <td style="padding: 30px 30px 45px" class="story-pad">

                                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
                                                      <tbody>
                                                        <tr>
                                                          <td align="left" style="font-size: 24px; line-height: 31px; color: #272b43;"><a href="https://1973ltd.com/blog/more-than-just-a-one-hit-wonder/" target="_blank" style="color: #272b43">More than just a one hit wonder…</a></td>
                                                        </tr>
                                                        <tr>
                                                          <td height="15" style="height: 15px; line-height: 15px;">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                          <td align="left" style="font-size: 14px; line-height: 21px; color: #272b43; text-transform: uppercase; letter-spacing: 2.8000000000000003px">Blog post by Tom</td>
                                                        </tr>
                                                        <tr>
                                                          <td height="15" style="height: 15px; line-height: 15px;">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                          <td align="left" style="color: #272b43">
                                                            <font style="font-weight: 300">Well it may not be Christmas now, but we still have good reason to celebrate. In a quest to find the best email design in 2017,</font> EmailMonks ranked ours in the top ten.</td>
                                                        </tr>
                                                        <tr>
                                                          <td height="15" style="height: 15px; line-height: 15px;">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                          <td>

                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                              <tbody>
                                                                <tr>
                                                                  <td>
                                                                    <table border="0" cellspacing="0" cellpadding="0">
                                                                      <tbody>
                                                                        <tr>
                                                                          <td align="center" class="rollover" style="font-family: 'Lato', Helvetica, Arial, sans-serif;"><a href="https://1973ltd.com/blog/more-than-just-a-one-hit-wonder/" target="_blank" style="font-size: 14px; line-height: 21px; color: #2387c6; text-decoration: none; padding: 7px 16px 9px; display: inline-block; border: 2px solid #2387c6; width: 225px; box-sizing: border-box"><!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->Take a peek here<!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--></a></td>
                                                                        </tr>
                                                                      </tbody>
                                                                    </table>
                                                                  </td>
                                                                </tr>
                                                              </tbody>
                                                            </table>

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

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

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

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

                          </td>
                          <td style="font-size: 0px" class="mob-hide">&nbsp;</td>
                        </tr>
                      </tbody>
                    </table>

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

          </td>
        </tr>
        <tr>
          <td height="60">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#ffffff">

            <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
              <tbody>
                <tr>
                  <td>

                    <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
                      <tbody>
                        <tr>
                          <td style="font-size: 0px">&nbsp;</td>
                          <td width="600" align="center" valign="middle" style="width: 600px">

                            <table cellpadding="0" cellspacing="0" border="0" width="540" role="presentation" align="center" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px; width: 540px" class="col-12">
                              <tbody>
                                <tr>
                                  <td align="left" style="padding: 0px 15px">

                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;">
                                      <tbody>
                                        <tr>
                                          <td height="30">&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td>

                                            <table width="250" border="0" cellspacing="0" cellpadding="0" align="left" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;" class="col-12">
                                              <tbody>
                                                <tr>
                                                  <td style="color: #272b43">1973 Ltd</td>
                                                </tr>
                                                <tr>
                                                  <td height="8" style="height: 8px; line-height: 8px; font-size: 0px">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                  <td align="left" style="font-size: 14px; line-height: 21px; color: #272b43"><a href="http://tel:+44 (0)1865 893 311" style="color: #272b43; text-decoration: none" target="_blank">+44 (0)1865 893 311</a><br>
                                                    <a href="mailto:hello@1973ltd.com" style="color: #272b43; text-decoration: none" class="hover-footer" target="_blank">hello@1973ltd.com</a></td>
                                                </tr>
                                              </tbody>
                                            </table>

                                            <table width="250" border="0" cellspacing="0" cellpadding="0" align="right" style="font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; color: #272b43; letter-spacing: 0.45px;" class="col-12 mt-30">
                                              <tbody>
                                                <tr>
                                                  <td align="right" style="color: #272b43" class="text-left">Follow us</td>
                                                </tr>
                                                <tr>
                                                  <td height="8" style="height: 8px; line-height: 8px; font-size: 0px">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                  <td>

                                                    <table border="0" cellspacing="0" cellpadding="0" align="right" class="align-left">
                                                      <tbody>
                                                        <tr>
                                                          <td align="left" valign="top" width="33" height="33" style="font-size: 0px; line-height: 0px; background: url(http://i5.cmail20.com/ei/j/E6/3D1/253/213800/images/linked-logo-ovr.png) no-repeat left top"><a href="https://www.linkedin.com/company/1973-ltd/" target="_blank"><img src="http://i6.cmail20.com/ei/j/E6/3D1/253/213800/images/linked-logo.png" width="32" alt="L" class="social-hover"></a></td>
                                                          <td width="12">&nbsp;</td>
                                                          <td align="left" valign="top" width="33" height="33" style="font-size: 0px; line-height: 0px; background: url(http://i7.cmail20.com/ei/j/E6/3D1/253/213800/images/insta-logo-ovr.png) no-repeat left top"><a href="https://www.instagram.com/1973online/" target="_blank"><img src="http://i8.cmail20.com/ei/j/E6/3D1/253/213800/images/insta-logo.png" width="32" alt="I" class="social-hover"></a></td>
                                                          <td width="12">&nbsp;</td>
                                                          <td align="left" valign="top" width="33" height="33" style="font-size: 0px; line-height: 0px; background: url(http://i9.cmail20.com/ei/j/E6/3D1/253/213800/images/twitter-logo-ovr.png) no-repeat left top"><a href="https://twitter.com/1973online" target="_blank"><img src="http://i10.cmail20.com/ei/j/E6/3D1/253/213800/images/twitter-logo.png" width="32" alt="T" class="social-hover"></a></td>
                                                        </tr>
                                                      </tbody>
                                                    </table>

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

                                          </td>
                                        </tr>
                                        <tr>
                                          <td height="45" class="h-30">&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td height="1" style="height: 1px; line-height: 1px; font-size: 0px" bgcolor="#b1b6cb">&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td height="15" style="height: 15px; line-height: 15px; font-size: 0px">&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td align="left" style="font-size: 14px; line-height: 21px; color: #b1b6cb; font-weight: 400" class="appleLinksFooter">© 2018 - 1973 Ltd &nbsp; | &nbsp; <a href="#" target="_blank" style="color: #b1b6cb; text-decoration: none" class="hover-footer">View&nbsp;online</a>                                            &nbsp; | &nbsp; <a href="#" target="_blank" style="color: #b1b6cb; text-decoration: none" class="hover-footer">Unsubscribe</a> &nbsp; | &nbsp; <a href="https://1973ltd.com/wp-content/uploads/2018/05/1973ltd-privacypolicy-may2018.pdf"
                                              target="_blank" style="color: #b1b6cb; text-decoration: none" class="hover-footer">Privacy&nbsp;Notice</a><br> Company No. 05170383. Registered in England at Hampden&nbsp;House, <br class="mob-hide"> Monument&nbsp;Park,
                                            Chalgrove, Oxfordshire, England, OX44&nbsp;7RW</td>
                                        </tr>
                                        <tr>
                                          <td height="20" style="height: 20px; line-height: 20px; font-size: 0px">&nbsp;</td>
                                        </tr>
                                      </tbody>
                                    </table>

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

                          </td>
                          <td style="font-size: 0px">&nbsp;</td>
                        </tr>
                      </tbody>
                    </table>

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

          </td>
        </tr>
      </tbody>
    </table>
    <section>
      <div id="new-gmail-hack" style="white-space: nowrap; font: 15px courier; line-height: 0; display: none;">
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      </div>
    </section>

  </div>

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

Console