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.

Quick-add: + add another resource

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.

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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HARRY'S</title>
  <meta charset=utf-8>
  <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;background-color:#FFFFFF;}
    table {border-collapse: collapse; margin: 0px auto;}
    .container {min-width: 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: 24px !important;
		line-height: 36px !important;
		letter-spacing: 1px !important;
		font-weight: normal !important;
	}
	
	.body-small, .body-small a{
		font-family: 'Brandon Grotesque', Futura, Trebuchet MS, Arial, sans-serif !important;
		font-size: 15px !important;
		line-height: 28px !important;
		letter-spacing: 0.45px !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: 22px !important;
		letter-spacing: 2.3px !important;
		font-weight: bold !important;
	}
	
	.small-subheader, .small-subheader a{
		font-family: 'Brandon Grotesque', Futura, Trebuchet MS, Arial, sans-serif !important;
		font-size: 9px !important;
		line-height: 18px !important;
		letter-spacing: 0.5px !important;
		font-weight: bold !important;
	}	
	
	td[class="header-right"], td[class="header-right"] a{
		font-family: 'Brandon Grotesque', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	}

	
	td[class="foc-footer"], td[class="foc-footer"] a {
		font-family: 'Brandon Grotesque', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
		padding-top:3px !important;
	}

	td[class="footer-center"], td[class="footer-center"] a{
		font-family: 'Museo Sans', 'Gill Sans', 'Lucida Grande' !important;
	}
	
	.footer-brandon{
		font-family: 'Brandon Grotesque', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
		letter-spacing:1px !important;
	}
	
}
	
    /* APPLE BLUE LINKS */
    .smart-7a7a7a a {color:#7a7a7a !important; text-decoration: none !important;}
    .smart-565656 a {color:#565656 !important; text-decoration: none !important;}
    .smart-FFFFFF a {color:#FFFFFF !important; text-decoration: none !important;}

	/* MEDIA QUERY SCREEN 620px */
    @media screen and (max-width: 620px), screen and (max-device-width: 620px) {
		
		 table[class="full-table-early"], td[class="full-table-early"]{
	        width:100%!important;
	        min-width: 0 !important;
	    }
	    
	    td[class="mobile-hide-early"] {
			height: 1px !important;
			display: none !important;
			min-width:inherit !important;
		}
		
		td[class="hero"] {
			padding: 0 20px !important;
		}
		
		td[class="hero"] img {
			width: 100% !important;
			height: auto !important;
		}
				
		td[class="copy-block"] {
		    padding: 0 20px !important;
		}	 

	}

   
       /* MEDIA QUERY SCREEN 579px */
    @media screen and (max-width: 579px), screen and (max-device-width: 579px) {
	    table[class="full-table"]{
	        width:100%!important;
	        min-width: 0 !important;
	    }
	    		
		*[class="head"]{display:table-header-group!important; width:100%!important;}
		*[class="foot"]{display:table-footer-group!important; width:100%!important;}
		.head:after{
		  content:'---------------------------------------------------------------------------------------------------------------------';
		  max-height:0;
		  overflow:hidden;
		  display:block;
		}
		
		td[class="footer-center"]{
			text-align: center !important;
			padding: 0 !important;
		}
		
		table[class="footer-column"]{
	        width:280px !important;
	        text-align:center !important;
	        min-width: 0 !important;
	    }
	    
	    .footer-mobile-hide {
			height: 1px !important;
			display: none !important;
			min-width:inherit !important;
		}
		
	    #footer-bar:after {
		    content:" | " !important;
		    padding: 10px 5px 0 5px !important;
		}
			    
	    td[class="padding-20"] img{
	         padding: 0 10px 0 10px !important;
	    }
	    
}
    
    /* MEDIA QUERY SCREEN 414px */
    @media screen and (max-width: 414px), screen and (max-device-width: 414px) {
    	td[class="mobile-hide"] {
			height: 1px !important;
			display: none !important;
		}

}

    /* MEDIA QUERY SCREEN 300px */
    @media screen and (max-width: 300px), screen and (max-device-width: 300px) {
    	td[class="mobile-hide-xs"], tr[class="mobile-hide-xs"] {
			height: 1px !important;
			display: none !important;
		}

}
  </style>
</head>

<body bgcolor="#F6F6F6" style="-webkit-font-smoothing: antialiased; width:100% !important; background:#f3f2f0;-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 proudly own our factory, where our German team has been making some of the world’s sharpest blades for nearly a century. Now, we're lifting the curtain so you can see how we do it.</span>

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

        <!-- HEADER -->
        <table bgcolor="#E7E7E7" cellspacing="0" cellpadding="0" border="0" width="100%">

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

          <tr>
            <td bgcolor="#E7E7E7" align="center">
              <a href="http://fiveoclock.harrys.com?utm_source=penpal&utm_medium=email&utm_campaign=201604_q_blades_warmup">
                <img src="http://cdn.harrys.com/email/one-off/20160406_post-shave/5OC.png" width="250" height="88" style="font-size: 26px; line-height: 88px; letter-spacing: 3.5px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #1F2A35; font-weight:normal; text-align: center; width:250px; height:88px; display:block;"
                  alt="FIVE O' CLOCK" border="0">
              </a>
            </td>
          </tr>

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

          <tr class="mobile-hide-xs">
            <td class="small-subheader" align="center" style="font-size: 8px; line-height: 18px; letter-spacing: 0.5px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #A17C52; font-weight:normal; text-transform: uppercase;">
              <a href="http://fiveoclock.harrys.com?utm_source=penpal&utm_medium=email&utm_campaign=201604_q_blades_warmup" style="font-size: 8px; line-height: 18px; letter-spacing: 0.5px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #A17C52; font-weight:normal; text-transform: uppercase; text-decoration: none;">
				BETTER GROOMING 
			</a>
              <span style="padding:0 6px;">|</span>
              <a href="http://fiveoclock.harrys.com?utm_source=penpal&utm_medium=email&utm_campaign=201604_q_blades_warmup" style="font-size: 8px; line-height: 18px; letter-spacing: 0.5px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #A17C52; font-weight:normal; text-transform: uppercase; text-decoration: none;"> 
				BETTER MORNINGS 
			</a>
              <span style="padding:0 6px;">|</span>
              <a href="http://fiveoclock.harrys.com?utm_source=penpal&utm_medium=email&utm_campaign=201604_q_blades_warmup" style="font-size: 8px; line-height: 18px; letter-spacing: 0.5px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #A17C52; font-weight:normal; text-transform: uppercase; text-decoration: none;">
				BETTER LIFE
			</a>
              </a>
            </td>
          </tr>

          <tr>
            <td class="mobile-hide-xs" width="100%" height="12" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
          </tr>
          <tr>
            <td width="100%" height="16" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
          </tr>

        </table>
        <!-- HEADER END -->

        <!-- HERO -->
        <table bgcolor="#F6F6F6" align="center" cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <td bgcolor="#F6F6F6">
              <table class="full-table-early" width="580" cellpadding="0" cellspacing="0" border="0" align="center">

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

                <tr>
                  <td class="hero">
                    <a href="http://fiveoclock.harrys.com/2015/10/27/how-razor-blades-are-made?utm_source=penpal&utm_medium=email&utm_campaign=201604_q_blades_warmup">
                      <img src="http://cdn.harrys.com/email/one-off/20151021_quality-blades/hero.gif" width="580" height="386" border="0" alt="Harry's factory conveyor belt." style="width:580; height:386; font-size: 14px; line-height: 32px; letter-spacing: 0px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #868686; font-weight:normal; display:block;">
                    </a>
                  </td>
                </tr>

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

        <table bgcolor="#F6F6F6" align="center" cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <td bgcolor="#F6F6F6">
              <table class="full-table-early" width="580" cellpadding="0" cellspacing="0" border="0" align="center">
                <tr>
                  <td>
                    <table class="full-table" width="360" align="left" border="0" cellpadding="0" cellspacing="0">

                      <tr>
                        <td class="copy-block">
                          <table cellspacing="0" cellpadding="0" width="100%">
                            <tr>
                              <td class="h1" align="left" style="font-size: 23px; line-height: 36px; letter-spacing: 0px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #1F2A35; font-weight:normal">
                                <a href="http://fiveoclock.harrys.com/2015/10/27/how-razor-blades-are-made?utm_source=penpal&utm_medium=email&utm_campaign=201604_q_blades_warmup" style="font-size: 23px; line-height: 36px; letter-spacing: 0px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #1F2A35; font-weight:normal; text-decoration: none;">
													How Razor Blades Are&nbsp;Made
												</a>
                              </td>
                            </tr>

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

                            <tr>
                              <td class="body-small" align="left" style="font-size: 14px; line-height: 32px; letter-spacing: 0px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #1F2A35; font-weight:normal">
                                <a href="http://fiveoclock.harrys.com/2015/10/27/how-razor-blades-are-made?utm_source=penpal&utm_medium=email&utm_campaign=201604_q_blades_warmup" style="font-size: 14px; line-height: 32px; letter-spacing: 0px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #1F2A35; font-weight:normal; text-decoration: none;">
													We proudly own our factory, where our German team has&nbsp;been making some of the world’s sharpest blades for nearly a century. Now, we're lifting the curtain so you can see how we do it.
												</a>
                              </td>

                            </tr>

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

                            <tr>
                              <td class="subheader" align="left" style="font-size: 11px; line-height: 22px; letter-spacing: 2.6px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #1F2A35; font-weight:normal;">
                                <a href="http://fiveoclock.harrys.com/2015/10/27/how-razor-blades-are-made?utm_source=penpal&utm_medium=email&utm_campaign=201604_q_blades_warmup" style="font-size: 11px; line-height: 22px; letter-spacing: 2.6px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #1F2A35; font-weight:normal; border-bottom: 1px solid; border-bottom-color: #1F2A35; padding-bottom: 4px; text-decoration: none;">
													EXPLORE THE PROCESS
												</a>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td width="100%" height="60" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
          </tr>
        </table>

        <!-- SHOP -->
        <table bgcolor="#F6F6F6" align="center" cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <td bgcolor="#F6F6F6">
              <table class="full-table-early" width="580" cellpadding="0" cellspacing="0" border="0" align="center">

                <tr>
                  <td class="copy-block" align="left">
                    <a href="https://www.harrys.com/products?utm_source=penpal&utm_medium=email&utm_campaign=201604_q_blades_warmup#grooming-supplies">
                      <img src="http://cdn.harrys.com/email/one-off/20160406_post-shave/shop.png" width="81" height="41" border="0" style="width:81; height:41; font-size: 10px; line-height: 41px; letter-spacing: 0.5px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #868686; font-weight: normal; display:block; background-color: #FFFFFF;"
                        alt="SHOP">
                    </a>
                  </td>
                </tr>

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

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

                <tr>
                  <td class="copy-block" align="left">
                    <a href="https://www.harrys.com/products?utm_source=penpal&utm_medium=email&utm_campaign=201604_q_blades_warmup#grooming-supplies">
                      <img src="http://cdn.harrys.com/email/one-off/20160406_post-shave/harrys.png" width="81" height="41" border="0" style="width:81; height:41; font-size: 10px; line-height: 41px; letter-spacing: 0.5px; font-family: Futura, Trebuchet MS, Arial, sans-serif; color: #868686; font-weight: normal; display:block; background-color: #FFFFFF;"
                        alt="HARRY'S">
                    </a>
                  </td>
                </tr>

              </table>
            </td>
          </tr>
        </table>
        <!-- HARRY'S END -->

        <!-- FOOTER -->
        <table bgcolor="#f3f2f0" border="0" cellpadding="0" cellspacing="0" width="100%">

          <tr>
            <td bgcolor="#f3f2f0" align="left" valign="top" width="100%" height="100">
              <table align="center" cellspacing="0" cellpadding="0" width="100%">
                <tr>

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

                  <td>
                    <table class="full-table" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
                      <tr>
                        <td align="center">
                          <table class="footer-column" width="580" cellpadding="0" cellspacing="0" border="0" align="center">
                            <tr>
                              <td>

                                <!-- COLUMN 01 -->
                                <div class="foot">
                                  <table class="footer-column" width="360" align="left" border="0" cellpadding="0" cellspacing="0">

                                    <tr>
                                      <td class="footer-center" align="left" style="font-size: 11px; line-height: 22px; font-family: Verdana, Helvetica, sans-serif; color: #7a7a7a; font-weight: normal;">
                                        <span class="smart-7a7a7a" style="font-weight:bold;">&copy; 2016 Harry's, Inc. All Rights Reserved. </span>
                                        <br> Harry's, H', Mammoth Design, Give a Shave, and&nbsp;Truman are&nbsp;trademarks&nbsp;and/or registered trademarks&nbsp;of&nbsp;Harry's, Inc.
                                        <br><br>
                                        <span class="smart-7a7a7a">PO Box 566, <span style="white-space:nowrap;">New York, NY, 10014</span></span>
                                        <br>
                                        <a href="https://www.harrys.com/profile/email/unsubscribe?email=email&token=unsubscribe_token" class="smart-7a7a7a" style="font-size: 11px; line-height: 22px; font-family: Verdana, Helvetica, sans-serif; text-decoration:none; color: #7a7a7a; font-weight:bold;">Unsubscribe</a>
                                      </td>

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

                                <!-- COLUMN 02 -->
                                <div class="head">
                                  <table class="footer-column" width="117" align="left" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td class="footer-center" align="left" style="font-size: 10px; line-height: 22px; font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif; color: #7a7a7a; letter-spacing: 1px; font-weight: bold; padding: 0 40px 0 40px;">
                                        <span class="footer-brandon">CONTACT</span>
                                      </td>
                                    </tr>
                                    <tr>
                                      <td class="footer-center" align="left" style="font-size: 11px; line-height: 22px; font-family: Verdana, Helvetica, sans-serif; color: #7a7a7a; font-weight: normal; padding: 0 40px 0 40px;">
                                        <a class="smart-7a7a7a" href="mailto:help@harrys.com" style="font-size: 11px; line-height: 22px; font-family: Verdana, Helvetica, sans-serif; color: #7a7a7a; font-weight: normal; text-decoration: none;">help@harrys.com</a>
                                        <span id="footer-bar">&nbsp;</span>

                                        <span class="footer-mobile-hide"><br></span>

                                        <a href="tel:8882126855" class="smart-7a7a7a" style="font-size: 11px; line-height: 22px; font-family: Verdana, Helvetica, sans-serif; color: #7a7a7a; font-weight: normal; text-decoration: none;">888 212 6855</a>
                                      </td>

                                    </tr>
                                    <tr>
                                      <td width="100%" height="25" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                    </tr>
                                    <tr>
                                      <td bgcolor="#f3f2f0" style="padding: 0 40px 0 40px;">
                                        <table cellspacing="0" cellpadding="0" width="117">
                                          <tr>
                                            <td>
                                              <table border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                  <td class="padding-20">
                                                    <a href="https://www.facebook.com/hapostrophe">
                                                      <img src="http://cdn.harrys.com/email/one-off/20150916_pre-shave/facebook.png" width="22" height="23" border="0" style="display:block;">
                                                    </a>
                                                  </td>
                                                </tr>
                                              </table>
                                            </td>
                                            <td align="center">
                                              <table border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                  <td class="padding-20">
                                                    <a href="https://twitter.com/harrys">
                                                      <img src="http://cdn.harrys.com/email/one-off/20150916_pre-shave/twitter.png" width="32" height="23" border="0" style="display:block;">
                                                    </a>
                                                  </td>
                                                </tr>
                                              </table>
                                            </td>
                                            <td align="center">
                                              <table border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                  <td class="padding-20">
                                                    <a href="https://instagram.com/harrys">
                                                      <img src="http://cdn.harrys.com/email/one-off/20150916_pre-shave/instagram.png" width="36" height="23" border="0" style="display:block;">
                                                    </a>
                                                  </td>
                                                </tr>
                                              </table>
                                            </td>
                                            <td align="center">
                                              <table border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                  <td class="padding-20">
                                                    <a href="https://plus.google.com/+HarrysGrooming">
                                                      <img src="http://cdn.harrys.com/email/one-off/20150916_pre-shave/google.png" width="27" height="23" border="0" style="display:block;">
                                                    </a>
                                                  </td>
                                                </tr>
                                              </table>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td width="100%" height="30" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                          </tr>
                                        </table>

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

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

        <!-- LITMUS -->

        <!-- LITMUS END -->

        <!-- CONTAINER TABLE END -->
      </td>
    </tr>
    <!-- GMAIL ANDROID FIX -->
    <tr>
      <td class="mobile-hide-early"><img src="http://cdn.harrys.com/email/global/spacer.gif" height="1" style="display:block; height: 1px; min-width: 600px;"></td>
    </tr>
    <!-- GMAIL IOS FIX -->
    <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    </div>
  </table>
</body>

</html>
            
          
!
999px
Loading ..................

Console