css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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

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

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.

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.

            
              

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><META NAME="referrer" CONTENT="no-referrer">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title></title>
      <style>
         .ReadMsgBody {
         width: 100%;
         }
         .ExternalClass {
         width: 100%;
         }
         .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
         line-height: 100%;
         }
         table, td {
         mso-table-lspace: 0pt;
         mso-table-rspace: 0pt;
         }
         img {
         -ms-interpolation-mode: bicubic;
         }
         .appleFooter a {
         color: #999999;
         text-decoration: none;
         }
         .appleEvents a {
         color: #404141;
         font-weight: bold;
         text-decoration: none;
         }
         .min-width {
         min-width: 100% !important;
         }
         body {
         height: 100% !important;
         margin: 0!important;
         padding: 0!important;
         width: 100% !important;
         background-color: #ffffff;
         }
         table {
         border-spacing: 0;
         font-family: sans-serif;
         color: #333333;
         }
         td {
         padding: 0;
         }
         img {
         border: 0;
         font-family: ProximaNova, Arial, sans-serif;
         color: #808080;
         font-size: 14px;
         font-weight: bold;
         }
         .wrapper {
         width: 100%;
         table-layout: fixed;
         -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
         }
         .webkit {
         width: 100%;
         }
         @-ms-viewport {
         width: device-width;
         }
         .outer {
         Margin: 0 auto;
         width: 100%!important;
         max-width: 700px!important;
         border-spacing: 0;
         font-family: sans-serif;
         color: #333333;
         }
         .inner {
         padding: 20px 0 20px 0;
         text-align: center!important;
         align-content: center!important;
         }
         .inner-bg {
         background-color: #f5f5f5;
         }
         .full-width-image img {
         width: 100%!important;
         height: auto;
         }
         p {
         Margin: 0;
         text-align: center;
         font-family: 'Merriweather', georgia, times, sans-serif;
         font-size: 14px;
         color: #808080;
         line-height: 24px;
         }
         a {
         color: #bcbec0;
         text-decoration: none;
         }
         .view_online {
         text-align: right;
         font-size: 11px;
         color: #bcbec0;
         padding: 10px 10px 10px 10px;
         }
         .contents {
         width: 100%;
         }
         .three-column {
         text-align: center;
         font-size: 0;
         padding-top: 10px;
         padding-bottom: 10px;
         }
         .three-column .column {
         width: 50%;
         max-width: 220px;
         display: inline-block;
         vertical-align: top;
         padding: 20px 0 20px 0;
         }
         .three-column .contents {
         font-size: 14px;
         text-align: center;
         }
         .three-column img {
         width: 100%;
         height: auto;
         }
         .three-column .text {
         padding-top: 10px;
         }
         .footer_menu .contents {
         font-family: 'Merriweather', georgia, times, sans-serif;
         font-size: 16px;
         text-align: center;
         width: 100%!important;
         }
         .contents a {
         color: #808080;
         text-decoration: none;
         display: block;
         line-height: 60px;
         width: 100%;
         -webkit-text-size-adjust: none;
         mso-hide: all;
         }
         .location {
         padding: 40px 0 40px 0;
         }
         .location .contents {
         font-family: 'Merriweather', georgia, times, sans-serif;
         font-size: 16px;
         text-align: center;
         }
         .location a {
         font-family: 'Merriweather', georgia, times, sans-serif;
         font-size: 12px;
         color: #808080;
         text-decoration: none;
         font-style: normal;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         width: 100%;
         }
         .location a span {
         font-family: ProximaNova, Arial, sans-serif;
         font-size: 14px;
         color: #4d4d4d;
         text-align: center;
         text-decoration: none;
         /*text-transform: uppercase;*/
         padding-bottom: 5px;
         display: block;
         width: 100%;
         }
         .footer {
         text-align: center;
         font-family: Helvetica, Arial, sans-serif;
         font-weight: normal;
         line-height: 20px;
         text-transform: none;
         font-size: 12px;
         color: #bcbec0;
         padding: 20px 20px 20px 20px;
         }
         .cities {
         font-family: ProximaNova, Arial, sans-serif;
         font-size: 11px;
         line-height: 22px;
         color: #4d4d4d;
         text-decoration: none;
         text-transform: uppercase;
         letter-spacing: 2px;
         text-align: center;
         }
         .line-bottom, .line {
         border-bottom: 1px solid #E6E6E6!important;
         }
         .line-top {
         border-top: 1px solid #E6E6E6!important;
         }
         .line-right {
         border-right: 1px solid #E6E6E6!important;
         }
         .line-left {
         border-left: 1px solid #E6E6E6!important;
         }
      </style>
      <style>
         @media screen and (max-width: 620px) {
         .hide {
         display: none!important;
         }
         .two-column .column, .three-column .column {
         max-width: 100% !important;
         }
         .three-column img {
         max-width: 50% !important;
         }
         .block {
         display: block !important;
         width: 100% !important;
         padding: 10px 0 0 0!important;
         }
         #hero {
         display: block !important;
         background-image: url(https://s3.amazonaws.com/indochino-emailres/2017/20171225_ChristmasDay/EM1_hero_mobile.jpg) !important;
         background-size: 380px 629px !important;
         width: 380px !important;
         height: 629px !important;
         background-repeat: no-repeat !important;
         background-position: center !important;
         }
         #item1 {
         display: block !important;
         background-image: url(https://s3.amazonaws.com/indochino-emailres/2017/20171225_ChristmasDay/EM1_item1_mobile.jpg) !important;
         background-size: 380px 181px !important;
         width: 380px !important;
         height: 181px !important;
         background-repeat: no-repeat !important;
         background-position: center !important;
         }
         .line {
         border-bottom: 1px solid #E6E6E6!important;
         }
         .line-bottom, .line-top, .line-right, .line-left {
         border: 0px!important;
         }
         .item {
         min-width: 180px;
         }
         .line-mobile {
         border-bottom: 1px #E6E6E6 solid!important;
         }
         }
      </style>
      
      <style>
         @media screen and (max-width: 320px) {
         .outer {
         Margin: 0 auto;
         width: 100% !important;
         }
         .inner {
         padding: 20px 20px 20px 20px!important;
         }
         .block {
         display: block !important;
         width: 100% !important;
         padding: 10px 0 0 0!important;
         }
         .view_online {
         font-size: 10px;
         }
         .showroom {
         display: block!important;
         }
         .button {
         width: 80%;
         }
         #hero {
         display: block !important;
         background-image: url(https://s3.amazonaws.com/indochino-emailres/2017/20171225_ChristmasDay/EM1_hero_mobile.jpg) !important;
         background-size: 320px 530px !important;
         width: 320px !important;
         height: 530px !important;
         background-repeat: no-repeat !important;
         background-position: center !important;
         }
         #item1 {
         display: block !important;
         background-image: url(https://s3.amazonaws.com/indochino-emailres/2017/20171225_ChristmasDay/EM1_item1_mobile.jpg) !important;
         background-size: 320px 152px !important;
         width: 320px !important;
         height: 152px !important;
         background-repeat: no-repeat !important;
         background-position: center !important;
         }  
         .line {
         border-bottom: 1px #E6E6E6 solid!important;
         }
         .line-bottom, .line-top, .line-right, .line-left {
         border: 0px!important;
         }
         .item {
         min-width: 140px;
         }
         .line-mobile {
         border-bottom: 1px #E6E6E6 solid!important;
         }
         }
      </style>
      <style>
         @media screen and (device-width: 768px) and (device-height: 1024px) {
         body {
         min-width: 701px !important;
         }
      </style>
      <style>
         @media screen and (max-width: 620px) {
         bobody[yahoo] .hide, span[class="hide"], td[class="hide"], img[class="hide"] {
         display: none!important;
         }
      </style>
      <style>
         @import url(http://fonts.googleapis.com/css?family=Merriweather);
         padding: 0;
         }
      </style>
      <style>
         body, table, td, a {
         -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
         }
      </style>
      <style type="text/css">
         /* ANDROID CENTER FIX */
         body {
         margin: 0 !important;
         }
         div[style*="margin: 16px 0"] {
         margin: 0 !important;
         }
      </style>
      <style>
         /*Fixing gap on th right in Gmail*/  
         u + .body .gwfw {
         width: 100% !important;
         width: 100vw !important;
         }
      </style>
      <!--[if mso]>
      <style type="text/css">
         table {border-collapse: collapse !important;}
      </style>
      <![endif]-->
      <style type="text/css">
         /*carousel styles*/
         input { display: none; } /*yahoo fix*/
         body{
         padding:0;
         }
         @media screen and (-webkit-min-device-pixel-ratio: 0) {
         /* bugfix for Android 4.4 to support e ~ y */
         body { -webkit-animation: bugfix infinite 1s; }
         @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
         /* Hide Fallback content first */
         .fallback{
         display:none;
         }
         .carousel{
         display:block !important;
         max-height:none !important;
         position:relative;
         }
         #MessageViewBody .fallback,
         body.MsgBody .fallback{
         display:block;
         }
         #MessageViewBody .carousel,
         body.MsgBody .carousel{
         display:none !important;
         }
         input{display:none;}
         .carousel a{
         width:100%;
         display:block;
         overflow:hidden;
         }
         .carousel .car-frames img{
         display:block!important;
         width:100% !important;
         height:auto !important;
         }
         .carousel.responsive{
         width:100% !important;
         }
         .carousel.slide a{
         position:absolute;
         top:0px;
         left:0px;
         opacity:1;
         width:100%;
         -webkit-animation: slide-anim 15s linear infinite;
         }
         .carousel.slide a:nth-child(1){
         position:relative;
         -webkit-animation-delay: -16s;
         }
         .carousel.slide a:nth-child(2){
         -webkit-animation-delay: -11s;
         }
         .carousel.slide a:nth-child(3){
         -webkit-animation-delay: -6s;
         }
         /* iOS doesn't like negative delay with translates (transform:translateX(100%);) */
         /* So we use margin although it is less "smooth" */
         @-webkit-keyframes slide-anim
         {
         /* start slide in */
         0% {
         margin-left:100%;
         }
         /* end slide in */
         5%{
         margin-left:0%;
         }
         /* start slide out */
         33.3333%{
         margin-left:0%;
         }
         /* end slide out */
         38.3333%{
         margin-left:-100%;
         }
         100%{
         margin-left:-100%;
         }
         }
         .carousel.slide .car-radio:checked ~ .car-cont .car-frames{
         position:relative;
         left:0px;
         top:0px;
         width: 300% !important;
         transition: left 1s;
         }
         .carousel.slide .car-radio2:checked ~ .car-cont  .car-frames{
         left:-100%;
         }
         .carousel.slide .car-radio3:checked ~ .car-cont  .car-frames{
         left:-200%;
         }
         .carousel.slide .car-radio:checked ~ .car-cont a{
         width:33.333%;
         }
         .carousel.slide .car-radio:checked ~ .car-cont a:nth-child(2){
         position:absolute;
         left:33.333%;
         top:0px;
         }
         .carousel.slide .car-radio:checked ~ .car-cont a:nth-child(3){
         position:absolute;
         left:66.666%;
         top:0px;
         }
         /* Navigation arrows */
         .carousel .car-ltn,
         .carousel .car-rtn {
         z-index:100;
         display: none;
         width: 8%;
         height: 26%;
         position: absolute;
         background-color: rgba(64, 64, 64, 0.45);
         top: 40%;
         cursor: pointer;
         }
         .car-ltn {
         left:0px;
         }
         .car-rtn {
         right:0px;
         }
         .carousel .car-ltn::after,
         .carousel .car-rtn::after {
         content: '';
         width: 0;
         height: 0;
         border-top: 8px solid transparent;
         border-bottom: 8px solid transparent;
         position: absolute;
         top:50%;
         margin-top:-8px;
         }
         .car-ltn::after {
         border-right: 8px solid #ffffff;
         left: 30%;
         }
         .car-rtn::after {
         border-left: 8px solid #ffffff;
         right: 30%;
         }
         .carousel #car-cbox-support:checked ~ .car-cont .car-nav-1 {
         display:block;
         }
         .car-radio2:checked ~ .car-cont .car-controls .car-nav-2,
         .car-radio3:checked ~ .car-cont .car-controls .car-nav-3 {
         display:block;
         }
         .carousel .car-radio:checked ~ .car-cont,
         .carousel .car-radio:checked ~ .car-cont *,
         .carousel .car-radio:checked ~ .car-thumbnails *  {
         -webkit-animation: none;
         }
         /* Thumbnails */
         .carousel #car-cbox-support:checked ~ .car-thumbnails {
         display:block!important;
         text-align:center;
         position:relative;
         }
         .carousel .car-thumb {
         width: 20%;
         opacity:0.5;
         z-index:100;
         cursor:pointer;
         display:inline-block;
         margin:3% 2%;
         }
         .carousel .car-thumb img{
         border:2px solid #e4e4e4;
         width: 100%;
         height: auto;
         }
         @-webkit-keyframes focus3-anim
         {
         0% {opacity: 1;}
         33.33%  {opacity: 1;}
         34% {opacity: 0.5;}
         }
         /* to eliminate use of delay */
         @-webkit-keyframes focus3-anim-2
         {
         33.33%  {opacity: 0.5;}
         34% {opacity: 1;}
         66.66%  {opacity: 1;}
         67%  {opacity: 0.5;}
         }
         @-webkit-keyframes focus3-anim-3
         {
         66.66%  {opacity: 0.5;}
         67% {opacity: 1;}
         100% {opacity:1;}
         }
         .car-thumb:nth-child(1){
         -webkit-animation: focus3-anim 15s linear infinite;
         }
         .car-thumb:nth-child(2){
         /*-webkit-animation: focus3-anim 15s linear  5s infinite;*/
         -webkit-animation: focus3-anim-2 15s linear infinite;
         }
         .car-thumb:nth-child(3){
         /*-webkit-animation: focus3-anim 15s linear  10s infinite;*/
         -webkit-animation: focus3-anim-3 15s linear infinite;
         }
         .car-radio:checked ~ .car-thumbnails .car-thumb:nth-child(1){
         opacity:0.5 !important;
         }
         .car-radio1:checked ~ .car-thumbnails .car-thumb:nth-child(1){
         opacity:1 !important;
         }
         .car-radio2:checked ~ .car-thumbnails  .car-thumb:nth-child(2),
         .car-radio3:checked ~ .car-thumbnails  .car-thumb:nth-child(3){
         opacity:1;
         }
         }
      </style>
      <!--[if mso]>
      <style>
         span, td, table, div, p, a, strong, font{
         font-family: Arial, serif !important;
         }
         th {font-weight:normal !important}
      </style>
      <![endif]-->
      <!--[if gte mso 9]>
      <xml>
         <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
         </o:OfficeDocumentSettings>
      </xml>
      <![endif]--> 
   </head>
   <body  style="-webkit-font-smoothing: antialiased; width:100% !important; -webkit-text-size-adjust:none; margin:0; padding:0; min-width:100%"><style type="text/css">
div.preheader 
{ display: none !important; } 
</style>
<div class="preheader" style="font-size: 1px; display: none !important;">A true classic from only $399 USD - take your style up a notch today</div>
      <img src="http://click.sfmcmail.indochino.com/open.aspx?ffcb10-feca157372650474-fe5915777163017c701c-fe9813727c64057d71-ff6415717c-fe5f1571776203787011-ff921178" width="1" height="1">
         <center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;" >
            <table cellspacing="0" cellpadding="0" border="0" width="100%" class="gwfw">
               <tr>
                  <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
                     <table class="outer" align="center" cellpadding="0" cellspacing="0" style="Margin:0 auto;width:100%;max-width:700px;border-spacing:0;font-family:sans-serif;color:#333333;">
                        <!-- >>>>>>> Spacer begins <<<<<<<<<<< -->
                        <tr>
                           <td class="space20" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;height:20px;font-size:20px;line-height:20px;" >&nbsp;</td>
                        </tr>
                        <!-- >>>>>>> Spacer ends <<<<<<<<<<< --> 
                        <!-- >>>>>>> New Header begins<<<<<<<<<<< -->
                        <tr>
                           <td align="center" valign="top" >
                              <!-- CENTERING TABLE // --> 
                              <!--[if mso]>
                              <table width="350" style="border-spacing:0;font-family:sans-serif;color:#333333;" >
                                 <tr>
                                    <td width="350" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
                                       <![endif]-->
                                       <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                          <!-- >>>>>>> LOGO begins<<<<<<<<<<< -->
                                          <tr>
                                             <td align="center" style="padding-top:10;padding-bottom:20px;padding-right:0;padding-left:0;"><a href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3b71fe077abd6187152cb7fa041736421064b2282909a7200f67ffeb103f9cebb57c226b7eb7c0534680523a154714075a" target="_blank" style="text-decoration:none;color:#bcbec0;" ><img src="https://s3.amazonaws.com/indochino-emailres/Indochino_logo.png" alt="INDOCHINO" width="162" class="flex"  border="0" align="center" style="border-width:0;font-family:ProximaNova, Arial, sans-serif;color:#808080;font-size:14px;font-weight:bold;" ></a></td>
                                          </tr>
                                          <!-- >>>>>>> LOGO ends<<<<<<<<<<< --> 
                                          <!-- >>>>>>> Top Menu Starts <<<<<<<<<<< -->
                                       </table>
                                       <!--[if mso]>
                                    </td>
                                 </tr>
                              </table>
                              <![endif]--> 
                              <!-- // CENTERING TABLE -->
                           </td>
                           <!-- >>>>>>> Top Menu ends <<<<<<<<<<< --> 
                        </tr>
                        <!-- >>>>>>> New Header ends<<<<<<<<<<< --> 
                        <tr>
                           <td bgcolor="#ffffff" align="center" valign="middle" style="padding:0px 0px 10px 0px; font-size:14px;font-weight:bold;border-width:0;align-items:center;font-family:ProximaNova, Arial, sans-serif;color:#808080;"><a href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3b797b4ec3c06c5b88b229f21cf86846918d2a176830f89ec1bb09c598fa64eacce1b9608d41facb66b726d2217cb92b2a" target="_blank" style="text-decoration:none;color:#bcbec0;"><img src="https://s3.amazonaws.com/indochino-emailres/2018/20180424_BestInShow/EM1_hero_desktop.jpg" alt="" style="display:block;border:none;width: 100%; max-width: 700px;" width="700"></a></td>
                        </tr>
                        <tr>
                           <td >
                              <table align="center" border="0" cellpadding="0" cellspacing="0"  role="presentation" style="width:100%;max-width:700px;margin:0 auto;text-align:center;width:100%;max-width:700px;">
                                 <tbody>
                                    <tr>
                                       <td >
                                          <table class="device-width" width="" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="border-collapse: collapse;table-layout: fixed;" role="presentation">
                                             <tbody>
                                                <tr role="navigation">
                                                   <td valign="top" style="text-align:center!important;">
                                                      <!--[if !mso]><!-- -->
                                                      <div class="carousel slide responsive" style="overflow:hidden;display:none;max-height:0px;width:700px;">
                                                         <input id="car-cbox-support" type="checkbox" checked style="display:none!important">
                                                         <input name="car-radio" type=radio id="car1-radio-1" class="car-radio car-radio1" style="display:none!important">
                                                         <input name="car-radio" type=radio id="car1-radio-2" class="car-radio car-radio2" style="display:none!important">
                                                         <input name="car-radio" type=radio id="car1-radio-3" class="car-radio car-radio3" style="display:none!important">
                                                         <input name="car-radio" type=radio id="car1-radio-4" class="car-radio car-radio4" style="display:none!important">
                                                         <div class="car-cont" style="position:relative;background-color:#ffffff;">
                                                            <div class="car-frames">
                                                               <a target="_blank" href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3b05f0796960cc95bb49b7284aaac35c565caf131ef0a7f07d6b7e1487cfb5b2bd337ad585bf33ad7898c8418217c68d8b"><img class="zoom-in" src="https://wiredmessengerimages.s3.amazonaws.com/indochino/02-harfort-fineline.jpg" border="0"></a>
                                                               <a target="_blank" href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3bbdb1736c6f6aa7ff0b681a9b5ce8cb46897e6e57035c1c526e9fc6d4410f37231a2818dafc2bcec0266c6696d30e34a4"><img class="zoom-out" src="https://wiredmessengerimages.s3.amazonaws.com/indochino/03-hamilton-sharksin.jpg" border="0"></a>
                                                               <a target="_blank" href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3bc86d493b1f131dd7bef6f11bda14a45eb5bd4195887dc7f230224fb1930af82cbc1e11a5135ce57c538c57fb9efde754"><img class="pan-right" src="https://wiredmessengerimages.s3.amazonaws.com/indochino/04-harrogate-midnight.jpg" border="0"></a>
                                                            </div>
                                                            <div class="car-controls">
                                                               <label for="car1-radio-3" class="car-ltn car-nav-1"></label>
                                                               <label for="car1-radio-2" class="car-rtn car-nav-1"></label>
                                                               <label for="car1-radio-1" class="car-ltn car-nav-2"></label>
                                                               <label for="car1-radio-3" class="car-rtn car-nav-2"></label>
                                                               <label for="car1-radio-2" class="car-ltn car-nav-3"></label>
                                                               <label for="car1-radio-1" class="car-rtn car-nav-3"></label>
                                                            </div>
                                                         </div>
                                                         <div class="car-thumbnails" style="display:none;">
                                                            <label for="car1-radio-1" class="car-thumb"><img src="https://wiredmessengerimages.s3.amazonaws.com/indochino/02-harfort-fineline-thumb.jpg"><span style="font-size:12px!important">Hartford Fineline Navy<br>Suit</span></label>
                                                            <label for="car1-radio-2" class="car-thumb"><img src="https://wiredmessengerimages.s3.amazonaws.com/indochino/03-hamilton-sharksin-thumb.jpg"><span style="font-size:12px!important">Hamilton Sharkskin Gray Suit</span></label>
                                                            <label for="car1-radio-3" class="car-thumb"><img src="https://wiredmessengerimages.s3.amazonaws.com/indochino/04-harrogate-midnight-thumb.jpg"><span style="font-size:12px!important">Harrogate Midnight<br>Suit</span></label>
                                                         </div>
                                                      </div>
                                                      <!--<![endif]-->
                                                      <div class="fallback">
                                                         <div class="layout one-col fixed-width" style="Margin: 0 auto;max-width: 700px;min-width: 100%; width: 100%;width: calc(28000% - 167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
                                                            <div class="inner-layout top-corners" style="border-collapse: collapse;display: table;width: 100%;background-color: #ffffff;" >
                                                               <!--[if (mso)|(IE)]>
                                                               <table align="center" cellpadding="0" cellspacing="0" role="presentation">
                                                                  <tr class="layout-fixed-width" >
                                                                     <td style="background-color: #ffffff;width: 700px" class="w560">
                                                                        <![endif]-->
                                                                        <div class="column" style='text-align: left;color: #5e514d;font-size: 14px;line-height: 21px;font-family: Arial, Helvetica, sans-serif;max-width: 700px;min-width: 100%; width: 100%;width: calc(28000% - 167400px);'>
                                                                           <div style="font-size: 12px;font-style: normal;font-weight: normal;" align="center">
                                                                              <a target="_blank" href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3bce8f06ad3592f296056702b4a935c895fc277f56a4e50991c49985959875e3844241f1eb7763b82a582d30b3ca20e1ac">
                                                                              <img style="border: 0;display: block;height: auto;width: 100%;max-width: 700px;" alt="Kingsbridge Gray Suit" width="700" src="https://www.indochino.com/imageresizer/productimages/s/760x570/1517427581.1871952160.additional.original.jpg" />
                                                                              </a>
                                                                           </div>
                                                                        </div>
                                                                        <!--[if (mso)|(IE)]>
                                                                     </td>
                                                                  </tr>
                                                               </table>
                                                               <![endif]-->
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </td>
                                                </tr>
                                             </tbody>
                                          </table>
                                       </td>
                                    </tr>
                                 </tbody>
                              </table>
                           </td>
                        </tr>
                        <tr>
                           <td bgcolor="#ffffff" align="center" valign="middle" style="padding:20px 0 20px 0; font-size:14px;font-weight:bold;border-width:0;align-items:center;font-family:ProximaNova, Arial, sans-serif;color:#808080;"><img src="https://s3.amazonaws.com/indochino-emailres/2017/Canadian_leaf_grey.png" alt="" title="" border="0" align="center" width="20" height="20" />&nbsp;Canadian Pricing Also Available</td>
                        </tr>
                        <!-- >>>>>>> 3 Columns Footer begins<<<<<<<<<<< -->
                        <tr>
                           <td class="location" style="padding-top:40px;padding-bottom:40px;padding-right:0;padding-left:0;" >
                              <!--[if (gte mso 9)|(IE)]>
                              <table width="580" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;font-family:sans-serif;color:#333333;" >
                                 <tr>
                                    <td align="center">
                                       <![endif]-->
                                       <table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;font-family:sans-serif;color:#333333;">
                                          <tr>
                                             <!-- >>>>>>> Free Shipping begins<<<<<<<<<<< -->
                                             <td valign="top" align="center" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" ><a href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3b3f7838dd8386f890eeb320414b0f36e95ab99f7799fb78eaeaee43a748de58f00db55865ecc49943c7e198c4a3c70ed6" target="_blank" style="font-family:'Merriweather', georgia, times, sans-serif;font-size:12px;color:#808080;text-decoration:none;font-style:normal;text-align:center;display:inline-block;width:100%;" > <span class="h4" style="line-height:18px;font-family:ProximaNova, Arial, sans-serif;font-size:11px;color:#4d4d4d;text-align:center;text-decoration:none;text-transform:uppercase;padding-bottom:5px;display:block;width:100%;" ><strong>Free Shipping</strong><br>
                                                </span> <span style="width:100%;line-height:18px;font-family:'Merriweather', georgia, times, sans-serif;font-size:12px;color:#808080;text-align:center;text-decoration:none;text-justify:center;padding-bottom:5px;display:block;">On orders<br />
                                                over $150 </span></a>
                                             </td>
                                             <!-- >>>>>>> Free Shipping ends     <<<<<<<<<<< --> 
                                             <!-- >>>>>>> Showrooms begins<<<<<<<<<<< -->
                                             <td valign="top" align="center" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" ><a href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3b20785f0934f51a0923d4500572f001058541379b19ef4b0e4b63616cc0a5900e94abd633f689f1261d23d4f10067d16c" target="_blank" style="font-family:'Merriweather', georgia, times, sans-serif;font-size:12px;color:#808080;text-decoration:none;font-style:normal;text-align:center;display:inline-block;width:100%;" > <span class="h4" style="line-height:18px;font-family:ProximaNova, Arial, sans-serif;font-size:11px;color:#4d4d4d;text-align:center;text-decoration:none;text-transform:uppercase;padding-bottom:5px;display:block;width:100%;" ><strong>Showrooms</strong><br>
                                                </span> <span style="width:100%;line-height:18px;font-family:'Merriweather', georgia, times, sans-serif;font-size:12px;color:#808080;text-align:center;text-decoration:none;text-justify:center;padding-bottom:5px;display:block;">Come see us<br />
                                                in person </span></a>
                                             </td>
                                             <!-- >>>>>>> Showrooms ends      <<<<<<<<<<< --> 
                                             <!-- >>>>>>> Fit Promise begins<<<<<<<<<<< -->
                                             <td valign="top" align="center" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" ><a href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3b98d02cf8772d6b6e17ed66887153d0edad9f397d6b075f1cc31048d477f0c6124192bad12a6704e0449e4fb4dd4aed90" target="_blank" style="font-family:'Merriweather', georgia, times, sans-serif;font-size:12px;color:#808080;text-decoration:none;font-style:normal;text-align:center;display:inline-block;width:100%;" > <span class="h4" style="line-height:18px;font-family:ProximaNova, Arial, sans-serif;font-size:11px;color:#4d4d4d;text-align:center;text-decoration:none;text-transform:uppercase;padding-bottom:5px;display:block;width:100%;" ><strong>Fit Promise</strong><br>
                                                </span> <span style="width:100%;line-height:18px;font-family:'Merriweather', georgia, times, sans-serif;font-size:12px;color:#808080;text-align:center;text-decoration:none;text-justify:center;padding-bottom:5px;display:block;">We won't stop<br />
                                                till it fits </span></a>
                                             </td>
                                             <!-- >>>>>>> Fit Promise ends <<<<<<<<<<< --> 
                                          </tr>
                                       </table>
                                       <!--[if (gte mso 9)|(IE)]>
                                    </td>
                                 </tr>
                              </table>
                              <![endif]-->
                           </td>
                        </tr>
                        <!-- >>>>>>> 3 Columns Footer ends<<<<<<<<<<< -->
                     </table>
                  </td>
               </tr>
               <tr>
                  <td height="88" class="inner-bg" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;background-color:#f5f5f5;" >
                     <table class="outer" align="center"  cellpadding="0" cellspacing="0" style="border-spacing:0;font-family:sans-serif;color:#333333;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;width:100%;max-width:700px;Margin:0 auto;" >
                        <tr>
                           <td class="inner" align="center" style="padding-top:20px;padding-bottom:0px;padding-right:0;padding-left:0;text-align:center;align-content:center;" ><a href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3bebb0e53fb6fa6afbf3beff6e0c9653f2ae169ca87d346acf022e78ec9a2280863d064d27498e6200beadfb3e9c058f61" target="_blank" style="color:#bcbec0;text-decoration:none;" ><img src="https://s3.amazonaws.com/indochino-emailres/2016/instagram.jpg" width="44" height="44" border="0" alt="I" style="border-width:0;font-family:ProximaNova, Arial, sans-serif;color:#808080;font-size:14px;font-weight:bold;" ></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3b6ecc697a9205532bf6758525d67521327629b581ae43a01e462627427b6e18463fd5fafcef26d2cb660fe1d10b7e39d3" target="_blank" style="color:#bcbec0;text-decoration:none;" >
<img src="https://s3.amazonaws.com/indochino-emailres/2016/facebook.jpg" width="44" height="44" border="0" alt="F" style="border-width:0;font-family:ProximaNova, Arial, sans-serif;color:#808080;font-size:14px;font-weight:bold;" ></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3b53a1385a4db9753dcf07ec7271d30b9e2e0e0c666aabd9b93b4521b2826987e7cfa09203393d0b8ce067768cc86872b0" target="_blank" style="color:#bcbec0;text-decoration:none;" ><img src="https://s3.amazonaws.com/indochino-emailres/2016/twitter.jpg" width="44" height="44" border="0" alt="T" style="border-width:0;font-family:ProximaNova, Arial, sans-serif;color:#808080;font-size:14px;font-weight:bold;" ></a></td>
                        </tr>
                        <tr>
                           <td align="center" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
                              <table cellpadding="0" cellspacing="0" border="0" align="center" style="max-width:500px;border-spacing:0;font-family:sans-serif;color:#333333;" >
                                 <tr>
                                    <td align="center" class="inner cities line" style="padding-top:20px;padding-bottom:20px;padding-right:0;padding-left:0;align-content:center!important;font-family:ProximaNova, Arial, sans-serif;font-size:11px;line-height:22px;color:#4d4d4d;text-decoration:none;text-transform:uppercase;letter-spacing:2px;text-align:center!important;border-bottom-width:1px !important;border-bottom-style:solid !important;border-bottom-color:#E6E6E6 !important;" >
                                       <!--[if (gte mso 9)|(IE)]>
                                       <table width="580" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;font-family:sans-serif;color:#333333;" >
                                          <tr>
                                             <td class="inner cities" align="center" style="padding-top:20px;padding-bottom:20px;padding-right:0;padding-left:0;align-content:center!important;font-family:ProximaNova, Arial, sans-serif;font-size:11px;line-height:22px;color:#4d4d4d;text-decoration:none;text-transform:uppercase;letter-spacing:2px;text-align:center!important;" >
                                                <![endif]--> 
                                                <a href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3b20785f0934f51a0923d4500572f001058541379b19ef4b0e4b63616cc0a5900e94abd633f689f1261d23d4f10067d16c"  target="_blank" style="color:#bcbec0;text-decoration:none;" > <span class="block">FIND A SHOWROOM | BOOK AN APPOINTMENT</span> </a> 
                                                <!--[if (gte mso 9)|(IE)]>
                                             </td>
                                          </tr>
                                       </table>
                                       
                                       <![endif]-->
                                    </td>
                                 </tr>
                              </table>
                           </td>
                        </tr>
                        <tr>
                           
<td class="inner footer" align="center" style="align-content:center;text-align:center;font-family:Helvetica, Arial, sans-serif;font-weight:normal;line-height:20px;text-transform:none;font-size:12px;color:#bcbec0;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;" >*Terms and conditions: This offer applies to purchases of select suits. All prices listed in US dollars. Tuxedos are not included in this offer. Use the coupon code BEST at checkout online, or present this message at one of our showrooms. This offer is not retroactive and no adjustments will be made to prior purchases. This offer does not apply to sale items and cannot be combined with any other offers. We reserve the right to amend these terms &amp; conditions at our sole discretion. This offer expires
 at 11:59 PM EST on April 26, 2018. For assistance email <a href="mailto:help@indochino.com" target="_blank" style="color:#bcbec0;text-decoration:none;" >help@indochino.com</a>.<br>
                              <br>
                              This email was sent by: Indochino
                              300-720 Robson Street 
                              Vancouver, BC, V6Z 1A1, CA <br>
                              <a href="#" target="_blank" style="color:#bcbec0;text-decoration:none;" >Update preferences or unsubscribe</a> &#124; <a href="#" style="color:#bcbec0;text-decoration:none;" >View Email as Webpage</a>
                           </td>
                        </tr>
                        <tr>
                           <td class="inner footer" align="center" style="align-content:center;text-align:center;font-family:Helvetica, Arial, sans-serif;font-weight:normal;line-height:20px;text-transform:none;font-size:12px;color:#bcbec0;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;" > <a href="http://click.sfmcmail.indochino.com/?qs=c6596791a792ff3be5a429ee6d72d6a636f474587d087f754896f52592256302f3ab1c1a0f5377de606d87c0d6fbf42454fa77cc59048859"><img src="https://wiredmessengerimages.s3.amazonaws.com/interactive-wm-logo-140.png"></a></td>
                        </tr>
                     </table>
                  </td>
               </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]--> 
            <!--                                           
             
               
               -->
         </center>
      </custom>
   </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