123

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>
<!-- TRYING TO FIND A CYBER MONDAY DISCOUNT CODE? I'D LOOK FOR A KEYBOARD SHORTCUT TO ACTIVATE YOUR NEXT CLUE IF I WERE YOU =P -->
<html>
  <head>
    <meta charset="utf-8">
    <title>EmailTees</title>
    <style type="text/css">
      .link:hover {
              text-decoration: none !important;
          }
      	u + #body a {
      		color: inherit;
      	}
          u + #body a.link {
          	color: #0088cc !important;
          }
    </style>
    <style type="text/css">
      a[x-apple-data-detectors] {
              color: inherit !important;
              text-decoration: none !important;
              font-size: inherit !important;
              font-family: inherit !important;
              font-weight: inherit !important;
              line-height: inherit !important;
          }
    </style>
    <style type="text/css">
      table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;}
          body {margin:0; padding:0;}
          img {border:0; outline:none;}
          u ~ div img + div {
          	display: none;
          }
    </style>
    <style>
      @media screen and (min-width: 600px) {
      	.td, .tfoot, .thead {
              display: table-cell !important;
          }
          .table {
              display: table;
              width: 100%;
          }
      	.des-show {
              display: block !important;
          }
      }
      @media screen and (max-width: 480px) {
        u ~ div {
      	min-width: 100vw !important;
        }
      }
    </style>
    <!--[if (gte mso 9)|(IE)]><!-->
<style>
::selection {
background-color: #fdff8c;
}
</style>
<!--<![endif]-->
      <style>
        h1, h2, h3, p, a, span, label, img {
        font-family: BlinkMacSystemFont,system-ui,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
        }
        h1, h2, h3, img, .name {
        font-weight: 900;
        margin: 0;
        }
      </style>
      <style>
        @media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 600px) {
            .mob-webkit-hide {
                		display: none !important;
                    }
        }
      </style>
      <style>
        u ~ div .goomoji img {
        	display: none !important;
        }
        u ~ div .gmail-hide {
        	display: none !important;
        }
        u ~ div .gmail-show {
        display: block !important;
        }
        u ~ div .gmail-show-dib {
        display: inline-block !important;
        }
        u ~ div .gmail-show-table {
        	display: table !important;
        }
        u ~ div .outer {
        	background: none !important;
        }
        @media screen and (max-width: 600px) {
        	u ~ div .mob-gmail-hide {
        		display: none;
            }
        }
      </style>
      <style>
        @media screen and (min-width: 600px) {
        	.w50p {
                width: 50%;
            }
            .w48p {
            	width:48%;
            }
            .w40p {
            	width:40%;
            }
            .w4p {
            	width:4%;
            }
            .w5p {
            	width:5%;
            }
            .w55p {
            	width:55%;
            }
            .w60p {
            	width: 60%;
            }
            .w20p {
            	width: 20%;
            }
            .w30p {
            	width:30%;
            }
            .w70p {
            	width:70%;
            }
            .w15p {
            	width:15%;
            }
            .des-pt10 {
            	padding-top: 10px !important;
            }
            .des-pt50 {
            	padding-top: 50px !important;
            }
            .des-pt75 {
            	padding-top: 75px !important;
            }
            .des-pb50 {
            	padding-bottom: 50px !important;
            }
            .des-pb75 {
            	padding-bottom: 75px !important;
            }
            .des-pt35 {
            	padding-top: 35px !important;
            }
            .des-pt25 {
            	padding-top: 25px !important;
            }
            .des-dib {
            	display: inline-block !important;
            }
            .des-hide {
            	display: none;
            }
            .des-show {
            	display: block !important;
            }
            .des-show-td {
            	display: table-cell !important;
            }
            .p, .a {
            font-size: 18px !important;
            line-height: 24px !important;
            }
            .p-headline {
            	font-size: 22px !important;
            }
            h1 {
            	font-size: 40px !important;
                line-height: 48px !important;
            }
            h2 {
            	font-size: 36px !important;
            }
            .logo {
            	width:150px !important;
                height:60px !important;
            }
        }
      </style>
      <style>
        [owa] .w50p {
                width: 50%;
            }
            [owa] .w48p {
            	width:48% !important;
            }
            [owa] .w40p {
            	width:40% !important;
            }
            [owa] .w4p {
            	width:4%;
            }
            [owa] .w5p {
            	width:5%;
            }
            [owa] .w55p {
            	width: 55%;
            }
            [owa] .w60p {
            	width: 60%;
            }
            [owa] .w20p {
            	width: 20%;
            }
            [owa] .w30p {
            	width:30%;
            }
            [owa] .w70p {
            	width:70%;
            }
            [owa] .w15p {
            	width:15%;
            }
            [owa] .des-pt10 {
            	padding-top: 10px !important;
            }
            [owa] .des-pt50 {
            	padding-top: 50px !important;
            }
            [owa] .des-pb50 {
            	padding-bottom: 50px !important;
            }
            [owa] .des-pb75 {
            	padding-bottom: 75px !important;
            }
            [owa] .des-pt35 {
            	padding-top: 35px !important;
            }
            [owa] .des-pt25 {
            	padding-top: 25px !important;
            }
            [owa] .des-dib {
            	display: inline-block !important;
            }
            [owa] .des-hide {
            	display: none;
            }
            [owa] .des-show {
            	display: block !important;
            }
            [owa] .des-show-td {
            	display: table-cell !important;
            }
            [owa] .p, .a {
            font-size: 18px !important;
            line-height: 24px !important;
            }
            [owa] .p-headline {
            	font-size: 22px !important;
            }
            [owa] h1 {
            	font-size: 40px !important;
                line-height: 48px !important;
            }
            [owa] h2 {
            	font-size: 36px !important;
            }
            [owa] .logo {
            	width:150px !important;
                height:60px !important;
            }
            [owa] .webkit-hide, [owa] label { display: none !important; }
            [owa] .td, [owa] .tfoot, [owa] .thead {
                display: table-cell !important;
            }
            [owa] .table {
                display: table;
                width: 100%;
            }
      </style>
      <style>
        @media screen yahoo {
            .webkit-hide {display:none!important;}
        }
      </style>
      <style>
        @media screen and (max-width: 480px) {
        	@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
                .frame {
                    overflow: scroll!important;
                    -webkit-overflow-scrolling: touch!important;
                    max-height: 592px!important;
                }
                .ios-cta-bar {
                    display: table !important;
                    max-height: none;
                    overflow: visible;
                    width:100%;
                    z-index: 2;
                    background: #ffef38;
                    margin-bottom: -50px;
                }
                .ios-border {
                    border-bottom: 10px solid #ffef38;
                }
                .ios-hide {
                	display: none;
                }
            }
        }
            @media screen and (min-device-width: 480px) {
            	@supports (-webkit-overflow-scrolling:touch) and ( color:#ffff) {
                    .tap { display: block !important; }
                }
            }
                @media screen and (-webkit-min-device-pixel-ratio:0) {
                	.webkit-hide {
                		display: none !important;
                    }
                    .webkit-show {
                    	display: block !important;
                    }
                    .td-webkit-show {
                        display: table-cell !important;
                    }
                    .jack:focus ~ .sally {
                        display: block !important;
                    }
                    .sally {
                        width: 100%;
                        height: 100%;
                        position: fixed;
                        top: 0;
                        left: 0;
                        z-index: 9999;
                        background: rgba(120,120,120,0.7);
                        display: none;
                    }
                    .zero {
                        background: #fff;
                        width: 650px;
                        margin: 0 auto;
                        position: relative;
                        top: 10%;
                        padding: 25px;
                        border-radius: 5px;
                        text-align: center;
                    }
                    .halloweentown {
                    	width:100%;
                        height:200px;
                        background: url('https://kevinmandeville.com/assets/skellington.jpg') center no-repeat;
                        background-size: 600px 175px;
                        margin: 0 auto;
                    }
                    @-webkit-keyframes pumpkin-king {
                      0% {
                        opacity: 0;
                      }
                      100% {
                        opacity: 1;
                      }
                    }
                    @keyframes pumpkin-king {
                      0% {
                        opacity: 0;
                      }
                      100% {
                        opacity: 1;
                      }
                    }
                    .pumpkin-king {
                      -webkit-animation-name: pumpkin-king;
                      animation-name: pumpkin-king;
                      animation-duration: .5s;
                      -webkit-animation-duration: .5s;
                    }
                }
                @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 600px) {
                	.des-webkit-hide {
                		display: none !important;
                    }
                    .des-webkit-show {
                    	display: block !important;
                    }
                }
      </style>
      <style>
        body[data-outlook-cycle] label.des-webkit-hide {
            	display: none !important;
            }
      </style>
      <!--[if (gte mso 9)|(IE)]>
        <style>
          h1 {
              font-size:40px!important;
              line-height:48px!important;
          }
          h2 {
              font-size:36px!important;
          }
          .p, .a {
              font-size:18px!important;
              line-height:24px!important;
          }
          .p-headline {
              font-size: 24px!important;
          }
          .footer p {
          	border:0px!important;
          }
        </style>
      <![endif]-->
      <style>
        a:hover{text-decoration:none}
        a:hover{text-decoration:none}
        .desc:hover{text-decoration:none}
        .collapse:hover{text-decoration:none}
        .buy-hover:hover ~* .tee1{opacity:0 !important}
      </style>
      <style type="text/css">
        /**********
            FONT SIZES
            ***********/
            /***********
            LINE HEIGHTS
            ***********/
            /***********
            COLORS
            ***********/
            /***********
            ALIGNMENT
            ***********/
        @media screen and (min-width: 600px) {
        	.des-tal {
            	text-align: left !important;
            }
            .des-tac {
                text-align: center !important;
            }
            .des-tar {
            	text-align: right !important;
            }
        }
        /***************
        PADDING 0px
        ***************/
        /***************
        PADDING 5px
        ***************/
        /***************
        PADDING 10px
        ***************/
        /***************
        PADDING 15px
        ***************/
        /***************
        PADDING 20px
        ***************/
        /***************
        PADDING 25px
        ***************/
        /***************
        PADDING 30px
        ***************/
        /***************
        PADDING 35px
        ***************/
        /***************
        PADDING 40px
        ***************/
        /***************
        PADDING 45px
        ***************/
        /***************
        PADDING 50px
        ***************/
        /***************
        PADDING 55px
        ***************/
        /***************
        PADDING 60px
        ***************/
        /***************
        PADDING 65px
        ***************/
        /***************
        PADDING 70px
        ***************/
        /***************
        PADDING 75px
        ***************/
        /***************
        PADDING 100px
        ***************/
        /***************
        PADDING 125px
        ***************/
        /***************
        PADDING 150px
        ***************/
        /***************
        DISPLAY
        ***************/
        /***************
        IMAGES
        ***************/
        /***************
        POSITIONING
        ***************/
        /***************
        MAX-WIDTH
        ***************/
      </style>
    </head>
    <body id="body" style="margin:0;padding:0;">
      <div class="preheader" style="display:none;max-height:0;overflow:hidden;">
        We've got a t-shirt for you that's simply meant to be. P.S. There's a hidden discount code for #emailgeeks inside...if you can find it!
      </div>
      <div style="display: none; width: 0px; height: 0px; max-height: 0px; overflow: hidden;">  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
      </div>
      <!--[if (gte mso 9)|(IE)]><!-->
<button class="jack" accesskey="t" style="border: 0px; padding: 0px; display: block;"></button>
<div class="sally pumpkin-king">
    <div class="zero">
        <div class="halloweentown"></div>
    </div>
</div>
<!--<![endif]-->
        <div class="frame">
          <div>
            <!--[if (gte mso 9)|(IE)]>
              <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                  <td align="center" bgcolor="#000000" style="mso-padding-top-alt:25px;">
            <![endif]-->
            <div style="padding-top:15px;padding-right:15px;padding-left:15px;background: #000;" class="pt15 pl15 pr15 des-pt25">
              <div class="table">
                <!--[if (gte mso 9)|(IE)]>
                  <table width="800" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                      <td align="center" width="120">
                <![endif]-->
                <div class="td vat w15p des-show-td" style="vertical-align:top;display: none;"> </div>
                <!--[if (gte mso 9)|(IE)]>
                </td>
                <td align="center" width="640">
                <![endif]-->
                <div class="td vat w70p" style="vertical-align:top;">
                  <a href="https://emailtees.com" style="color:#0088cc;margin:0;">
                    <img src="https://litmus-builder.s3.amazonaws.com/1543180274309" width="100" class="fsz26 white center" alt="EmailTees" style="display:block;border:0;color:#111;letter-spacing:-1px;font-size:26px;color:#ffffff;margin:0 auto;"/>
            </a>
                </div>
                <!--[if (gte mso 9)|(IE)]>
                </td>
                <td align="center" width="120">
                <![endif]-->
                <div class="td vat w15p tac des-pt10 des-show-td" style="text-align:center;vertical-align:top;display: none;">
                  <!--[if (gte mso 9)|(IE)]>
                    <table align="right" cellspacing="0" cellpadding="0" border="0">
                      <tr>
                        <td align="center" valign="top" style="mso-padding-right-alt: 10px;">
                  <![endif]-->
                  <a href="https://twitter.com/emailtees" style="color:#0088cc;margin:0;text-decoration: none;" target="_blank">
                    <img src="https://litmus-builder.s3.amazonaws.com/1541002941523" width="20" style="display:block;border:0;color:#111;letter-spacing:-1px;width:20px;display: inline-block;" class="img-social"/>
            </a>
                  <!--[if (gte mso 9)|(IE)]>
                  </td>
                  <td align="center" valign="middle">
                  <![endif]-->
                   
            <a href="https://twitter.com/emailtees" style="color:#0088cc;margin:0;text-decoration: none;" target="_blank">
                    <img src="https://litmus-builder.s3.amazonaws.com/1541002934144" width="20" style="display:block;border:0;color:#111;letter-spacing:-1px;width:20px;display: inline-block;" class="img-social"/>
            </a>
                  <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
                  <![endif]-->
                </div>
                <!--[if (gte mso 9)|(IE)]>
                </td>
              </tr>
            </table>
                <![endif]-->
              </div>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
          <tr>
            <td align="center" bgcolor="#000000" style="mso-padding-top-alt: 15px;">
              <table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
                <tr>
                  <td align="center">
            <![endif]-->
            <div style="text-align:center;padding-top:15px;padding-right:15px;padding-left:15px;background: #000; -border-bottom: 12px solid #2f2e3e;" class="pt15 pl15 pr15 tac des-pt25">
              <div class="max600 center" style="margin:0 auto;max-width:600px;">
                <h1 class="pb10 white" style="margin:0;color:#111;font-size:36px;line-height:40px;color:#ffffff;padding-bottom:10px;">The Nightmare Before<br style="display: none;" class="des-show">
                  <!--[if (gte mso 9)|(IE)]><br>
                  <![endif]-->
                  Cyber Monday</h1>
              </div>
            </div>
            <div class="ios-border">
              <a href="https://emailtees.com" target="_blank" style="color:#0088cc;margin:0;"><img src="https://litmus-builder.s3.amazonaws.com/1543198514014" alt="💀💀💀" width="800" class="img-max fsz60 tac" style="border:0;color:#111;letter-spacing:-1px;font-size:60px;text-align:center;margin:0 auto;display:block;max-width:100% !important;width:100% !important;height:auto !important;background: #000;"/></a>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
            <![endif]-->
          </div>
          <div style="text-align:center;padding-top:15px;padding-bottom:15px;padding-left:15px;background: #ffef38;" class="pt15 pb15 pl15 pb15 tac ios-hide">
            <!--[if (gte mso 9)|(IE)]>
              <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                  <td align="center" bgcolor="#ffef38" style="mso-padding-alt: 20px;">
            <![endif]-->
            <p class="p black bold" style="margin:0;font-size:16px;line-height:20px;color:grey;font-weight:bold;color:#353a3e;letter-spacing:-.5px;">The Jolly Collection on sale 12/6
    <!--[if (gte mso 9)|(IE)]><span class="white">  •  </span><![endif]-->
              <span style="color:grey;color:#353a3e;display: none;" class="des-dib black">  •  </span>
              <!--[if (gte mso 9)|(IE)]><!-->
<br class="des-hide"><!--<![endif]-->
                <a href="https://kevinmandeville.com/assets/EmailTees-The-Jolly-Collection-On-Sale.ics" class="gmail-hide black" style="color:#0088cc;margin:0;color:#353a3e;">Set calendar reminder ›</a>
                <!--[if (gte mso 9)|(IE)]><!-->
<a href="http://www.google.com/calendar/event?action=TEMPLATE&dates=20181206T150000Z%2F20181206T160000Z&text=EmailTees%20The%20Jolly%20Collection%20On%20Sale&location=https%3A%2F%2Femailtees.com&details=Snag%20one%20of%20our%20holiday-inspired%20designs!" style="color:#0088cc;margin:0;color:#353a3e;display: none;" class="gmail-show-dib webkit-hide black">Set calendar reminder ›</a><!--<![endif]-->
                </p>
                <!--[if (gte mso 9)|(IE)]>
                </td>
              </tr>
            </table>
                <![endif]-->
              </div>
              <!--[if (gte mso 9)|(IE)]>
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <td align="center" bgcolor="#000000" style="mso-padding-alt: 25px;">
              <![endif]-->
              <div style="background: #000;">
                <div class="max800 center wrapper tac pt35 des-pt75 pb35 des-pb75" style="text-align:center;padding-top:35px;padding-bottom:35px;margin:0 auto;max-width:800px;padding-left:5%;padding-right:5%;">
                  <!--[if (gte mso 9)|(IE)]>
                    <table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
                      <tr>
                        <td align="center" style="mso-padding-top-alt: 25px; mso-padding-bottom-alt: 50px;">
                  <![endif]-->
                  <h2 class="white" style="margin:0;color:#111;font-size:30px;line-height:30px;letter-spacing:-1px;color:#ffffff;">#emailgeeks & this t-shirt are...simply meant to be</h2>
                  <br>
                  <br>
                  <a href="https://emailtees.com/collections/unisex/products/the-nightmare-before-cyber-monday-unisex" target="_blank" style="color:#0088cc;margin:0;">
                    <img src="https://cdn.shopify.com/s/files/1/0017/2969/1761/products/mockup-da30d0db_1024x1024@2x.png?v=1543165817" width="500" alt="It's beginning to look a lot like a flooded inbox..." class="white center tee1 fsz20" style="display:block;border:0;color:#111;letter-spacing:-1px;font-size:20px;color:#ffffff;margin:0 auto;max-width: 500px; width: 100%; height: auto;"/>
    </a>
                  <br>
                  <br>
                  <!--[if (gte mso 9)|(IE)]><br>
                  <![endif]-->
                  <div class="table">
                    <!--[if (gte mso 9)|(IE)]>
                      <table width="100%" align="center" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                          <td align="center" width="390" valign="top">
                    <![endif]-->
                    <div class="td w55p vat" style="vertical-align:top;">
                      <a href="https://emailtees.com/collections/unisex/products/the-nightmare-before-cyber-monday-unisex" target="_blank" style="color:#0088cc;margin:0;">
                        <img src="https://litmus-builder.s3.amazonaws.com/1543194637436" width="390" alt="Bone daddy" class="img-max white tee1 fsz36" style="border:0;color:#111;letter-spacing:-1px;font-size:36px;color:#ffffff;margin:0 auto;display:block;max-width:100% !important;width:100% !important;height:auto !important;border-radius: 10px; -box-shadow: 0 0 50px rgba(200,200,200,.3); -border: 5px solid #fff; box-sizing: border-box;"/>
            </a>
                    </div>
                    <!--[if (gte mso 9)|(IE)]>
                    </td>
                    <td width="20">
                    <![endif]-->
                    <div class="td w5p"> </div>
                    <!--[if (gte mso 9)|(IE)]>
                    </td>
                    <td align="center" width="390" valign="top">
                    <![endif]-->
                    <div class="td w40p vat tal" style="text-align:left;vertical-align:top;">
                      <p class="p pt10 pb15" style="margin:0;font-size:16px;line-height:20px;color:grey;padding-top:10px;padding-bottom:15px;color: lightgray !important;">It's the deadline of death. Every email marketer's lament. The scariest weekend of the year for email marketers...Cyber Monday eve. Emails galore from Friday through Monday. There is no rest for the weary in Email Town. This is the stuff nightmares are made of.</p>
                      <!--[if (gte mso 9)|(IE)]><br>
                      <![endif]-->
                      <p class="pt15" style="margin:0;font-size:16px;line-height:20px;color:grey;padding-top:15px;">
                        <a href="https://emailtees.com/collections/unisex/products/the-nightmare-before-cyber-monday-unisex" class="buy1 bold fsz20 lh30" style="color:#0088cc;margin:0;font-size:20px;line-height:30px;letter-spacing:-.5px;padding:10px 18px;border-radius:50px;text-decoration:none;border-radius:30px;font-weight:bold;mso-padding-alt:0px;background:#ffef38;color:#111;border:1px solid #ffef38;mso-border-alt:8px solid #ffef38;display:inline-block !important;text-decoration: none;" target="_blank"><!--[if (gte mso 9)|(IE)]><!-->
👫<!--<![endif]-->
                            Buy unisex</a>
                        </p>
                        <!--[if (gte mso 9)|(IE)]><br>
                        <![endif]-->
                        <p class="pt15 pb15" style="margin:0;font-size:16px;line-height:20px;color:grey;padding-top:15px;padding-bottom:15px;">
                          <a href="https://emailtees.com/collections/womens/products/the-nightmare-before-cyber-monday-womens" target="_blank" class="bold lh24" style="color:#0088cc;margin:0;font-weight:bold;line-height:24px;letter-spacing:-.5px;color: #ffef38;">Buy women's ›</a><br>
                          <a href="https://emailtees.com/collections/long-sleeves/products/the-nightmare-before-cyber-monday-long-sleeve" target="_blank" class="bold white lh24" style="color:#0088cc;margin:0;font-weight:bold;line-height:24px;color:#ffffff;letter-spacing:-.5px;color: #ffef38;">Buy long sleeve ›</a><br>
                          <a href="https://emailtees.com/collections/hoodies-sweatshirts/products/the-nightmare-before-cyber-monday-crewneck" target="_blank" class="bold white lh24" style="color:#0088cc;margin:0;font-weight:bold;line-height:24px;color:#ffffff;letter-spacing:-.5px;color: #ffef38;">Buy crewneck ›</a>
                        </p>
                        <!--[if (gte mso 9)|(IE)]><br>
                        <![endif]-->
                        <p class="fsz16 lh20 pt10 pb15" style="margin:0;color:grey;font-size:16px;line-height:20px;padding-top:10px;padding-bottom:15px;color: lightgray !important;">
                          <em style="letter-spacing:-1px;">This is the first t-shirt in The Jolly Collection, featuring holiday-inspired designs, which launches on Thursday, December 6th. Follow our <a href="https://twitter.com/emailtees" target="_blank" class="bold" style="color:#0088cc;margin:0;font-weight:bold;letter-spacing:-.5px;color: #ffef38;">Twitter</a> and <a href="https://instagram.com/emailtees" target="_blank" class="bold" style="color:#0088cc;margin:0;font-weight:bold;letter-spacing:-.5px;color: #ffef38;">Instagram</a> to see more shirts from the collection be released!</em>
                        </p>
                      </div>
                      <!--[if (gte mso 9)|(IE)]>
                      </td>
                    </tr>
                  </table>
                      <![endif]-->
                    </div>
                  </div>
                </div>
                <!--[if (gte mso 9)|(IE)]>
                </td>
              </tr>
            </table>
                <![endif]-->
                <div style="text-align:center;padding-top:15px;padding-bottom:15px;background: #ffef38;" class="pt15 pb15 tac ios-hide">
                  <!--[if (gte mso 9)|(IE)]>
                    <table width="100%" cellspacing="0" cellpadding="0" border="0">
                      <tr>
                        <td align="center" bgcolor="#ffef38" style="mso-padding-alt: 20px;">
                  <![endif]-->
                  <p class="p black bold" style="margin:0;font-size:16px;line-height:20px;color:grey;font-weight:bold;color:#353a3e;letter-spacing:-.5px;">There's a hidden Cyber Monday storewide discount code in this email if you can find it. <!--[if (gte mso 9)|(IE)]><!-->
🔍<!--<![endif]-->
                      <br>
                      (Hint: viewing the source code may help <!--[if (gte mso 9)|(IE)]><!-->
😉<!--<![endif]-->
                        )
    </p>
                      <!--[if (gte mso 9)|(IE)]>
                      </td>
                    </tr>
                  </table>
                      <![endif]-->
                    </div>
                    <div class="social">
                      <div class="table">
                        <!--[if (gte mso 9)|(IE)]>
                          <table width="100%" align="center" cellspacing="0" cellpadding="0" border="0">
                            <tr>
                              <td align="center" width="50%">
                        <![endif]-->
                        <div class="td w50p pt20 pb20 pl15 pr15 tac" style="text-align:center;padding-right:15px;padding-left:15px;padding-top:20px;padding-bottom:20px;background: #1da1f2;">
                          <!--[if (gte mso 9)|(IE)]>
                            <table width="100%" align="center" cellspacing="0" cellpadding="0" border="0">
                              <tr>
                                <td align="center" bgcolor="#1da1f2" style="mso-padding-alt: 20px;">
                          <![endif]-->
                          <div class="table-mob center gmail-show-table" style="display:table;margin:0 auto;width:auto;">
                            <!--[if (gte mso 9)|(IE)]>
                              <table align="center" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                  <td align="center">
                            <![endif]-->
                            <div class="td-mob vat" style="display:table-cell;vertical-align:top;width:40px;">
                              <a href="https://twitter.com/emailtees" target="_blank" style="color:#0088cc;margin:0;"><img src="https://litmus-builder.s3.amazonaws.com/1536370310032" alt="" width="35" class="center" style="display:block;border:0;color:#111;letter-spacing:-1px;margin:0 auto;"/></a>
                            </div>
                            <!--[if (gte mso 9)|(IE)]>
                            </td>
                            <td align="left" style="mso-padding-left-alt: 10px;">
                            <![endif]-->
                            <div class="td-mob tal vam pl10" style="text-align:left;padding-left:10px;display:table-cell;vertical-align:middle;">
                              <p class="white" style="margin:0;font-size:16px;line-height:20px;color:grey;color:#ffffff;">
                                <a href="https://twitter.com/emailtees" class="fsz18 bold white" style="color:#0088cc;margin:0;font-weight:bold;font-size:18px;color:#ffffff;letter-spacing:-.5px;">Follow us on Twitter ›</a>
                              </p>
                            </div>
                            <!--[if (gte mso 9)|(IE)]>
                            </td>
                          </tr>
                        </table>
                            <![endif]-->
                          </div>
                          <!--[if (gte mso 9)|(IE)]>
                          </td>
                        </tr>
                      </table>
                          <![endif]-->
                        </div>
                        <!--[if (gte mso 9)|(IE)]>
                        </td>
                        <td align="center" width="50%">
                        <![endif]-->
                        <div class="td w50p pt20 pb20 pl15 pr15 tac" style="text-align:center;padding-right:15px;padding-left:15px;padding-top:20px;padding-bottom:20px;background: #c32aa3;">
                          <!--[if (gte mso 9)|(IE)]>
                            <table width="100%" align="center" cellspacing="0" cellpadding="0" border="0">
                              <tr>
                                <td align="center" bgcolor="#c32aa3" style="mso-padding-alt: 20px;">
                          <![endif]-->
                          <div class="table-mob center gmail-show-table" style="display:table;margin:0 auto;width:auto;">
                            <!--[if (gte mso 9)|(IE)]>
                              <table align="center" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                  <td align="center">
                            <![endif]-->
                            <div class="td-mob vat" style="display:table-cell;vertical-align:top;width:40px;">
                              <a href="https://twitter.com/emailtees" target="_blank" style="color:#0088cc;margin:0;"><img src="https://litmus-builder.s3.amazonaws.com/1536460607121" alt="" width="35" class="center" style="display:block;border:0;color:#111;letter-spacing:-1px;margin:0 auto;"/></a>
                            </div>
                            <!--[if (gte mso 9)|(IE)]>
                            </td>
                            <td align="left" style="mso-padding-left-alt: 10px;">
                            <![endif]-->
                            <div class="td-mob tal vam pl10" style="text-align:left;padding-left:10px;display:table-cell;vertical-align:middle;">
                              <p class="white" style="margin:0;font-size:16px;line-height:20px;color:grey;color:#ffffff;">
                                <a href="https://twitter.com/emailtees" class="fsz18 bold white" style="color:#0088cc;margin:0;font-weight:bold;font-size:18px;color:#ffffff;letter-spacing:-.5px;">Follow us on Instagram ›</a>
                              </p>
                            </div>
                            <!--[if (gte mso 9)|(IE)]>
                            </td>
                          </tr>
                        </table>
                            <![endif]-->
                          </div>
                          <!--[if (gte mso 9)|(IE)]>
                          </td>
                        </tr>
                      </table>
                          <![endif]-->
                        </div>
                        <!--[if (gte mso 9)|(IE)]>
                        </td>
                      </tr>
                    </table>
                        <![endif]-->
                      </div>
                    </div>
                    <div style="background: #000;">
                      <div class="footer max600 center pt35 pb35 des-pt50 des-pb50 wrapper" style="padding-top:35px;padding-bottom:35px;margin:0 auto;max-width:600px;padding-left:5%;padding-right:5%;">
                        <!--[if (gte mso 9)|(IE)]>
                          <table width="600" align="center" cellspacing="0" cellpadding="0" border="0">
                            <tr>
                              <td align="left" style="mso-padding-top-alt: 50px;">
                        <![endif]-->
                        <p class="p" style="margin:0;font-size:16px;line-height:20px;color:grey;color: lightgray !important;">
                          You are receiving this email because you signed up for <span class="bold name" style="color:grey;font-weight:bold;color:#111;letter-spacing:-.5px;text-decoration:none;color: #fff;">EmailTees</span>. Cheers! <!--[if (gte mso 9)|(IE)]><!-->
🍻<!--<![endif]-->
                          </p>
                          <!--[if (gte mso 9)|(IE)]><!-->
<br><!--<![endif]-->
                            <br>
                            <p class="p" style="margin:0;font-size:16px;line-height:20px;color:grey;color: lightgray !important;">
                              <span class="screw-you-gmail2" style="color:grey;color: lightgray !important;">174 Upper County Road #1</span>-13<br>
                              Dennis Port, MA 02639
    </p>
                            <!--[if (gte mso 9)|(IE)]><!-->
<br><!--<![endif]-->
                              <br>
                              <p class="p tal pt15 pb15" style="margin:0;font-size:16px;line-height:20px;color:grey;text-align:left;padding-top:15px;padding-bottom:15px;border-top: 1px solid #444; border-bottom: 1px solid #444;"><!--[if (gte mso 9)|(IE)]><!-->
😭<!--<![endif]-->
                                  <a href="#" class="white" style="color:#0088cc;margin:0;color:#ffffff;">Unsubscribe</a></p>
                                <p style="margin:0;font-size:16px;line-height:20px;color:grey;display: none;"> / </p>
                                <p class="p tal pt15 pb15" style="margin:0;font-size:16px;line-height:20px;color:grey;text-align:left;padding-top:15px;padding-bottom:15px;border-bottom: 1px solid #444;"><!--[if (gte mso 9)|(IE)]><!-->
💻<!--<![endif]-->
                                    <a href="#" class="white" style="color:#0088cc;margin:0;color:#ffffff;">View code</a></p>
                                  <p style="margin:0;font-size:16px;line-height:20px;color:grey;display: none;"> / </p>
                                  <p class="p tal pt15 pb15" style="margin:0;font-size:16px;line-height:20px;color:grey;text-align:left;padding-top:15px;padding-bottom:15px;border-bottom: 1px solid #444;"><!--[if (gte mso 9)|(IE)]><!-->
🌎<!--<![endif]-->
                                      <a href="#" class="white" style="color:#0088cc;margin:0;color:#ffffff;">View online</a></p>
                                    <br>
                                    <!--[if (gte mso 9)|(IE)]><!-->
<br><!--<![endif]-->
                                      <p class="p" style="margin:0;font-size:16px;line-height:20px;color:grey;color: lightgray !important;">
                                        Made with <span class="heart" style="color:grey;color:#d72b3f;">♥</span> from <a href="https://www.google.com/search?q=cape+cod&rlz=1C5CHFA_enUS778US778&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjUs6j_5KndAhVDu1MKHU8lCx8Q_AUIDCgD&biw=1339&bih=670" target="_blank" class="white" style="color:#0088cc;margin:0;color:#ffffff;">Cape Cod</a> using <a href="https://litmus.com/email-builder" target="_blank" class="white" style="color:#0088cc;margin:0;color:#ffffff;">Litmus Builder</a>
                                      </p>
                                      <!--[if (gte mso 9)|(IE)]>
                                      </td>
                                    </tr>
                                  </table>
                                      <![endif]-->
                                    </div>
                                  </div>
                                  <!--CLOSING frame-->
                                </div>
                                <!--[if (gte mso 9)|(IE)]><!-->
<div style="display: none;" class="ios-cta-bar">
    <div class="td pt10 pb10 pl10 pr10 tac" style="text-align:center;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;">
    	<p class="black bold" style="margin:0;font-size:16px;line-height:20px;color:grey;font-weight:bold;color:#353a3e;letter-spacing:-.5px;">
            The Jolly Collection on sale 12/6<br>
            <a href="https://kevinmandeville.com/assets/emailtees/EmailTees_On_Sale__20_OFF_thru_Friday_921.ics" class="black" style="color:#0088cc;margin:0;color:#353a3e;">Set calendar reminder ›</a>
        </p>
    </div>
</div>
<!--<![endif]-->
                                
                                </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.

Console