cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

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.

            
              <!DOCTYPE html>
<html>
  
  <head>
    <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;}
          .head:after{
            content:'---------------------------------------------------------------------------------------------------------------------';
            max-height:0;
            overflow:hidden;
            display:block;
          }
  
      }
    </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;">We’ve updated our Terms of Service and Privacy Policy on November, 17th, 2017 to give you a better, more personalized Harry’s experience.</span>

    <!--
    CONTAINER TABLE -->
    <table class="container" border="0" cellpadding="0" cellspacing="0" width="100%"
    style="min-width: 580px;">
      <tr>
        <td>
          <!-- HEADER -->
          <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tr>
              <td bgcolor="#FFFFFF" align="center" style="padding: 20px;">
                <a href="/en/us?utm_campaign=20171017_privacy_policy_update_01&utm_medium=email&utm_source=penpal">
                  <img src="http://cdn.harrys.com/ca-email/lifecycle/welcome/logo.png" width="115"
                  height="20" style="font-size: 13px; font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;  color: #065778; width:115px; height:20px; display:block;"
                  alt="HARRY'S" border="1">
                </a>
              </td>
          </table>
          <!-- HEADER END -->
          <!-- 1COL: INLINE IMAGE -->
          <table align="center" cellspacing="0" cellpadding="0" width="100%">
            <tr>
              <!-- Change background color -->
              <td bgcolor="#F7F7F7" align="center">
                <table class="full-table" cellspacing="0" cellpadding="0" align="center" width="580">
                  <tr>
                    <td class="hero" align="center">
                      <a>
                        <img src="http://cdn.harrys.com/email/one-off/171015_privacy-policy/hero.jpg"
                        width="580" height="184" border="0" alt="Man Shaving" style="width:580px; height: 184px; line-height: 184px; display:block; font-size: 14px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #F7F7F7; font-weight:normal">
                      </a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <!-- 1COL: INLINE IMAGE END -->
          <!-- COPY BLOCK-->
          <table align="center" cellpadding="0" cellspacing="0" width="100%">
            <tr>
              <!-- Change background color -->
              <td bgcolor="#F7F7F7">
                <table align="center" border="0" cellpadding="0" cellspacing="0" class="full-table"
                width="580">
                  <tr>
                    <td align="center">
                      <!-- Adjust width of text container (580px MAX) -->
                      <table width="580" 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="30" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                              </tr>
                              <!-- H3 -->
                              <tr>
                                <td align="left" class="h3" style="font-size: 23px; line-height: 36px; letter-spacing: 0.25px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #185674; font-weight:normal">Hi there,</td>
                              </tr>
                              <tr>
                                <td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                              </tr>
                              <!-- H3 END -->
                              <!-- BODY -->
                              <tr>
                                <td align="left" class="body" style="font-size: 14px; line-height: 30px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #263645; font-weight:normal">As you may have noticed, Harry’s is getting bigger. Case in point: our recent
                                  arrival upon the bucolic shores of the United Kingdom. And, as our business grows
                                  (thanks to people like you) so does our responsibility to our customers. That’s
                                  why we’re updating our
                                  <a href="https://www.harrys.com/en/us/terms-of-service?utm_source=penpal&utm_medium=email&utm_campaign=20171017_privacy_policy_update_01"
                                  style="color: #185674;">Terms of Service</a> and our
                                  <a href="https://www.harrys.com/en/us/privacy-policy?utm_source=penpal&utm_medium=email&utm_campaign=20171017_privacy_policy_update_01"
                                  style="color: #185674;">Privacy Policy</a> to ensure our services are easier to understand, and accounts
                                  are easier to manage.
                                  <br/>
                                  <br/>As of November 17th, 2017, both will be new and improved to give you a better,
                                  more personal Harry’s experience.
                                  <br/>
                                  <br/>To start you off, we’ve highlighted some of the important changes in bullet points,
                                  to make them even easier to navigate.
                                  <br/>
                                  <br/>
                                </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 -->
                              <!-- 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: #185674; font-weight:normal; text-transform: uppercase;">Terms of Service updates</td>
                              </tr>
                              <!-- SUBHEADER END -->
                              <!-- BODY -->
                              <tr>
                                <td align="left" class="body" style="font-size: 14px; line-height: 30px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #263645; font-weight:normal">
                                  <ul>
                                    <li>We have reorganized certain information to make it clearer and easier to follow.</li>
                                    <li>We have provided more information about how our subscription services work and
                                      how our customers can manage their accounts.</li>
                                    <li>We updated our dispute resolution section, including to reflect the fact that
                                      we have selected a new arbitrator to resolve any potential disputes.</li>
                                  </ul>
                                </td>
                              </tr>
                              <!-- BODY END -->
                              <tr>
                                <td width="100%" height="20" 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: #185674; font-weight:normal; text-transform: uppercase;">Privacy Policy updates</td>
                              </tr>
                              <!-- SUBHEADER END -->
                              <!-- BODY -->
                              <tr>
                                <td align="left" class="body" style="font-size: 14px; line-height: 30px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #263645; font-weight:normal">
                                  <ul>
                                    <li>We’re excited to be certified under the EU-U.S. Privacy Shield Framework, and
                                      we have added language to reflect this update.</li>
                                    <li>We have made the Privacy Policy easier to read and navigate.</li>
                                    <li>We have added new provisions regarding how we may collect, use, and share information
                                      with third parties, and how we use data to help improve the content, products,
                                      and services provided to our customers.</li>
                                  </ul>
                                </td>
                              </tr>
                              <!-- BODY 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="left" class="body" style="font-size: 14px; line-height: 30px; letter-spacing: 0px; font-family: Verdana, Geneva, sans-serif; color: #263645; font-weight:normal">And now for the thing our lawyer says we have to say:
                                  <br/>
                                  <br/>By continuing to use our services after November 17th, 2017, you are agreeing
                                  to all of the terms of the updated
                                  <a href="https://www.harrys.com/en/us/terms-of-service?utm_source=penpal&utm_medium=email&utm_campaign=20171017_privacy_policy_update_01"
                                  style="color: #185674;">Terms of Service</a> and
                                  <a href="https://www.harrys.com/en/us/privacy-policy?utm_source=penpal&utm_medium=email&utm_campaign=20171017_privacy_policy_update_01"
                                  style="color: #185674;">Privacy Policy</a>, so we encourage you to read them in full for anything that
                                  may be important to you because the descriptions above are not comprehensive. If
                                  you do not agree with any of the changes, please refrain from using our services—even
                                  though we’d hate to see you go. For more information, you can always get in touch
                                  with us at
                                  <a href="mailto:help@harrys.com" style="color: #185674;">help@harrys.com</a>.
                                  <br/>
                                  <br/>Thanks again for your business and continued support, we’re honored to have you
                                  as part of the Harry’s family.
                                  <br/>
                                  <br/>Sincerely,
                                  <br/>The Harry’s Team</td>
                              </tr>
                              <tr>
                                <td width="100%" height="40" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                              </tr>
                              <!-- BODY END -->
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <!-- COPY BLOCK 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="/en/us?utm_campaign=20171017_privacy_policy_update_01&utm_medium=email&utm_source=penpal">
                        <img src="http://cdn.harrys.com/ca-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="https://itunes.apple.com/app/apple-store/id990024014?mt=8" 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>
            
          
!
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.
Loading ..................

Console