Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

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

Add External Scripts/Pens

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

+ add another resource

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title></title>
  <style type="text/css">
    /* CLIENT SPECIFIC STYLES */

    #outlook a {
      padding: 0;
    }

    .ReadMsgBody {
      width: 100%;
    }

    .ExternalClass {
      width: 100%;
    }

    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div {
      line-height: 100%;
    }

    body,
    table,
    td,
    a {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }

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

    img {
      -ms-interpolation-mode: bicubic;
    }

    body {
      margin: 0;
      padding: 0;
    }

    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
    }

    table {
      border-collapse: collapse !important;
    }

    body {
      height: 100% !important;
      margin: 0;
      padding: 0;
      width: 100% !important;
    }

    table {
      border-collapse: collapse;
      margin: 0px auto;
    }

    .container {
      min-width: 0 !important
    }

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

    /* WEB FONTS */

    @import url("//hello.myfonts.net/count/2d9b47.css");


    @font-face {
      font-family: 'Museo Sans';
      src: url('http://cdn.harrys.com/email/webfonts/2D9B47_0_0.eot');
      src: url('http://cdn.harrys.com/email/webfonts/2D9B47_0_0.eot?#iefix') format('embedded-opentype'), url('http://cdn.harrys.com/email/webfonts/2D9B47_0_0.woff2') format('woff2'), url('http://cdn.harrys.com/email/webfonts/2D9B47_0_0.woff') format('woff'), url('http://cdn.harrys.com/email/webfonts/2D9B47_0_0.ttf') format('truetype');
      font-weight: bold;
      font-style: normal;
    }

    @font-face {
      font-family: 'Museo Sans';
      src: url('http://cdn.harrys.com/email/webfonts/2D9B47_1_0.eot');
      src: url('http://cdn.harrys.com/email/webfonts/2D9B47_1_0.eot?#iefix') format('embedded-opentype'), url('http://cdn.harrys.com/email/webfonts/2D9B47_1_0.woff2') format('woff2'), url('http://cdn.harrys.com/email/webfonts/2D9B47_1_0.woff') format('woff'), url('http://cdn.harrys.com/email/webfonts/2D9B47_1_0.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'Museo Sans';
      src: url('http://cdn.harrys.com/email/webfonts/2D9B47_2_0.eot');
      src: url('http://cdn.harrys.com/email/webfonts/2D9B47_2_0.eot?#iefix') format('embedded-opentype'), url('http://cdn.harrys.com/email/webfonts/2D9B47_2_0.woff2') format('woff2'), url('http://cdn.harrys.com/email/webfonts/2D9B47_2_0.woff') format('woff'), url('http://cdn.harrys.com/email/webfonts/2D9B47_2_0.ttf') format('truetype');
      font-weight: bold;
      font-style: italic;
    }

    @font-face {
      font-family: 'Museo Sans';
      src: url('http://cdn.harrys.com/email/webfonts/2D9B47_3_0.eot');
      src: url('http://cdn.harrys.com/email/webfonts/2D9B47_3_0.eot?#iefix') format('embedded-opentype'), url('http://cdn.harrys.com/email/webfonts/2D9B47_3_0.woff2') format('woff2'), url('http://cdn.harrys.com/email/webfonts/2D9B47_3_0.woff') format('woff'), url('http://cdn.harrys.com/email/webfonts/2D9B47_3_0.ttf') format('truetype');
      font-weight: normal;
      font-style: italic;
    }

    @font-face {
      font-family: 'Brandon Grotesque';
      src: url('http://cdn.harrys.com/email/webfonts/3083F9_2_0.eot');
      src: url('http://cdn.harrys.com/email/webfonts/3083F9_2_0.eot?#iefix') format('embedded-opentype'), url('http://cdn.harrys.com/email/webfonts/3083F9_2_0.woff2') format('woff2'), url('http://cdn.harrys.com/email/webfonts/3083F9_2_0.woff') format('woff'), url('http://cdn.harrys.com/email/webfonts/3083F9_2_0.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'Brandon Grotesque';
      src: url('http://cdn.harrys.com/email/webfonts/2D9B47_6_0.eot');
      src: url('http://cdn.harrys.com/email/webfonts/2D9B47_6_0.eot?#iefix') format('embedded-opentype'), url('http://cdn.harrys.com/email/webfonts/2D9B47_6_0.woff2') format('woff2'), url('http://cdn.harrys.com/email/webfonts/2D9B47_6_0.woff') format('woff'), url('http://cdn.harrys.com/email/webfonts/2D9B47_6_0.ttf') format('truetype');
      font-weight: bold;
      font-style: normal;
    }


    @media screen and (-webkit-min-device-pixel-ratio: 0) {

      .h1,
      .h1 a {
        font-family: 'Brandon Grotesque', Futura, Trebuchet MS, Arial, sans-serif !important;
        font-size: 36px !important;
        line-height: 52px !important;
        letter-spacing: 1.25px !important;
        font-weight: normal !important;
      }

      .h2,
      .h2 a {
        font-family: 'Brandon Grotesque', Futura, Trebuchet MS, Arial, sans-serif !important;
        font-size: 28px !important;
        line-height: 42px !important;
        letter-spacing: 1px !important;
        font-weight: normal !important;
      }

      .h3,
      .h3 a {
        font-family: 'Brandon Grotesque', Futura, Trebuchet MS, Arial, sans-serif !important;
        font-size: 24px !important;
        line-height: 36px !important;
        letter-spacing: 1.25px !important;
        font-weight: normal !important;
      }

      .subheader,
      .subheader a {
        font-family: 'Brandon Grotesque', Futura, Trebuchet MS, Arial, sans-serif !important;
        font-size: 12px !important;
        line-height: 24px !important;
        letter-spacing: 2.3px !important;
        font-weight: bold !important;
      }

      .body,
      .body a {
        font-family: 'Museo Sans', Verdana, Geneva, sans-serif !important;
        font-size: 16px !important;
        line-height: 28px !important;
        letter-spacing: 0.75px !important;
        font-weight: 500 !important;
        font-style: normal !important;
      }

      .note,
      .note a {
        font-family: 'Museo Sans', Verdana, Geneva, sans-serif !important;
        letter-spacing: 0.4px !important;
      }

      .large-cta,
      .large-cta a {
        font-family: 'Brandon Grotesque', Futura, Trebuchet MS, Arial, sans-serif !important;
        font-size: 16px !important;
        letter-spacing: 2px !important;
        border-top-width: 14px !important;
        border-bottom-width: 10px !important;
        border-right-width: 30px !important;
        border-left-width: 30px !important;
        font-weight: bold !important;
      }

      .fact-copy,
      .fact-copy a {
        font-family: 'Museo Sans', Verdana, Geneva, sans-serif !important;
        font-size: 16px !important;
        line-height: 28px !important;
        letter-spacing: 0.75px !important;
        font-weight: 500 !important;
        font-style: normal !important;
      }


    }

    /* APPLE BLUE LINKS */

    .smart-666666 a {
      color: #666666 !important;
      text-decoration: none !important;
    }

    .smart-868686 a {
      color: #868686 !important;
      text-decoration: none !important;
    }

    .smart-BFBFBF a {
      color: #BFBFBF !important;
      text-decoration: none !important;
    }

    .smart-185674 a {
      color: #185674 !important;
      text-decoration: none !important;
    }

    .smart-263645 a {
      color: #263645 !important;
      text-decoration: none !important;
    }

    .smart-FFFFFF a {
      color: #FFFFFF !important;
      text-decoration: none !important;
    }


    /* MEDIA QUERY SCREEN 579px */

    @media screen and (max-width: 579px),
    screen and (max-device-width: 579px) {
      .full-table {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
      }

      .mobile-hide {
        height: 1px !important;
        display: none !important;
        min-width: inherit !important;
      }
      .mobile-show {
        height: auto !important;
        display: block !important;
        min-width: inherit !important;
      }

      .hero img {
        width: 100% !important;
        height: auto !important;
      }

      .mobile-column {
        height: auto !important;
        padding: 0 !important;
      }

      .mobile-column td {
        text-align: center !important;
        padding: 0 20px !important;
      }

      .bg-text {
        width: 100% !important;
        display: block !important;
        padding-top: 400px !important;
      }

      .full-bg-right {
        display: block !important;
        background-position: 26% center !important;
      }

      .full-bg-left {
        display: block !important;
        background-position: 74% center !important;
      }

      .half-bg-right {
        display: block !important;
        background-size: cover !important;
        background-position: left bottom !important;
      }

      .half-bg-left {
        display: block !important;
        background-size: cover !important;
        background-position: right bottom !important;
      }

      .two-col-inline {
        background: none !important;
      }

      .trucks-img {
        width: 100% !important;
        height: auto !important;
      }

      .head {
        display: table-header-group !important;
        width: 100% !important;
      }
      .foot {
        display: table-footer-group !important;
        width: 100% !important;
      }
      .mobile-height-10 {
        height: 10px !important;
      }
      .mobile-height-20 {
        height: 20px !important;
      }
      .mobile-height-25 {
        height: 25px !important;
      }
      .mobile-height-30 {
        height: 30px !important;
      }
      .mobile-height-35 {
        height: 35px !important;
      }
      .mobile-height-40 {
        height: 40px !important;
      }
      .mobile-height-50 {
        height: 50px !important;
      }
      .mobile-height-60 {
        height: 60px !important;
      }


      .head {
        display: table-header-group !important;
        width: 100% !important;
      }
      .foot {
        display: table-footer-group !important;
        width: 100% !important;
      }

      .mobile-column td.colpadtop {
        padding-top: 20px !important;
      }

      .vday-container-padding-top {
        padding-top: 40px !important;
        padding-bottom: 10px !important;
        padding-left: 20px !important;
        padding-right: 20px !important
      }
      .vday-container-padding-bot {
        padding-bottom: 40px !important;
        padding-left: 20px !important;
        padding-right: 20px !important
      }
      .fact-container {
        padding: 30px 10px 30px 8px !important;
      }

      .fact-copy,
      .fact-copy a {
        font-family: 'Museo Sans', Verdana, Geneva, sans-serif !important;
        font-size: 13px !important;
        line-height: 20px !important;
        letter-spacing: 0.4px !important;
        font-family: Verdana, Geneva, sans-serif !important;
        color: #868686 !important;
        font-weight: normal !important;
      }

      u+.body-tag .full-wrap {
        width: 100% !important;
        width: 100vw !important;
      }

    }
  </style>

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

</head>

<body class="body-tag" bgcolor="#F7F7F7" style="-webkit-font-smoothing: antialiased; width:100% !important; background:#F7F7F7;-webkit-text-size-adjust:none; margin:0; padding:0; min-width:100%">
  <div style="display:none !important;visibility:hidden;mso-hide:all;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">We want to tell you those three little words everyone wants to hear on Valentine’s Day: refill your razors. We hope this doesn’t feel sudden or anything. What can we tell you? We’re hearts-on-our-sleeves people around here.</div>

  <!-- assign variables/attributes -->

  <div style="background-color:#34507F;">
    <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="http://cdn.harrys.com/email/one-off/190207_valentines/bg.png" color="#34507F"/>
  </v:background>
  <![endif]-->
    <table class="full-wrap" height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td class="retina-bg" valign="top" align="left" background="http://cdn.harrys.com/email/one-off/190207_valentines/bg-retina.png" style="background-size: 203px 367px;">

          <!-- CONTAINER TABLE -->
          <table class="container" border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 500px;">
            <tr>
              <td>

                <!-- ********************************* -->
                <!-- 1COL: INLINE IMAGE -->
                <table align="center" cellspacing="0" cellpadding="0" width="100%">
                  <tr>
                    <!-- Change background color -->
                    <td class="vday-container-padding-top" align="center" style="padding-top: 70px; padding-bottom:16px;">
                      <table width="500" border="0" align="center" cellpadding="0" cellspacing="0" class="full-table" style="width: 500px">
                        <tr>
                          <td bgcolor="#FFFFFF">
                            <table width="500" border="0" align="center" cellpadding="0" cellspacing="0" class="full-table">
                              <tr>
                                <td class="mobile-height-30" width="100%" height="50" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                              </tr>

                              <!-- H1 -->
                              <tr class="mobile-column">
                                <td align="center" class="h1" style="font-size: 33px; line-height: 52px; letter-spacing: 0.5px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #263645; font-weight:normal; padding: 0 100px;">
                                  It's only weird if you make it&nbsp;weird.</td>
                              </tr>

                              <tr>
                                <td class="mobile-height-10" width="100%" height="30" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                              </tr>
                              <!-- H1 END -->

                              <tr class="mobile-column">
                                <td class="hero" align="center" style="padding-left: 50px; padding-right: 50px;">
                                  <a href="http://sg-link.harrys.com/wf/click?upn=s6-2FqfrspoOmocPYk4-2BmgrZUALeb-2FWwt8FmX6yyI36MgtqMQk4JFKvELMOlXYVEciPts-2BNrWAmg282Cgr3A0MguyZ6KkvlIVFgfcuubq4Wy-2FtuS-2FB3zc1RRmgmI73PfH4rK19mRcQEWrujwPLDar0jH0dicfBjCKu6OE0N56-2B7cnHS2foRjMgBUodC0Vgjb8PNQPLUdWNYEAlSZn7OVPG1kMtJ91fxEQlU1Aexp3oEpk-3D_uwT31D-2FKVmJYTDp7XDRGgdykVZeQkfQYVfLsDkw5CmSWOKVN3mQCEBJeR-2ByYH-2Ff-2BfO0RSyOL9UEgpEXO3dKRJbmK54LPHDnSkOIOM127RAP-2FRnf4V0EjiaPheIa0XHOfcHsmVkg2Lj1uLLZhv-2Fogwu9iXD5-2FA6o6PiMqY2EYikJ6cv05jVUEwikmx38Q2SKMxtUijHGWXtR4W2FcpI1l-2B0CA-2BlrRvhgUSdnpAZKCFq4Xd4pmiuzC6FqT-2FaApwVcRgqU06IqaUY5wV-2BiQSjbEcH-2Bg8rZJvuHh9fOOG0VqU96U7iBvLs0WBgl8AxyRzyaZa89K9oSpjr3J-2FXRQXr0unnV-2FkDecW7mq8LLR52li9RSU4wG4vpHsEW8Nf71Z29U6BWICxQMnPzxQwMxIW-2FI-2FKYJKBDlbI0z-2BtdN-2BJ3DP-2BPe-2FdoFj0Vgh25mDZABdmV8DmLeIeXZDttQGvwkIBGe5nZfyeoD8-2F8Vxhh1-2BESnA4zw479CPKPb0hv9NFAdFcNBRwIvoogl-2B6hGl8nar45cCi0mJh-2BjtyNKgLH4O0F6R-2FdA-3D"><img src="http://cdn.harrys.com/email/one-off/190207_valentines/Mammoth_Optimized_2.gif" width="400" height="315" border="0" alt="mammoth shaving" style="width:400px; height:315px; line-height: 315px; display:block; font-size: 14px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #263645; font-weight:normal; max-width: 587px!important;"></a>
                                </td>
                              </tr>

                              <tr>
                                <td width="100%" height="40" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                              </tr>
                              <!-- BODY -->
                              <tr class="mobile-column">
                                <td align="center" class="body" style="font-size: 14px; line-height: 30px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #666666; font-weight:normal;padding-left: 50px; padding-right: 50px;">
                                  We want to tell you those three little words everyone wants to hear on Valentine’s Day: <em>Redeem your trial</em>. We hope this doesn’t feel sudden or anything. What can we tell you? We’re hearts-on-our-sleeves people
                                  around&nbsp;here.
                                </td>
                              </tr>

                              <tr>
                                <td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                              </tr>
                              <!-- BODY END -->

                              <!-- ORANGE CTA -->
                              <tr>
                                <td align="center">
                                  <!--[if mso]>
									<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:48px;v-text-anchor:middle;width:280px;" arcsize="5%" strokecolor="#E34F30" fillcolor="#E34F30">
									<w:anchorlock/>
									<center>
									<![endif]-->

                                  <a class="large-cta" href="http://sg-link.harrys.com/wf/click?upn=s6-2FqfrspoOmocPYk4-2BmgrZUALeb-2FWwt8FmX6yyI36MgtqMQk4JFKvELMOlXYVEciPts-2BNrWAmg282Cgr3A0MguyZ6KkvlIVFgfcuubq4Wy-2FtuS-2FB3zc1RRmgmI73PfH4rK19mRcQEWrujwPLDar0jH0dicfBjCKu6OE0N56-2B7cnHS2foRjMgBUodC0Vgjb8PNQPLUdWNYEAlSZn7OVPG1hDn38-2FxTjaayfo7wVSWGl98bCQGgAWmFwiJiSaJlCnY_uwT31D-2FKVmJYTDp7XDRGgdykVZeQkfQYVfLsDkw5CmSWOKVN3mQCEBJeR-2ByYH-2Ff-2BfO0RSyOL9UEgpEXO3dKRJbmK54LPHDnSkOIOM127RAP-2FRnf4V0EjiaPheIa0XHOfcHsmVkg2Lj1uLLZhv-2Fogwu9iXD5-2FA6o6PiMqY2EYikLqYIHZzRu-2FrrLOpfjh2TNhe8qYVhnMaFyGqWFSVCbAgSmD3RRAUBf9P-2Feey1ZNv99yCEvUGDdA0r1Z0C2JOIs2ZJz0UaXCak8NmY-2FmOf79-2BcdAxz3mXQcon07VfaHrr5WzcNPni-2BbTQdrW1McwvH5BFbxdds2wV9ybFrzom3siVcqcj6VKLTkRRVoo0D9fhpDJuVR2P9Rhk34GKYSrsaKl3ucY6SVhgbePqzngzF-2FC-2Fzh9USdVhNEkZpTgek98a1o6ZToFRt3tz67mFUV4xRx52hiijXoR-2F7iT0FyuuvO9bTyaVB-2Bv4Wmu8IIUC9u4IuTYVaobg-2FVOpV8Fth6J9IM-2Bz8mEPvA-2FlM742Hgg1YlQAszUiznhR8uK0b71NnJDv1A-3D"
                                    style="font-size: 13px; letter-spacing: 0.16em; line-height:20px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #FFFFFF; font-weight: normal; text-decoration: none; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; background-color: #E34F30; border-top: 12px solid #E34F30; border-bottom: 12px solid #E34F30; border-right: 29px solid #E34F30; border-left: 29px solid #E34F30; display: inline-block;">REDEEM TRIAL</a>

                                  <!--[if mso]>
									</center>
									</v:roundrect>
									<![endif]-->
                                </td>
                              </tr>
                              <!-- ORANGE CTA END -->

                              <!-- NOTE END -->
                              <tr>
                                <td width="100%" height="50" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
                <!-- 1COL: INLINE IMAGE END -->
                <!-- ********************************* -->

                <!-- ********************************* -->
                <!-- 1COL: INLINE IMAGE -->
                <table align="center" cellspacing="0" cellpadding="0" width="100%">
                  <tr>
                    <!-- Change background color -->
                    <td class="vday-container-padding-bot" align="center" style="padding-bottom:60px;">
                      <table width="500" border="0" align="center" cellpadding="0" cellspacing="0" class="full-table" style="width: 500px">
                        <tr>
                          <td bgcolor="#FFFFFF">
                            <table width="500" border="0" align="center" cellpadding="0" cellspacing="0" class="full-table">
                              <tr>
                                <td align="left" valign="middle"><a href="http://sg-link.harrys.com/wf/click?upn=s6-2FqfrspoOmocPYk4-2BmgrZUALeb-2FWwt8FmX6yyI36MgtqMQk4JFKvELMOlXYVEciPts-2BNrWAmg282Cgr3A0MguyZ6KkvlIVFgfcuubq4Wy-2FtuS-2FB3zc1RRmgmI73PfH4rK19mRcQEWrujwPLDar0jH0dicfBjCKu6OE0N56-2B7cnHS2foRjMgBUodC0Vgjb8PNQPLUdWNYEAlSZn7OVPG1hZ1kMekkR0uoi8ZBqZ9uCnJww-2Ff41-2FqZAPUZLsrPAeN_uwT31D-2FKVmJYTDp7XDRGgdykVZeQkfQYVfLsDkw5CmSWOKVN3mQCEBJeR-2ByYH-2Ff-2BfO0RSyOL9UEgpEXO3dKRJbmK54LPHDnSkOIOM127RAP-2FRnf4V0EjiaPheIa0XHOfcHsmVkg2Lj1uLLZhv-2Fogwu9iXD5-2FA6o6PiMqY2EYikL6B-2BeM17yWxFkdVb5DUKVPa659kz-2FcDNSto8q22xJBJCPUbkJ1sKY5sjPEmidW6qsOIQNZQf02DekR4xh-2B-2B1oN31vepQwbwMM3VwHjqmvxcgGWniiu0eolxBygDgtFXugqoaqGhBbb7tKZrWYAeuyYqJLUGR6ODfXMSFdLeyF2XdCW0Oy3xl0LhM5EZZrIgpVnod0hTuB8Yn4ph5dIZ26LBVXN9PhAjESNcXX1ULbWpr7xMgXb1reJ5SLJSuzEf2ELx2-2B7rAhZvjUWkEC8b9sOvQS7G2n0sv6nv-2BFyoztq8jE9zFPd-2BAgMtjC7-2Fnezap-2Fq5H44kmT9lOxSy41WpGkkeuXfjLth7J1wUh8hGJRjoXmZdf7gykUAiWOdxi72Ll4-3D"><img class="trucks-img" src="http://cdn.harrys.com/email/one-off/190207_valentines/trunks.png" width="168" height="174" border="0" alt="mammoth trunks" style="width:168px; height:174px; line-height: 174px; display:block; font-size: 14px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #263645; font-weight:normal;"></a></td>
                                <td class="fact-container" align="left" valign="middle" style="padding:30px 40px 30px 20px">
                                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <!-- SUBHEADER-->
                                    <tr>
                                      <td align="left" class="subheader" style="font-size: 11px; line-height: 24px; letter-spacing: 2.6px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #263645; font-weight:normal; text-transform: uppercase;">
                                        DID YOU KNOW?
                                      </td>
                                    </tr>
                                    <!-- SUBHEADER END -->
                                    <tr>
                                      <td width="100%" height="6" align="left" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                    </tr>
                                    <!-- BODY -->
                                    <tr>
                                      <td align="left" class="fact-copy" style="font-size: 14px; line-height: 30px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #666666; font-weight:normal">
                                        It’s believed that, like elephants, mammoths entwined their trunks to show&nbsp;affection.&nbsp;Cozy.
                                      </td>
                                    </tr>
                                    <!-- BODY END -->
                                  </table>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
                <!-- 1COL: INLINE IMAGE END -->
                <!-- ********************************* -->

                <!-- FOOTER -->
                <table align="center" cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                    <!-- Change background color -->
                    <td bgcolor="#F7F7F7" align="center" style="padding: 0 20px">
                      <table border="0" cellpadding="0" cellspacing="0" width="100%">

                        <tr>
                          <td width="100%" height="50" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                        </tr>

                        <!-- MAMMOTH -->
                        <tr>
                          <td align="center">
                            <a href="http://sg-link.harrys.com/wf/click?upn=vmRRDuycyPyXDu7Uuf29VkYXf8t7YW-2FD5tVb8UBhC4VOGhTJdT00cmcpC2xYfkmluKWdenlp9t3E5e5b3TiNjCoYrsb3q87ryETaM3Bk4RDTYjNtndOYLRLQpogFgsYwZBho1Z-2F7ZZiRUCAYbT9mdLtkPtDqQdV7q-2BMCOaBMjcs-3D_uwT31D-2FKVmJYTDp7XDRGgdykVZeQkfQYVfLsDkw5CmSWOKVN3mQCEBJeR-2ByYH-2Ff-2BfO0RSyOL9UEgpEXO3dKRJbmK54LPHDnSkOIOM127RAP-2FRnf4V0EjiaPheIa0XHOfcHsmVkg2Lj1uLLZhv-2Fogwu9iXD5-2FA6o6PiMqY2EYikK4hewu1XvsM2hw5GU2pnO2fJEsJHhNeIx9AaV6-2BgHdR34A82-2FGsB42nratKOgIFjiDS7J-2F8t-2BEQYsfYYDjt3UOGkMTUdbOjaSFoF4xRmuays-2F84d4ARB5zH9N-2B6pshIlP14FmbhVuiO6M-2BA6emHxiC5TySODvm4wqE-2F9yIcbaQvg4zF-2BvGEOprNpDX4Q8uAjN46EFaqcmNWvmSiCVK1lDR1BKo-2B17fO03gAd9jzwqIViTq1LlF4ak5rexJrL5Ou-2BGc97je2zYgdUlV0BG7qtemPB-2Fc6i34KiyamnMHmxfN7AmNDC6mApRQf2aLF-2BncaptCBozLEFsnb2jmv40t8PqUnfOisL5rYIhJ1pKCvCoq-2B4u3eGbtxn6expQuUAIW20U-3D">
							<img src="http://cdn.harrys.com/us-email/lifecycle/welcome/mammoth.png" width="47" height="36" border="0" style="display:block;" alt="Mammoth">
						</a>
                          </td>
                        </tr>
                        <!-- MAMMOTH END -->

                        <tr>
                          <td width="100%" height="30" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                        </tr>

                        <!-- NOTE -->
                        <tr>
                          <td align="center" class="note" style="font-size: 13px; line-height: 24px; letter-spacing: 0.4px; font-family: Verdana, Geneva, sans-serif; color: #666666; font-weight:normal">
                            <a href="mailto:help@harrys.com" style="color: #666666; text-decoration: none;">help@harrys.com</a>
                            <br>
                            <span class="smart-666666" style="text-decoration: none;">PO Box 566, <span style="white-space:nowrap;">New York, NY, 10014</span></span>
                            <br>
                            <a href="http://sg-link.harrys.com/wf/click?upn=s6-2FqfrspoOmocPYk4-2BmgrSxshyYWG-2FFlw8wg0ZgTKahv6861Soiolwz24KZ795MgRKkSAWk0eVRBYqpPwpGMH0dJ-2BCMK1nDMkRYmZL3mlbsCqVOC-2FBBAQ-2BsGe0Id00pXHwqcIHkf7BUPY-2Bx89H5bNA-3D-3D_uwT31D-2FKVmJYTDp7XDRGgdykVZeQkfQYVfLsDkw5CmSWOKVN3mQCEBJeR-2ByYH-2Ff-2BfO0RSyOL9UEgpEXO3dKRJbmK54LPHDnSkOIOM127RAP-2FRnf4V0EjiaPheIa0XHOfcHsmVkg2Lj1uLLZhv-2Fogwu9iXD5-2FA6o6PiMqY2EYikKl6-2F8B4D9-2BE8-2FFHuKBgSZc-2BHsNCwl-2Buq3n87wPvIoEKYiqCLP9tW1gYCygsbf-2BPCR-2F0zYQULTIKrsi8o4WZZH-2Fiefvp-2FLytO-2Fb7jnf0y2IAleC7WpaRlYJhaxgNqyNswZ0rIIJP2tbyOPb5-2FR1hqfLis3E9TYyEioMu04GFtaDjQoN9muJKGcGgQA-2B5dZ7Yuuw-2BdUwxWcWZfUlgdCJsnsHfnZC0Tkpyy8Q90BjlVVBJszb12-2F-2FzB7KYi08d1aaeW-2BNuEj7fS9HAoec1B0mn5-2FAkcJmIhMEHSZ3nVyjvlcG-2Fdi10QJXYnewNIJrPM36g0oR-2FO3N1sYBRkaceRdPWyKuRRe9CYXJFbC-2Fk7XFXGZzEvRr4mReKuag6EiPlSHhgEo-3D"
                              style="color: #666666; text-decoration: underline;">Download the App</a> | <a href="#"
                              style="color: #666666; text-decoration: underline;">Unsubscribe</a>

                          </td>
                        </tr>

                        <!-- NOTE END -->

                        <tr>
                          <td width="100%" height="50" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                        </tr>

                      </table>
                    </td>
                  </tr>
                </table>
                <!-- FOOTER END -->

                <!-- CONTAINER TABLE END -->
              </td>
            </tr>
          </table>

        </td>
      </tr>
    </table>
  </div>



</body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console