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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

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.

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: 15px !important;
        line-height: 28px !important;
        letter-spacing: 0.75px !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: 14px !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;
      }

    }

    /* 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;
      }

      .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;
      }

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

    }
  </style>
</head>

<body bgcolor="#F7F7F7" style="-webkit-font-smoothing: antialiased; width:100% !important; background:#F7F7F7;-webkit-text-size-adjust:none; margin:0; padding:0; min-width:100%">

  <!-- PREHEADER TEXT -->
  <span style="display: none !important; color: #FFFFFF; margin:0; padding:0; font-size:1px; line-height:1px;">At Harry’s, we believe that every shave should feel just as exciting as your first. If your routine’s lost its luster, it’s probably a good time to mix things up. Treat yourself to a quality Harry’s shave and you’ll feel (and see) the difference. 
</span>

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

        <!-- COPY BLOCK-->
        <table align="center" cellpadding="0" cellspacing="0" class="full-table" width="100%">
          <tr>
            <!-- Change background color -->
            <td bgcolor="#FFFFFF">
              <table align="center" border="0" cellpadding="0" cellspacing="0" class="full-table" width="580">
                <tr>
                  <td align="center" bgcolor="#757DAE">
                    <!-- Adjust width of text container (580px MAX) -->
                    <table width="500" align="center" cellpadding="0" cellspacing="0" class="full-table">
                      <tr>
                        <td align="center" style="padding: 0 20px">
                          <table border="0" cellpadding="0" cellspacing="0" width="100%">

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

                            <!-- H2 -->
                            <tr>
                              <td align="center" class="h2" style="font-size: 26px; line-height: 42px; letter-spacing: 0.25px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #FFFFFF; font-weight:normal">
                                Love Shaving (Imagine!)
                              </td>
                            </tr>
                            <!-- H2 END -->

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

                            <!-- BODY -->
                            <tr>
                              <td align="center" class="body" style="font-size: 14px; line-height: 30px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #FFFFFF; font-weight:normal">At Harry’s, we believe that every shave should feel just as exciting as your first. If&nbsp;your routine’s lost its luster, it’s probably a good time to mix things up. Treat yourself to a quality Harry’s shave and you’ll
                                feel (and see) the&nbsp;difference.
                              </td>
                            </tr>
                            <!-- BODY END -->

                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!-- COPY BLOCK END -->

        <!-- 1COL: INLINE IMAGE -->
        <table align="center" cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <!-- Change background color -->
            <td bgcolor="#FFFFFF" align="center">
              <table class="full-table" cellspacing="0" cellpadding="0" align="center" width="580">
                <tr>
                  <td class="hero" align="center">

                    <img src="http://cdn.harrys.com/email/one-off/180207_valentines-day/ft_truman-set.jpg" width="580" height="720" border="0" alt="Hands holding shave sets" style="width:580px; height:720px; line-height: 720px; display:block; font-size: 14px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #FFFFFF; font-weight:normal; background-color: #757DAE;">

                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!-- 1COL: INLINE IMAGE END -->

        <!-- 2COL: INLINE IMAGE (text left) -->
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <!-- Change background color -->
            <td bgcolor="#FFFFFF" align="center" valign="top" width="100%">
              <table align="center" cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                  <td>
                    <table class="full-table" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
                      <tr>
                        <td align="center">

                          <!-- Content -->
                          <table class="full-table" width="580" cellpadding="0" cellspacing="0" border="0" align="center">
                            <tr>
                              <td bgcolor="#848DC3">

                                <!-- COLUMN 01 -->
                                <div class="foot">
                                  <table class="full-table" width="280" align="left" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <!-- Change this height to match the image height -->
                                      <td class="mobile-column" height="380" valign="middle" style="padding:0 0 0 40px;">
                                        <table>
                                          <tr>
                                            <td class="mobile-hide" width="100%" height="45" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                          </tr>

                                          <!-- 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: #FFFFFF; font-weight:normal; text-transform: uppercase;">
                                              READY TO COMMIT?
                                            </td>
                                          </tr>
                                          <!-- SUBHEADER END -->

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

                                          <!-- BODY -->
                                          <tr>
                                            <td align="left" class="body" style="font-size: 14px; line-height: 30px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #FFFFFF; font-weight:normal">
                                              When you subscribe to Harry’s you’ll get everything you need for a smooth, comfortable shave. And you’ll save a lot too. We’re confident it will be a long-term&nbsp;relationship. </td>
                                          </tr>

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

                                          <!-- BLUE CTA -->
                                          <tr>
                                            <td align="left">
                                              <!--[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="#185674" fillcolor="#185674">
																			<w:anchorlock/>
																			<center>
																			<![endif]-->

                                              <a class="large-cta" href="http://sg-link.harrys.com/wf/click?upn=s6-2FqfrspoOmocPYk4-2BmgrSTbePC-2FpZluNi22hcU2bUi5J9EuYTcwmvzVocFEcnEIQyO58Yxkzv4VhNZGp-2FzSMpUPj6bv4GMHZFf4zGvKJjoJF5Hj9keGBDz0ntJUAmvc-2FA4aeOCa6xl25j1bT2UBTjBYUT7iyIn-2FxjNB-2BbWlvR18n1q6Zm4qnHMmzUKgw136_uwT31D-2FKVmJYTDp7XDRGgdykVZeQkfQYVfLsDkw5CmSlvmn3ZSeacvTSm7RN3SU48Tfm3VUxNmCgPjEu77gWUJ6koo9pAtSOH19ezz3Y-2FpTI7etIeptC2YDfS8ZxHgjiwiijisu6EtajpS3jjFgWnmPJdwyGGv2QK3OYljhABnH7iVvL6yQBA0EvqeeBeJRk9z9LbGnk78GA94i2Jpx8nEQ2w5kN5K731ZircYGVv3zd4X-2FiMMA4DJMTB5pVMh6LGmDEpcdgVap-2BviTKZQfzPSlXmS9T4zUa-2FXXXOmXKjbqZWVJpEtMdCYfPtZIKscfQyOB4-2FiVjRnTxRkLiNSHN1AJVaAoRnC8hM2qqP0CE2KQW5kLc1-2FK0PZn44MelD-2BITt61o4CKEFZFC0rQDPcRAXl84OEtWtV1qukliXFXXLbFo04rYqKWabRv6z9UeTt-2FfZVIthPOZOhvd0LiVpQjknw-3D-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: #263645; border-top: 12px solid #263645; border-bottom: 12px solid #263645; border-right: 29px solid #263645; border-left: 29px solid #263645; display: inline-block;">START TRIAL</a>

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

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

                                        </table>
                                      </td>
                                    </tr>
                                  </table>
                                </div>
                                <!--[if mso]></td><td><![endif]-->

                                <!-- COLUMN 02 -->
                                <div class="head">
                                  <table width="300" align="left" border="0" cellpadding="0" cellspacing="0" class="full-table">
                                    <tr>
                                      <td align="center">
                                        <a href="http://sg-link.harrys.com/wf/click?upn=s6-2FqfrspoOmocPYk4-2BmgrSTbePC-2FpZluNi22hcU2bUi5J9EuYTcwmvzVocFEcnEIQyO58Yxkzv4VhNZGp-2FzSMpUPj6bv4GMHZFf4zGvKJjoJF5Hj9keGBDz0ntJUAmvc-2FA4aeOCa6xl25j1bT2UBTmaWXnth8HE24RenAS6mcMBzJmLRyz4eYjkXXSYY0gvq_uwT31D-2FKVmJYTDp7XDRGgdykVZeQkfQYVfLsDkw5CmSlvmn3ZSeacvTSm7RN3SU48Tfm3VUxNmCgPjEu77gWUJDHX7eTeyN32t3fOU1M60i-2BQHAyvPEl7Mn-2FRfrKNgfWoM5NEpf697mcavE-2BFgb7us8H3vAhXdYPtRwFZT3nnFYZnJ-2FzkNB07LdxUIyyP-2Ff6XTrGpfHExMnxOHIgQdYYBojgbf71OnKUnLtPytH34GvoJw4RwLSH4D2HhJWMiMJyay073K8t242PEI6Ko7s0ijW1K3mXMJ6oZsg1Fz4eEdZQ06MAEWHkzJF1QuIsIR-2BvUd6cJsx30gvUvIBHbA4WdVKJfsDjFRtB-2BcKCyZCPXd5xuZGjlAK-2BsVxa-2FMVGCX4mf-2FJFGWR9OQOxCdGkY1Q5Ts-2FdInJ6uAObbRvnC-2BnhWY2hhoJqYqx6mEz2NdBqPx-2Fq2wuarij7ZDYl7mEmPJJAzw-3D-3D">
																<img src="http://cdn.harrys.com/email/one-off/180207_valentines-day/free-trial-set-2.jpg" width="300" height="380" border="0" alt="Harry's Free Trial" style="width:300px; height:380px; line-height: 380px; display:block; font-size: 14px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #FFFFFF; font-weight:normal; background-color: #848DC3;">
															</a>
                                      </td>
                                    </tr>
                                  </table>
                                </div>
                              </td>
                            </tr>

                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!-- 2COL: INLINE IMAGE END -->

        <!-- 2COL: INLINE IMAGE (text right) -->
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <!-- Change background color -->
            <td bgcolor="#FFFFFF" align="center" valign="top" width="100%">
              <table align="center" cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                  <td>
                    <table class="full-table" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
                      <tr>
                        <td align="center">

                          <!-- Content -->
                          <table class="full-table" width="580" cellpadding="0" cellspacing="0" border="0" align="center">
                            <tr>
                              <td bgcolor="#757DAE">

                                <!-- COLUMN 01 -->
                                <table width="300" align="left" border="0" cellpadding="0" cellspacing="0" class="full-table">
                                  <tr>
                                    <td align="center">
                                      <a href="http://sg-link.harrys.com/wf/click?upn=s6-2FqfrspoOmocPYk4-2BmgrSTbePC-2FpZluNi22hcU2bUjYvd2Ad-2FlZBidbDs-2Fmcr3vw66B2qdoypx-2FnSPMEM43-2FIf3raa-2F6O7pyL7lmkAooAFCujwc7Pch3tTg9LJszl44-2BilVl05XQyYFedSFkLNLWmaqAvrgQjqukJ-2Bvvk9UOM8KN1QbZ5SOjctRShMNi0j6x-2FqEkTPsl3A288P-2B2TFaKA-3D-3D_uwT31D-2FKVmJYTDp7XDRGgdykVZeQkfQYVfLsDkw5CmSlvmn3ZSeacvTSm7RN3SU48Tfm3VUxNmCgPjEu77gWUIodNkdKk4zsuAMeCG0JL5xKkvsPwaGEsVmI4G3Cha-2FntCfwtScc7eaWITIg9SDn5Juu0Ha94QhypaXZOlaPZDbjjIrffSC-2F8Or0ljcCIAce-2FdzmfpzI5fQyAryGVDPqktaC8PdHaUVk2uH2D5EsbgORWwHlFVfPAfXMuAHOJk1OyDHtcXUznQYtRhyf38y8Hy54moLTJA2B2LfdU3iHlj94ZDQj0hXsvWDPKDQf7CJIbU41IhBfB2R28rSVgRyuJavBw3x4cwnfKN84VpyI5mDD-2FMGnQSozFCTyr49JmAWokpYSL4cgmFfx2FlB4z61eF4vAAD3i9j5DhEN8yb4Pg60IpHgSTzwuQrVl02Rqg8VgJyq-2FNgdSuMTfBzAIAXbMA-3D-3D">
																<img src="http://cdn.harrys.com/email/one-off/180207_valentines-day/truman-set-2.jpg" width="300" height="380" border="0" alt="Harry's Truman Set" style="width:300px; height:380px; line-height: 380px; display:block; font-size: 14px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #FFFFFF; font-weight:normal; background-color: #757DAE;">
															</a>
                                    </td>
                                  </tr>

                                </table>
                                <!--[if mso]></td><td><![endif]-->

                                <!-- COLUMN 02 -->
                                <table class="full-table" width="280" align="left" border="0" cellpadding="0" cellspacing="0">
                                  <tr>
                                    <!-- Change this height to match the image height -->
                                    <td class="mobile-column" height="380" valign="middle" style="padding:0 30px 0 10px;">
                                      <table>
                                        <tr>
                                          <td width="100%" class="mobile-hide" height="45" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                        </tr>

                                        <!-- 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: #FFFFFF; font-weight:normal; text-transform: uppercase;">

                                            KEEP THINGS CASUAL
                                          </td>
                                        </tr>
                                        <!-- SUBHEADER END -->

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

                                        <!-- BODY -->
                                        <tr>
                                          <td align="left" class="body" style="font-size: 14px; line-height: 30px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #FFFFFF; font-weight:normal">
                                            Try our signature Truman Set, which features our best-selling products. Then order whatever else you need, when you need it. Sometimes, we all need to start&nbsp;slow. </td>
                                        </tr>

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

                                        <!-- BLUE CTA -->
                                        <tr>
                                          <td align="left">
                                            <!--[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="#185674" fillcolor="#185674">
																			<w:anchorlock/>
																			<center>
																			<![endif]-->

                                            <a class="large-cta" href="http://sg-link.harrys.com/wf/click?upn=s6-2FqfrspoOmocPYk4-2BmgrSTbePC-2FpZluNi22hcU2bUjYvd2Ad-2FlZBidbDs-2Fmcr3vw66B2qdoypx-2FnSPMEM43-2FIf3raa-2F6O7pyL7lmkAooAFCujwc7Pch3tTg9LJszl44-2BilVl05XQyYFedSFkLNLWmaqAvrgQjqukJ-2Bvvk9UOM8p7XH4xtVKsrTL-2BWEG7cAytH69Z60acIBDoIbvsiNOBA-3D-3D_uwT31D-2FKVmJYTDp7XDRGgdykVZeQkfQYVfLsDkw5CmSlvmn3ZSeacvTSm7RN3SU48Tfm3VUxNmCgPjEu77gWUDzUT-2FqW6MCP8A65hp6dlHcsD6UZzoPRXRfKEhFhJ32U0vkXs-2FYNT3cY8b4ALaqio4j7db0qFNefefsx07FCsFShO-2B-2FbMXnjqeuuWF4UPf033QtDdh9aa262UV5rfmuDrhL2WEwGzGN9xK4k3DA-2B1hSiYsUWMC5Le1yqfTgvgtC-2FLv1qRkQdHGfJdNFDpOrqjmh-2Btg-2BDSLsLloFBKnL5NgP4dD5CmVOP75IT0RAReeuX-2FhAfQskuoUTE1-2FMCmPp-2Bn58Kh-2B1VfbIZ7Y-2BASlgRz4Md7Wfw6MZvfG3VXr8Dr91gzNm1SUnlABV8m6HcjBQJoLlSzH1veO-2B55ejM86VpINcSv2vWOLbK7LKQYiQJqXWk-2BrPHS9uM-2FvbtQZZ20-2F0jww-3D-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: #263645; border-top: 12px solid #263645; border-bottom: 12px solid #263645; border-right: 29px solid #263645; border-left: 29px solid #263645; display: inline-block;">SHOP TRUMAN SET</a>

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

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

                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!-- 2COL: INLINE IMAGE END -->

        <!-- 2COL: INLINE IMAGE (text left) -->
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <!-- Change background color -->
            <td bgcolor="#FFFFFF" align="center" valign="top" width="100%">
              <table align="center" cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                  <td width="100%" height="20" class="mobile-hide" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                </tr>
                <tr>
                  <td>
                    <table class="full-table" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
                      <tr>
                        <td align="center">

                          <!-- Content -->
                          <table class="full-table" width="580" cellpadding="0" cellspacing="0" border="0" align="center">
                            <tr>
                              <td bgcolor="#F7F7F7">

                                <!-- COLUMN 01 -->
                                <table class="full-table" width="300" align="left" border="0" cellpadding="0" cellspacing="0">
                                  <tr>
                                    <!-- Change this height to match the image height -->
                                    <td class="mobile-column" height="320" valign="middle" style="padding:0 0 0 40px;">
                                      <table>
                                        <tr>
                                          <td width="100%" height="40" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                        </tr>

                                        <!-- 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;">
                                            THE PERFECT PAIR
                                          </td>
                                        </tr>
                                        <!-- SUBHEADER END -->

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

                                        <!-- NOTE -->
                                        <tr>
                                          <td align="left" class="note" style="font-size: 13px; line-height: 24px; letter-spacing: 0.4px; font-family: Verdana, Geneva, sans-serif; color:#263645; font-weight:normal;">
                                            <a style="color: #263645; text-decoration: none;">We found your ideal match: the Harry’s x&nbsp;Sleepy Jones boxers. It’s easy to fall in love with these comfy, mammoth-print boxers. They’re a gentle reminder to take it a little bit easier, every time you&nbsp;wear them.</a>
                                          </td>
                                        </tr>

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

                                        <!-- LINK -->
                                        <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;">
                                            <a href="http://sg-link.harrys.com/wf/click?upn=s6-2FqfrspoOmocPYk4-2BmgrSTbePC-2FpZluNi22hcU2bUh1Pfm-2BBe9OtHkKP4Y7m2Ah22opY9Yh6cQpgqOvooymd0-2BFCbeazoNeVw2E6vMqzo4MKNAEULnx9l7Bo2UlrVEoMPBgM5X1p4l7n7Hj0m1Sbss7Kj8Llns1ilCxUy5tZnv-2B6t-2BndCFxMVLJWoMsvTxyncAEXj-2F4VcsSDcxMUrD8fg-3D-3D_uwT31D-2FKVmJYTDp7XDRGgdykVZeQkfQYVfLsDkw5CmSlvmn3ZSeacvTSm7RN3SU48Tfm3VUxNmCgPjEu77gWUDsQRfgq05kC1mYWqtA4bAHmqivf1bZ6YWu8cZMkDWvjBfbkWuVG698KD9CUYWcOI1Wapz0VJQBplMlJUPCcCq9ScSLyq4-2FVRTMKYR3k-2FulOMYMHXVEjz39VJmhvPFyADHu-2BlutUv4QCsWCzTU7X7NXOh9JVRGqQz6WyG9QUWFLY4dvLNn-2FVIh9lVuuKlABecYAwhns8h6ecxe5QHElgfixvuxkJWHajNRvf1EFi4vx9HbDkhRer5wMsHcykV7br2qTudGMzrHxp9XE6fcztWZlNUOg9hPAGI9k5EmDXEb-2BzPAC2Ezn6G3kuNLkTOuQqWNE6OnP-2BvW4p7B-2F6le9fE5CLSvAkXeOVkxsDMrhBlxa3jnUs49sj5l3aqP-2Btj0DRSg-3D-3D"
                                              style="color: #263645; border-bottom: 1px solid; border-bottom-color: #263645; padding-bottom: 4px; text-decoration: none;">GET COMFY</a>
                                          </td>
                                        </tr>
                                        <!-- LINK END -->
                                        <tr>
                                          <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td class="mobile-hide" width="100%" height="25" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                        </tr>

                                      </table>
                                    </td>
                                  </tr>
                                </table>
                                <!--[if mso]></td><td><![endif]-->

                                <!-- COLUMN 02 -->
                                <table width="280" align="left" border="0" cellpadding="0" cellspacing="0" class="full-table">
                                  <tr>
                                    <td class="hero" align="right">
                                      <a href="http://sg-link.harrys.com/wf/click?upn=s6-2FqfrspoOmocPYk4-2BmgrSTbePC-2FpZluNi22hcU2bUh1Pfm-2BBe9OtHkKP4Y7m2Ah22opY9Yh6cQpgqOvooymd0-2BFCbeazoNeVw2E6vMqzo4MKNAEULnx9l7Bo2UlrVEoMPBgM5X1p4l7n7Hj0m1Sbss7Kj8Llns1ilCxUy5tZnvpcKPglg5u6gRI2kaPd2ieJ6J6Vb4W0QhZBBS5zwIOfg-3D-3D_uwT31D-2FKVmJYTDp7XDRGgdykVZeQkfQYVfLsDkw5CmSlvmn3ZSeacvTSm7RN3SU48Tfm3VUxNmCgPjEu77gWUIO60FDUeC9asYlxHAreOOia8zlFFOG8itre1CSim7BW5xXW0rkFccMFS4pN-2BfPaN0bHg6wuFPEgaVo98iUDg7qMyjC7oih2ypxxOlFOETChL374j5boPHKlmPukymqJPCNsJqnVh7ex7RiheHc4mKOBixaS7XGDb-2F-2B8nnEGmr3GiX3hCfDXQ-2BuiiF73QSkYoFEVQzobc3j-2F4pEZc80CafiRH-2B07WN-2B5B6jKeadsGh2Xt0gNtNzlDkdEEuE59Aw3RRaBreXve2OIy9KQSovIsqAKw9RTg-2BjdQKEUiKsboUKvSBAlL6v0lMWatdNAWoakAz-2F1l0h3NHZd8Z4BwSOP6UlGG-2FQHi5e1fJOOM5q46TgMbBx1okB0-2Ftw1a8BSWj4D-2Bw-3D-3D">
																<img src="http://cdn.harrys.com/email/one-off/180207_valentines-day/boxers-module-2.jpg" width="280" height="317" border="0" alt="Harry's x Sleep Jones Boxers" style="width:280px; height:320px; line-height: 320px; display:block; font-size: 14px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #666666; font-weight:normal">
															</a>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>

                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!-- 2COL: INLINE IMAGE END -->

        <!-- FOOTER -->
        <table align="center" cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <!-- Change background color -->
            <td bgcolor="FFFFFF" 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-2FD5tVb8UBhC4VOGhTJdT00cmcpC2xYfkmluKWdenlp9t3E5e5b3TiNjOehXZsMGYm2pldTKLvneqPS37PJ6-2Fm9uHN9i8lN-2BJmcjnDghFabt-2FJoD0HGo7cZ5g-3D-3D_uwT31D-2FKVmJYTDp7XDRGgdykVZeQkfQYVfLsDkw5CmSlvmn3ZSeacvTSm7RN3SU48Tfm3VUxNmCgPjEu77gWUHVS3kzCl5BcctyIclYeuVaGnuE2xDMXEGhgJHfOj7-2FFprXKFDoCrb27QNODVjR9M5c6umCZG-2BipM3aKlQfzEOwUkL0UAzTNmkO9TvyxKE6-2Far66DxSQj6rOuFC1dRxlSZAlBoWcW-2B9ni3yc78CwzqtpYL7HN1tQBnlAQUZ-2FFe67UACxnQN18eA8Pql-2BlHxhJewgxBRajj7N58jjTkbEBeZ2oDIQXmuCKatwzC0DS9bWbNEOgj6zRNBA-2BspT8eUaaPWwqj1nD05CZP-2BW515m1vXa0-2FlY2n1-2FIxRqqG2M2g6ERu8cIDCVWV581wHDPTMDF09-2Bdedi142va4b2-2FwXAksfPhsjptZCN-2BE5pfdZ2lPCigQp65RjuZysnYGvc0g4G3g-3D-3D">
							<img src="http://cdn.harrys.com/us-email/lifecycle/welcome/mammoth.png" width="47" height="36" border="0" style="display:block;">
						</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-2FKVmJYTDp7XDRGgdykVZeQkfQYVfLsDkw5CmSlvmn3ZSeacvTSm7RN3SU48Tfm3VUxNmCgPjEu77gWUGOjgRnmru1RZEGdGTSirHxQ4-2F10-2B5JL-2B-2BHKdi7hhdlbZD1WYqVQfzjUvp3z-2Bky5HKr6EOG7gKQjwnULfGIsQVdrrGbLBHxs0akOc-2BDd0T1nvy5HMDhsZ1x0YdqH5hpQ4ApjXwYDacZzvk6o3L4vf72JP3-2B-2B4QVr7My-2Bjnd00REogZYQqMnG9hWQDT6BWmGrb8mTeJpkYELl3hem6cd7M0Aa3id0bc59ifyxptDk6LN-2B8VW9AxsPd5R6T-2FQmb1ewniITgwr2iihrsj0XyUOuEc4XuyEB-2BnDFAsY4A-2FkNPMBwnkwtRU9wFcsiFonSjjytpkAkp0fjGzbn-2FwJRan57CGQy2rYxKOHLnIoh1ho-2BEAccAFVF8-2BdBFJWd0vHv-2FwehwQ-3D-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>

  
</body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console