Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!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" xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:v="urn:schemas-microsoft-com:vml">
  
  <head>
    <title>PEEL</title>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0 " name="viewport">
    <meta content="telephone=no" name="format-detection">
    <!--[if !mso]>
      <!-->
    <!--<![endif]-->
    <style type="text/css">
      @media only screen and (max-width: 599px) {
          .em_hide {
              display: none !important
              }
          }
    </style>
    <!--[if gte mso 9]>
      <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG />
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
      </xml>
    <![endif]-->
  </head>
  
  <body bgcolor="#ffffff" style="margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;margin:0px; padding:0px;">
    <!--Full width table start-->
    <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%"
    style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0">
      <tr>
        <td align="center" valign="top" style="border-collapse:collapse;mso-line-height-rule:exactly">
          <table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;table-layout:fixed;"
          width="600">
            <tr>
              <td valign="top" style="border-collapse:collapse;mso-line-height-rule:exactly">
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
                style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0">
                  
<tr>
<td align="center" valign="top" style="border-collapse:collapse;mso-line-height-rule:exactly">
<table align="center" bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;width:600px;" width="600">
<tr>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;font-family:Arial, sans-serif; font-size:0px; line-height:0px; color:#000000;">
                            Open me to reveal the deal!
                          </td>
</tr>
<tr>
<td height="25" style="border-collapse:collapse;mso-line-height-rule:exactly">
                             
                          </td>
</tr>
<tr>
<td align="center" valign="top" style="border-collapse:collapse;mso-line-height-rule:exactly">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;width:600px;" width="600">
<tr>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;width:27px;" width="27">
                                   
                                </td>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;width:61px;" valign="top" width="61"> <a href="https://buypeel.com?_ke=YWxhbi5jYXNzaW5lbGxpQGdtYWlsLmNvbQ%3D%3D&utm_content=Peel_Updates&utm_medium=email&utm_source=Klaviyo&utm_campaign=8.10.17_Mystery_Summer_Sale" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;" target="_blank">
<img alt="PEEL" border="0" height="24" src="http://images.emailaptitude.com/Peel/2017/April/Most_Popular_Products/logo.jpg" style="border:0;outline:none;display:block; font-family:Arial, sans-serif; font-size:17px; line-height:20px; color:#ffffff; max-width:61px;" width="61"></a>
</td>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;width:75px;" width="75">
                                   
                                </td>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;width: 73px;font-family: arial,helvetica,sans-serif;font-size: 13px;line-height: 20px;color: #ffffff !important;text-decoration: none;" valign="middle" width="73"> <span style="border-collapse:collapse;mso-line-height-rule:exactly;color:#ffffff;"><a href="https://buypeel.com/pages/all-products?_ke=YWxhbi5jYXNzaW5lbGxpQGdtYWlsLmNvbQ%3D%3D&utm_content=Peel_Updates&utm_medium=email&utm_source=Klaviyo&utm_campaign=8.10.17_Mystery_Summer_Sale" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration: none;font-family: arial,helvetica,sans-serif !important;font-size: 13px !important;line-height: 20px !important;color: #ffffff;" target="_blank">Products</a></span>
</td>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;width: 69px;font-family: arial,helvetica,sans-serif;font-size: 13px;line-height: 20px;color: #ffffff !important;text-decoration: none;" valign="middle" width="69"> <a href="https://buypeel.com/pages/compare?_ke=YWxhbi5jYXNzaW5lbGxpQGdtYWlsLmNvbQ%3D%3D&utm_content=Peel_Updates&utm_medium=email&utm_source=Klaviyo&utm_campaign=8.10.17_Mystery_Summer_Sale" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration: none;font-family: arial,helvetica,sans-serif;font-size: 13px;line-height: 20px !important;color: #ffffff;" target="_blank">Why Peel?</a>
</td>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;width: 82px;font-family: arial,helvetica,sans-serif;font-size: 13px;line-height: 20px;color: #ffffff !important;text-decoration: none;" valign="middle" width="82"> <a href="https://buypeel.com/pages/our-story?_ke=YWxhbi5jYXNzaW5lbGxpQGdtYWlsLmNvbQ%3D%3D&utm_content=Peel_Updates&utm_medium=email&utm_source=Klaviyo&utm_campaign=8.10.17_Mystery_Summer_Sale" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration: none;font-family: arial,helvetica,sans-serif;font-size: 13px;line-height: 20px;color: #ffffff;" target="_blank">Our Story</a>
</td>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;width:55px;" width="55">
                                   
                                </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25" style="border-collapse:collapse;mso-line-height-rule:exactly">
                             
                          </td>
</tr>
</table>
</td>
</tr>

                 
<tr>
<td align="center" valign="top" style="border-collapse:collapse;mso-line-height-rule:exactly">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;table-layout:fixed;" width="600">
<tr>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;color:#000000;font-family:Arial,Helvetica, sans-serif;">
<a href="http://need-want.zmbl.co/e/summer-sale?_ke=YWxhbi5jYXNzaW5lbGxpQGdtYWlsLmNvbQ%3D%3D&utm_content=Peel_Updates&utm_medium=email&utm_source=Klaviyo&utm_campaign=8.10.17_Mystery_Summer_Sale" style="border-collapse:collapse;mso-line-height-rule:exactly;font-size:18px;text-decoration:none;color:#000000;" target="_blank">
<img alt="It's Our Mystery Summer Sale | Because we love to keep you on your toes!" border="0" class="em_full_img" height="523" src="http://images.emailaptitude.com/Peel/2017/August/8.10.17_Summer_Sale_Email/hero-top.jpg" style="border:0;outline:none;display:block;max-width:600; font-size:14px; color:#000000; background-color:#FFFFFF" width="600"></a>
</td>
</tr>
<tr>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;color:#000000;font-family:Arial,Helvetica, sans-serif;">
<a href="http://need-want.zmbl.co/e/summer-sale?_ke=YWxhbi5jYXNzaW5lbGxpQGdtYWlsLmNvbQ%3D%3D&utm_content=Peel_Updates&utm_medium=email&utm_source=Klaviyo&utm_campaign=8.10.17_Mystery_Summer_Sale" style="border-collapse:collapse;mso-line-height-rule:exactly;font-size:18px;text-decoration:none;color:#000000;" target="_blank">
<img alt="Your secret offer awaits! | Reveal Your Deal" border="0" class="em_full_img" height="180" src="http://images.emailaptitude.com/Peel/2017/August/8.10.17_Summer_Sale_Email/hero-bottom.jpg" style="border:0;outline:none;display:block;max-width:600; font-size:14px; color:#000000; background-color:#FFFFFF" width="600"></a>
</td>
</tr>
<tr>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;color:#000000;font-family: arial,helvetica,sans-serif;font-size:11px; color:#fff;background-color:#000; padding-top:10px;padding-bottom:10px;">
                            The Mystery Summer Sale offer expires at 11:59PM CST on 8/13/17.
                          </td>
</tr>

<tr>
<td align="center" valign="top" style="border-collapse:collapse;mso-line-height-rule:exactly">
<table align="center" bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;width:600px;" width="600">
<tr>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;width:10px;" width="10">
                                   
                                </td>
<td align="center" valign="top" style="border-collapse:collapse;mso-line-height-rule:exactly">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;width:580px;" width="580">
<tr>
<td height="48" style="border-collapse:collapse;mso-line-height-rule:exactly;height:48px;">
                                         
                                      </td>
</tr>
<tr>
<td align="center" valign="top" style="border-collapse:collapse;mso-line-height-rule:exactly">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;width:237px;" width="237">
<tr>
<td align="center" valign="top" width="85" style="border-collapse:collapse;mso-line-height-rule:exactly">
<a href="https://twitter.com/jon/?_ke=YWxhbi5jYXNzaW5lbGxpQGdtYWlsLmNvbQ%3D%3D&utm_content=Peel_Updates&utm_medium=email&utm_source=Klaviyo&utm_campaign=8.10.17_Mystery_Summer_Sale" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;" target="_blank">
<img alt="@Jon" border="0" height="89" src="http://images.emailaptitude.com/Peel/2017/April/Most_Popular_Products/img1.png" style="border:0;outline:none;display:block; font-family:Arial, sans-serif; font-size:15px; line-height:18px; color:#ffffff; font-weight:bold; max-width:85px;" width="85"></a>
</td>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;width:43px;" width="43">
                                               
                                            </td>
<td align="center" valign="top" width="109" style="border-collapse:collapse;mso-line-height-rule:exactly">
<a href="https://twitter.com/marshal/?_ke=YWxhbi5jYXNzaW5lbGxpQGdtYWlsLmNvbQ%3D%3D&utm_content=Peel_Updates&utm_medium=email&utm_source=Klaviyo&utm_campaign=8.10.17_Mystery_Summer_Sale" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;" target="_blank">
<img alt="@Marshal" border="0" height="93" src="http://images.emailaptitude.com/Peel/2017/April/Most_Popular_Products/image1.jpg" style="border:0;outline:none;display:block; font-family:Arial, sans-serif; font-size:15px; line-height:18px; color:#ffffff; font-weight:bold; max-width:109px;" width="109"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="24" style="border-collapse:collapse;mso-line-height-rule:exactly">
                                         
                                      </td>
</tr>
<tr>
<td align="center" valign="top" style="border-collapse:collapse;mso-line-height-rule:exactly">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;width:177px;" width="177">
<tr>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;line-height:0px; font-size:0px;" valign="middle" width="20">
<a href="https://www.instagram.com/peel/?_ke=YWxhbi5jYXNzaW5lbGxpQGdtYWlsLmNvbQ%3D%3D&utm_content=Peel_Updates&utm_medium=email&utm_source=Klaviyo&utm_campaign=8.10.17_Mystery_Summer_Sale" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;" target="_blank">
<img alt="Instagram" border="0" height="21" src="http://images.emailaptitude.com/Peel/2017/April/Most_Popular_Products/insta.png" style="border:0;outline:none;display:block; font-family:Arial, sans-serif; font-size:13px; line-height:21px; color:#ffffff; font-weight:bold; max-width:20px;" width="20"></a>
</td>
<td width="62" style="border-collapse:collapse;mso-line-height-rule:exactly">
                                               
                                            </td>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;line-height:0px; font-size:0px;" valign="middle" width="10">
<a href="https://www.facebook.com/peelhq/?_ke=YWxhbi5jYXNzaW5lbGxpQGdtYWlsLmNvbQ%3D%3D&utm_content=Peel_Updates&utm_medium=email&utm_source=Klaviyo&utm_campaign=8.10.17_Mystery_Summer_Sale" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;" target="_blank">
<img alt="Facebook" border="0" height="20" src="http://images.emailaptitude.com/Peel/2017/April/Most_Popular_Products/fb.png" style="border:0;outline:none;display:block; font-family:Arial, sans-serif; font-size:13px; line-height:21px; color:#ffffff; font-weight:bold;" width="10"></a>
</td>
<td width="62" style="border-collapse:collapse;mso-line-height-rule:exactly">
                                               
                                            </td>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;line-height:0px; font-size:0px;" valign="middle" width="23">
<a href="https://twitter.com/peelhq/?_ke=YWxhbi5jYXNzaW5lbGxpQGdtYWlsLmNvbQ%3D%3D&utm_content=Peel_Updates&utm_medium=email&utm_source=Klaviyo&utm_campaign=8.10.17_Mystery_Summer_Sale" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;" target="_blank">
<img alt="Twitter" border="0" height="19" src="http://images.emailaptitude.com/Peel/2017/April/Most_Popular_Products/tw.png" style="border:0;outline:none;display:block; font-family:Arial, sans-serif; font-size:13px; line-height:21px; color:#ffffff; font-weight:bold;" width="23"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="43" style="border-collapse:collapse;mso-line-height-rule:exactly;height:43px;">
                                         
                                      </td>
</tr>
<tr>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;font-size:0px; line-height:0px;" valign="top">
<a href="https://buypeel.com/?_ke=YWxhbi5jYXNzaW5lbGxpQGdtYWlsLmNvbQ%3D%3D&utm_content=Peel_Updates&utm_medium=email&utm_source=Klaviyo&utm_campaign=8.10.17_Mystery_Summer_Sale" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;" target="_blank">
<img alt="PEEL" border="0" height="13" src="http://images.emailaptitude.com/Peel/2017/April/Most_Popular_Products/footer_logo.png" style="border:0;outline:none;display:block; font-family:Arial, sans-serif; font-size:12px; font-weight:bold; line-height:13px; color:#ffffff; max-width:50px;" width="50"></a>
</td>
</tr>
<tr>
<td height="35" style="border-collapse:collapse;mso-line-height-rule:exactly">
                                         
                                      </td>
</tr>
<tr>
<td align="center" class="em_text2" style="border-collapse:collapse;mso-line-height-rule:exactly;font-family:arial, helvetica, sans-serif;font-size:13px;line-height:20px;color:#fff;text-decoration:none;font-family: arial,helvetica,sans-serif;font-size: 13px;line-height: 20px;color: #ffffff;text-decoration: none;">
                                        All Rights Reserved. ©  2017
                                      </td>
</tr>
<tr>
<td height="8" style="border-collapse:collapse;mso-line-height-rule:exactly;font-size:1px; line-height:1px;">
                                         
                                      </td>
</tr>
<tr>
<td align="center" class="em_text3" style="border-collapse:collapse;mso-line-height-rule:exactly;font-family:arial, helvetica, sans-serif;font-size:13px;line-height:22px;color:#fff;text-decoration:none;font-family: arial,helvetica,sans-serif;font-size: 13px;line-height: 22px; color: #ffffff !important; text-decoration: none;">
                                        If you no longer wish to receive our emails, please click the link below:
                                      </td>
</tr>
<tr>
<td align="center" class="em_text3_1" style="border-collapse:collapse;mso-line-height-rule:exactly;font-family:arial, helvetica, sans-serif;font-size:13px;line-height:20px;color:#fff;text-decoration:none;font-family: arial,helvetica,sans-serif;font-size: 13px;line-height: 20px; color: #ffffff !important; text-decoration: none; text-decoration:underline;">
<a href="#" style="border-collapse:collapse;mso-line-height-rule:exactly;font-family:arial, helvetica, sans-serif;font-size:13px;line-height:20px;color:#fff;text-decoration:none;text-decoration: underline;font-family: arial,helvetica,sans-serif;font-size: 13px;line-height: 20px;color: #ffffff;" target="_blank">Unsubscribe</a>
</td>
</tr>
<tr>
<td height="50" style="border-collapse:collapse;mso-line-height-rule:exactly;height:50px;">
                                         
                                      </td>
</tr>
</table>
</td>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;width:10px;" width="10">
                                   
                                </td>
</tr>
</table>
</td>
</tr>
<!--=== //FOOTER SECTION === -->
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <!--Full width table End-->
    <!--Increase/decrease the number of (&nbsp;) as per the template width-->
    <div class="em_hide" style="white-space:nowrap;font:20px courier;color:#FFFFFF;">                                         </div>
    </td>
    </tr>
    </table>
   
  </body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console