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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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
Loading ..................

Console