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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

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.

HTML

            
              <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">
<tbody><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">
<tbody><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"> <!--=== HEADER SECTION === -->
<tbody><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">
<tbody><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;">
                            Get a Peel Case today.
                          </td>
</tr>
<tr>
<td height="25" style="border-collapse:collapse;mso-line-height-rule:exactly">
                            &nbsp;
                          </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">
<tbody><tr>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;width:27px;" width="27">
                                  &nbsp;
                                </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=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_content=Peel_Updates&amp;utm_medium=email&amp;utm_source=Klaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature" 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">
                                  &nbsp;
                                </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=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_content=Peel_Updates&amp;utm_medium=email&amp;utm_source=Klaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature" 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/editions/?_ke=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_content=Peel_Updates&amp;utm_medium=email&amp;utm_source=Klaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature" 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">Editions</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/lifestyle-lookbook?_ke=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D#/?utm_source=Klaviyo&amp;utm_medium=email&amp;utm_content=Peel_Updates&amp;utm_campaign=5.17.2017__Color_Case_Feature" 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">Lookbook</a>
</td>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;width: 76px;font-family: arial,helvetica,sans-serif;font-size: 13px;line-height: 20px;color: #ffffff !important;text-decoration: none;" valign="middle" width="76">
<a href="https://buypeel.com/pages/compare/?_ke=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_content=Peel_Updates&amp;utm_medium=email&amp;utm_source=Klaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature" 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">Compare</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=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_content=Peel_Updates&amp;utm_medium=email&amp;utm_source=Klaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature" 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">
                                  &nbsp;
                                </td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td height="25" style="border-collapse:collapse;mso-line-height-rule:exactly">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
</td>
</tr>
<!--=== //HEADER SECTION === -->
<!--=== BODY SECTION === -->
<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">
<tbody><tr>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;color:#000000;font-family:Arial,Helvetica, sans-serif;"> <a href="https://buypeel.com/products/understated-edition/?_ke=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_content=Peel_Updates&amp;utm_medium=email&amp;utm_source=Klaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature" style="border-collapse:collapse;mso-line-height-rule:exactly;font-size:18px;text-decoration:none;color:#000000;" target="_blank">
<img alt="Peel cases that are as unique as you! Peel Cases are always branding free, get yours today! | Shop Now " border="0" class="em_full_img" height="550" src="http://images.emailaptitude.com/Peel/2017/May/5.17.17_Color_Case_Feature/5.21.17_Color_Case_Feature_v2_02%20%281%29.gif" 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="https://buypeel.com/products/super-thin-iphone-7-case?_ke=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_medium=email&amp;variant=29716430471%2F%3Futm_source%3DKlaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature&amp;utm_content=Peel_Updates" style="border-collapse:collapse;mso-line-height-rule:exactly;font-size:18px;text-decoration:none;color:#000000;" target="_blank">
<img alt="Understated Edition color cases are only available for iPhone 6/6s. Don't have an iPhone 6/6s? Check out the color case options for the iPhone 7 here." border="0" class="em_full_img" height="65" src="http://images.emailaptitude.com/Peel/2017/May/5.17.17_Color_Case_Feature/5.17.17_Color_Case_Feature_v3_03.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="https://buypeel.com/products/understated-edition/?_ke=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_content=Peel_Updates&amp;utm_medium=email&amp;utm_source=Klaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature" style="border-collapse:collapse;mso-line-height-rule:exactly;font-size:18px;text-decoration:none;color:#000000;" target="_blank">
<img alt="Pixel Cases | Shop Now" border="0" class="em_full_img" height="184" src="http://images.emailaptitude.com/Peel/2017/May/5.17.17_Color_Case_Feature/5.17.17_Color_Case_Feature_v3_04.jpg" style="border:0;outline:none;display:block;max-width:600; font-size:14px; color:#000000; background-color:#FFFFFF" width="600"></a>
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--=== //BODY SECTION === -->
<!--=== FOOTER SECTION === -->
<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">
<tbody><tr>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;width:10px;" width="10">
                            &nbsp;
                          </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">
<tbody><tr>
<td height="48" style="border-collapse:collapse;mso-line-height-rule:exactly;height:48px;">
                                  &nbsp;
                                </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">
<tbody><tr>
<td align="center" valign="top" width="85" style="border-collapse:collapse;mso-line-height-rule:exactly"> <a href="https://twitter.com/jon/?_ke=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_content=Peel_Updates&amp;utm_medium=email&amp;utm_source=Klaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature" 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">
                                        &nbsp;
                                      </td>
<td align="center" valign="top" width="109" style="border-collapse:collapse;mso-line-height-rule:exactly"> <a href="https://twitter.com/marshal/?_ke=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_content=Peel_Updates&amp;utm_medium=email&amp;utm_source=Klaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature" 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>
</tbody></table>
</td>
</tr>
<tr>
<td height="24" style="border-collapse:collapse;mso-line-height-rule:exactly">
                                  &nbsp;
                                </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">
<tbody><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=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_content=Peel_Updates&amp;utm_medium=email&amp;utm_source=Klaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature" 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">
                                        &nbsp;
                                      </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=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_content=Peel_Updates&amp;utm_medium=email&amp;utm_source=Klaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature" 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">
                                        &nbsp;
                                      </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=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_content=Peel_Updates&amp;utm_medium=email&amp;utm_source=Klaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature" 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>
</tbody></table>
</td>
</tr>
<tr>
<td height="43" style="border-collapse:collapse;mso-line-height-rule:exactly;height:43px;">
                                  &nbsp;
                                </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=bWF0dEByZWFsbHlnb29kZW1haWxzLmNvbQ%3D%3D&amp;utm_content=Peel_Updates&amp;utm_medium=email&amp;utm_source=Klaviyo&amp;utm_campaign=5.17.2017__Color_Case_Feature" 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">
                                  &nbsp;
                                </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;">
                                  &nbsp;
                                </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="https://buypeel.com/" 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;">
                                  &nbsp;
                                </td>
</tr>
</tbody></table>
</td>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;width:10px;" width="10">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
</td>
</tr>
<!--=== //FOOTER SECTION === -->
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></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;">
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    </div>



</body>
            
          
!

CSS

            
              
            
          
!

JS

            
              
            
          
!
999px

Console