cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <head>
<title>
      RITUAL
    </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">
<style type="text/css">
@media only screen and (min-width: 481px) and (max-width: 599px) {
    table[class=em_main_table] {
        width: 100% !important
        }
    table[class=em_wrapper] {
        width: 100% !important
        }
    td[class=em_hide], table[class=em_hide], span[class=em_hide], br[class=em_hide] {
        display: none !important
        }
    img[class=em_full_img] {
        width: 100% !important;
        height: auto !important
        }
    td[class=em_center] {
        text-align: center !important
        }
    td[class=em_side] {
        width: 15px !important
        }
    }
@media only screen and (max-width: 480px) {
    table[class=em_main_table] {
        width: 100% !important
        }
    table[class=em_wrapper] {
        width: 100% !important
        }
    td[class=em_hide], table[class=em_hide], span[class=em_hide], br[class=em_hide] {
        display: none !important
        }
    img[class=em_full_img] {
        width: 100% !important;
        height: auto !important
        }
    td[class=em_center] {
        text-align: center !important
        }
    td[class=em_side] {
        width: 15px !important
        }
    td[class=em_height] {
        height: 35px !important
        }
    }
</style>
<!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG></o:AllowPNG>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
<body style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;margin:0;padding:0"> <!--Full width table start-->
<table 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;text-decoration:none">
<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 valign="top" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0"> <!--=== PRE-HEADER SECTION === -->
<tbody><tr>
<td align="center" bgcolor="#ffffff" height="1" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;font-family: Arial, sans-serif; font-size:1px; line-height:1px; color:#ffffff;">
<div style="overflow:hidden; height:1px;">
                        Summertime, sunshine, stay fine. So keep one healthy habit, like Ritual, to balance a summer of fun and not-so-healthy decisions. |
                      </div>
</td>
</tr>
<!--=== //PRE-HEADER SECTION === -->
<!--=== HEADER SECTION === -->
<tr>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none">
<table 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" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none">
<a href="https://ritual.com/products/essential?_ke=Y2FtcG1vbnNhbGVzQGdtYWlsLmNvbQ%3D%3D&amp;utm_campaign=07.05.17_EFW&amp;utm_medium=email&amp;utm_source=klaviyo" style="text-decoration:none;border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;color:#182273;" target="_blank">
<img alt="Ritual | Be In Full Flow. - Explore Ritual" border="0" class="em_full_img" height="875" src="http://images.emailaptitude.com/ritual/2017/july/7.5_EFW/hero.jpg" style="border:0;outline:none;display:block;max-width:600px;font-family:Arial, sans-serif;font-size:40px;" width="600"></a>
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--=== //HEADER SECTION === -->
<!--=== BODY SECTION === -->
<tr>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none">
<table 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" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none">
<a href="https://ritual.com/products/essential?_ke=Y2FtcG1vbnNhbGVzQGdtYWlsLmNvbQ%3D%3D&amp;utm_campaign=07.05.17_EFW&amp;utm_medium=email&amp;utm_source=klaviyo" style="text-decoration:none;border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;color:#182273;" target="_blank">
<img alt="Summertime, sunshine, stay fine. So keep one healthy habit, like Ritual, to balance a summer of fun and not-so-healthy decisions." border="0" class="em_full_img" height="187" src="http://images.emailaptitude.com/ritual/2017/july/7.5_EFW/copy.jpg" style="border:0;outline:none;display:block;max-width:600px;font-family:Arial, sans-serif;font-size:30px;" width="600"></a>
</td>
</tr>
<tr>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none"> <a href="https://ritual.com/products/essential?_ke=Y2FtcG1vbnNhbGVzQGdtYWlsLmNvbQ%3D%3D&amp;utm_campaign=07.05.17_EFW&amp;utm_medium=email&amp;utm_source=klaviyo" style="text-decoration:none;border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;color:#182273;" target="_blank">
<img alt="bikini babe" border="0" class="em_full_img" height="191" src="http://images.emailaptitude.com/ritual/2017/july/7.5_EFW/bikinibabe.gif" style="border:0;outline:none;display:block;max-width:400px;font-family:Arial, sans-serif;font-size:25px;" width="400"></a>
</td>
</tr>
<tr>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none">
<a href="https://ritual.com/products/essential?_ke=Y2FtcG1vbnNhbGVzQGdtYWlsLmNvbQ%3D%3D&amp;utm_campaign=07.05.17_EFW&amp;utm_medium=email&amp;utm_source=klaviyo" style="text-decoration:none;border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;color:#182273;" target="_blank">
<img alt="To Better Health" border="0" class="em_full_img" height="143" src="http://images.emailaptitude.com/ritual/2017/july/7.5_EFW/cta.jpg" style="border:0;outline:none;display:block;max-width:600px;font-family:Arial, sans-serif;font-size:30px;" width="600"></a>
</td>
</tr>
<tr>
<td class="em_height" height="40" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;font-size:1px; line-height:1px; height:40px;">
                            &nbsp;
                          </td>
</tr>
<tr>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none">
<a href="https://www.instagram.com/ritual/?_ke=Y2FtcG1vbnNhbGVzQGdtYWlsLmNvbQ%3D%3D&amp;utm_campaign=07.05.17_EFW&amp;utm_medium=email&amp;utm_source=klaviyo" style="text-decoration:none;border-collapse:collapse;mso-line-height-rule:exactly;font-family: 'Dutch','Times New Roman', Times, serif;font-size: 22px;line-height: 30px;color: #182273;font-style: italic; text-decoration: none;" target="_blank">Keep up with us on Instagram:</a>
</td>
</tr>
<tr>
<td height="20" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;font-size:1px; line-height:1px; height:20px;">
                            &nbsp;
                          </td>
</tr>
<tr>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none">
<a href="https://www.instagram.com/ritual/?_ke=Y2FtcG1vbnNhbGVzQGdtYWlsLmNvbQ%3D%3D&amp;utm_campaign=07.05.17_EFW&amp;utm_medium=email&amp;utm_source=klaviyo" style="text-decoration:none;border-collapse:collapse;mso-line-height-rule:exactly;text-decoration: none;border-collapse: collapse;mso-line-height-rule: exactly;" target="_blank">
<img alt="Insta" border="0" class="em_full_img" height="125" src="http://images.emailaptitude.com/ritual/2017/july/7.5_EFW/insta.jpg" style="border:0;outline:none;display: block;font-family: Arial, sans-serif;font-size: 18px;line-height: 39px;color: #182273;max-width:500px" width="500"></a>
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--=== //BODY SECTION === -->
<!--=== FOOTER SECTION === -->
<tr>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;mso-table-lspace: 0px;mso-table-rspace: 0px;" width="100%">
<tbody><tr>
<td class="em_side" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;width: 48px;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;" width="48">
                            &nbsp;
                          </td>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;mso-table-lspace: 0px;mso-table-rspace: 0px;" width="100%">
<tbody><tr>
<td class="em_spc_20" height="20" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;font-size: 1px;line-height: 1px;height: 35px;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;">
                                  &nbsp;
                                </td>
</tr>
<tr>
<td align="center" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;mso-table-lspace: 0px;mso-table-rspace: 0px;" width="100%">
<tbody><tr>
<td bgcolor="#ffd700" height="3" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;line-height: 1px;font-size: 1px;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;">
<img alt="" border="0" height="3" src="http://images.emailaptitude.com/spacer.gif" style="border:0;outline:none;border: 0 !important;outline: none;display: block;" width="1">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td class="em_spc_20" height="20" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;font-size: 1px;line-height: 1px;height: 17px;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;">
                                  &nbsp;
                                </td>
</tr>
<tr>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;mso-table-lspace: 0px;mso-table-rspace: 0px;" width="100%">
<tbody><tr>
<td class="em_hide" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;width: 15px;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;" width="15">
                                        &nbsp;
                                      </td>
<td style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;mso-table-lspace: 0px;mso-table-rspace: 0px;" width="100%">
<tbody><tr>
<td align="center" class="em_address1" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;font-family: Arial, sans-serif;font-size: 14px;line-height: 31px;color: #2a2d6e;text-align: center;font-weight: bold;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;" valign="middle"> <a href="https://ritual.com/products/essential?_ke=Y2FtcG1vbnNhbGVzQGdtYWlsLmNvbQ%3D%3D&amp;utm_campaign=07.05.17_EFW&amp;utm_medium=email&amp;utm_source=klaviyo" style="text-decoration:none;border-collapse:collapse;mso-line-height-rule:exactly;text-decoration: underline !important;color: #2a2d6e;border-collapse: collapse;mso-line-height-rule: exactly;" target="_blank">Essential for Women</a> &nbsp;<span style="em_hide: ;border-collapse: collapse;mso-line-height-rule: exactly;">&nbsp;&nbsp;</span> <a href="https://ritual.com/pages/approach?_ke=Y2FtcG1vbnNhbGVzQGdtYWlsLmNvbQ%3D%3D&amp;utm_campaign=07.05.17_EFW&amp;utm_medium=email&amp;utm_source=klaviyo" style="text-decoration:none;border-collapse:collapse;mso-line-height-rule:exactly;text-decoration: underline !important;color: #2a2d6e;border-collapse: collapse;mso-line-height-rule: exactly;" target="_blank">Who We Are</a> &nbsp;<span style="em_hide: ;border-collapse: collapse;mso-line-height-rule: exactly;">&nbsp;&nbsp;</span><span class="em_brk" style="border-collapse: collapse;mso-line-height-rule: exactly;"></span> <a href="https://ritual.com/pages/ingredients?_ke=Y2FtcG1vbnNhbGVzQGdtYWlsLmNvbQ%3D%3D&amp;utm_campaign=07.05.17_EFW&amp;utm_medium=email&amp;utm_source=klaviyo" style="text-decoration:none;border-collapse:collapse;mso-line-height-rule:exactly;text-decoration: underline !important;color: #2a2d6e;border-collapse: collapse;mso-line-height-rule: exactly;" target="_blank">Ingredients</a> &nbsp;<span style="em_hide: ;border-collapse: collapse;mso-line-height-rule: exactly;">&nbsp;&nbsp;</span> <a href="https://ritual.com/a/smpl/zendesk_index/index?_ke=Y2FtcG1vbnNhbGVzQGdtYWlsLmNvbQ%3D%3D&amp;utm_campaign=07.05.17_EFW&amp;utm_medium=email&amp;utm_source=klaviyo" style="text-decoration:none;border-collapse:collapse;mso-line-height-rule:exactly;text-decoration: underline !important;color: #2a2d6e;border-collapse: collapse;mso-line-height-rule: exactly;" target="_blank">FAQ</a> &nbsp;<span style="em_hide: ;border-collapse: collapse;mso-line-height-rule: exactly;">&nbsp;&nbsp;</span> <a href="https://ritual.com/blogs/journal?_ke=Y2FtcG1vbnNhbGVzQGdtYWlsLmNvbQ%3D%3D&amp;utm_campaign=07.05.17_EFW&amp;utm_medium=email&amp;utm_source=klaviyo" style="text-decoration:none;border-collapse:collapse;mso-line-height-rule:exactly;text-decoration: underline !important;color: #2a2d6e;border-collapse: collapse;mso-line-height-rule: exactly;" target="_blank">Journal</a>
</td>
</tr>
<tr>
<td class="em_spc_20" height="30" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;font-size: 1px;line-height: 1px;height: 30px;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;">
                                              &nbsp;
                                            </td>
</tr>
<tr>
<td class="em_address" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;font-family: Arial, Helvetica, sans-serif; font-size:10px; line-height:14px; color:#2a2d6e;text-align:center;">
                                              This email was sent by: Ritual • 8215 Melrose Avenue Los Angeles, CA 90046<br>
                                              <a class="unsubscribe-link" href="#" target="_blank">Unsubscribe</a>
                                            </td>
</tr>
</tbody></table>
</td>
<td class="em_hide" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;width: 15px;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;" width="15">
                                        &nbsp;
                                      </td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td class="em_spc_20" height="33" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;font-size: 1px;line-height: 1px;height: 33px;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;">
                                  &nbsp;
                                </td>
</tr>
</tbody></table>
</td>
<td class="em_side" style="border-collapse:collapse;mso-line-height-rule:exactly;text-decoration:none;width: 48px;border-collapse: collapse;mso-line-height-rule: exactly;text-decoration: none;" width="48">
                            &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 (-) as per the template width-->
<div style="display:none; 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; &nbsp;
    </div>
<div class="gmailfix" style="display:none;white-space: nowrap;font: 15px courier;line-height: 0;display: none!important;">
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    </div>

<img src="http://ritual.trk.klaviyomail.com/wf/open?upn=P-2Fq6nSAjyLgqzKWHJlns2vWvo0ctrsSvEbeCoePYtknQCsfOFI3mz0wn7xFJBCcJHhP0crwplr6dQ2a4THYN8W9ZOAvtzTWmXW2T8MhDxK-2FWQg9I6lYglAeOYC04pP50GGwFPfpUc1ytM4Pi1fzdFoi709nNhpaA5at5PJJ5qtIziLv-2FiO3UXjxlJEdicwps1RddTj1WGQYopZa-2B4Di3vyPB9rKRkjKFjHhP6vU9DLuYnLyu5ZXxfvRZQwGwz98wWNfbz4Qz8xLN01ZVNHYsWNxMslnxaQvo07-2FmIwFAbib8x8dODEhNlPfGjTWwopGI" alt="" width="1" height="1" border="0" style="height:1px !important;width:1px !important;border-width:0 !important;margin-top:0 !important;margin-bottom:0 !important;margin-right:0 !important;margin-left:0 !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;">


</body>
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console