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

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <style type="text/css">
    @media(min-width:550px) {
      .hero-image {
        top: 0 !important
      }
      table[class="body"] {
        padding-bottom: 50px !important;
        padding-top: 50px !important
      }
      .email-logo-masthead {
        display: inline !important;
        height: 35px !important;
        margin-left: 0 !important;
        margin-right: 0 !important
      }
      .email-content {
        border-left: 1px solid #dadfe1 !important;
        border-right: 1px solid #dadfe1 !important
      }
      .email-content-block {
        padding-left: 50px !important;
        padding-right: 50px !important
      }
    }

    .email-social-bar-copy p,
    .email-social-bar-copy a,
    .email-social-bar-copy .ios-no-link {
      color: white !important;
      text-decoration: none !important
    }
  </style>
</head>

<body style="background-color: #f2f2f2; height: 100%; margin: 0; padding: 0;"><span style="color:transparent;visibility:hidden;display:none;opacity:0;height:0;width:0;font-size:0;">Check out Simple's tips for a fun and financially smart summer!</span><img src="https://links.simple.com/e/eo?_t=8dbbfde46a4d438d83c4d5d3d8484ea4&amp;_m=504908e4564b4046af93408c2d0c7861&amp;_e=1f5T9tLpwGp8vrYgJcAdslqNtMpQEiftUwHfK4bnR8RKwotmIGsVECP2BEZNzrVy_eaQuNZHiyiv-RnuZyUcH_no6ZsMcaimJSELQ1UVfXuW_x5b1EGdKS_ym2BR28S6DNYOfTyPEbSyKLmxFNjEj7elcBpHQOQTDitRDOwviNE%3D"
    style="border:0;width:1px;height:1px;border-width:0px!important;display:none!important;line-height:0!important;" width="1" height="1">
  <div style="display: none; max-height: 0px; overflow: hidden;"></div>
  <div style="display: none; max-height: 0px; overflow: hidden;">&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;‌&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;‌&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;‌&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;‌&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;‌&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;‌&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;‌&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>
  <table align="center" border="0" cellpadding="0" cellspacing="0" class="body" style="background-color:#f2f2f2; height:100%; padding-bottom:25px; padding-left:0; padding-right:0; padding-top:25px; width:100%">
    <!-- Insert &zwnj;&nbsp; hack after hidden preview text -->
    <tbody>
      <tr>
        <td>
          <table align="center" border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td width="550">
                  <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%">
                    <tbody>
                      <tr>
                        <td>
                          <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%">
                            <tbody>
                              <tr>
                                <td><img alt="" class="email-logo-masthead" height="35" src="https://simple.com/email-images/simple-logo.png" style="width: auto; max-width: 100% !important; display: block; height: 30px; margin-bottom: 25px; margin-left: auto; margin-right: auto;"></td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <tr>
                        <td><img alt="The Simple Life" src="https://d2axdqolvqmdvx.cloudfront.net/3d945691-0f69-422a-b838-81d89055d904/simple_life_illustration_summer_04.crop_792x304_0,185.preview.png" width="100%"></td>
                      </tr>
                      <tr>
                        <td class="email-content" style="background-color:#ffffff">
                          <table align="center" border="1" bordercolor="#ccc" cellpadding="5" cellspacing="0" style="border-collapse:collapse">
                            <tbody>
                              <tr>
                                <td class="copy email-content-block" style="font-family:'Avenir Next','Avenir',Helvetica,sans-serif !important; padding-left:25px; padding-right:25px; padding-top:50px">
                                  <h2 style="margin: 0 0 0.5rem 0; line-height: 1.25; font-family: 'Avenir Next', 'Avenir', Helvetica, sans-serif !important; color: #000000; font-size: 32px; font-weight: 600; font-style: normal;">Hey
                                    <!---->Smiles Davis,</h2> <span style="font-family:'Avenir Next','Avenir',Helvetica,sans-serif !important; font-size:16px; font-weight:400; line-height:1.5; margin-bottom:15px">Summer’s just around the corner, and for me that means camping, swimming, and ice cream outings with my family. These things can quickly add up, so to make sure I’m setting aside money to do everything I want (big or small), I like to set Goals for each one. I literally just set an ice cream Goal for this month! What summer Goals do you have?</span><br>                                  <img alt="" height="88" src="https://d2axdqolvqmdvx.cloudfront.net/3d0ab903-a997-40d5-a43a-fa85fbda6bdf/chris_b_illustration02.crop_355x364_215,101.preview.png" style="padding-right:10px; padding-bottom:10px; float:left"
                                    width="87"><br> <span style="font-family:'Avenir Next','Avenir',Helvetica,sans-serif !important; font-size:16px; font-weight:400; line-height:1.5; margin-bottom:15px">Chris<br> <em>ice cream enthusiast &amp; Simple employee</em></span>
                                  <div><br> &nbsp;</div>
                                  <hr width="75%">
                                  <div><br> <img alt="camping" src="https://d2axdqolvqmdvx.cloudfront.net/e5769adb-640c-4123-bfa5-12b8e1b05ea1/Upgrade_Camping.jpg" width="100%"> <span style="font-family:'Avenir Next','Avenir',Helvetica,sans-serif !important; font-size:16px; font-weight:400; line-height:1.5; margin-bottom:15px"> <strong>Budgeting: Camping edition</strong><br> Many of us spend our summers camping to escape the hustle and bustle of the city. And sometimes you just want to upgrade to that nicer cooler, or the more airy tent. Here’s everything you need to camp better—and on a budget.&nbsp;<br> <a href="https://www.simple.com/blog/upgrade-your-camping-situation-without-breaking-the-bank" style="color:#0d97ff;" target="_blank">Read more</a> </span><br>                                    &nbsp;</div>
                                  <hr width="75%">
                                  <div><br> <img alt="broken down car" src="https://d2axdqolvqmdvx.cloudfront.net/3183eaa1-b8ce-4e27-b547-b2fd3c317e0a/overheatingcar.png" width="100%"> <span style="font-family:'Avenir Next','Avenir',Helvetica,sans-serif !important; font-size:16px; font-weight:400; line-height:1.5; margin-bottom:15px"> <strong>Emergency Fund: So you can keep your cool this summer </strong><br> Longer days call for extended happy hours. And you need to replace the (two pairs of) sunglasses that disappeared last year.<br> <br> But what if you have a bigger emergency, like your car breaks down before that epic road trip you have planned? We want you to be ready for that. And our new Emergency Fund can help, by squirrelling money away for you a little at a time. With an Emergency Fund stashed away, you’ll be sweating from the summer sun, not your bank account.&nbsp;<a href="https://www.simple.com/b/goals/emergency-fund" style="color:#0d97ff;" target="_blank">Start my Emergency Fund</a></span><br>                                    &nbsp;</div>
                                  <hr width="75%">
                                  <div><br> <img alt="enormous unicorn float" src="https://d2axdqolvqmdvx.cloudfront.net/93f3b464-663a-4590-89a2-61a3c59d42e5/unicornfloaty.jpg" width="100%">
                                    <div><br> <img alt="" height="56" src="https://d2axdqolvqmdvx.cloudfront.net/7b0a3599-0f14-4bd0-8342-c69b1537e71e/did_you_know_illustration.png" style="padding-right:10px; padding-left:3px; padding-bottom:50px; float:left"
                                        width="75"> <span style="font-family:'Avenir Next','Avenir',Helvetica,sans-serif !important; font-size:16px; font-weight:400; line-height:1.5; margin-bottom:15px"> The largest unicorn float takes up almost as much&nbsp;square footage as a parking space! What will you be lounging in this summer? Start a Goal for it:</span></div>
                                    <div style="text-align: center;font-family:'Avenir Next','Avenir',Helvetica,sans-serif !important; font-size:14px; font-weight:400; line-height:1.5;"><br> <strong>Giant Unicorn Float</strong></div>
                                    <div class="section" style="padding: 15px 0px; font-family: &quot;Avenir Next&quot;, Avenir, Helvetica, sans-serif !important; text-align: center;"><a class="button" href="https://www.simple.com/a/goals/create?name=Giant%20Unicorn%20Float&amp;amount=300" style="-moz-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); color: white; font-family: 'Avenir Next', 'Avenir', Helvetica, sans-serif !important; background-color: #0d97ff; border-radius: 3px; padding: 8px 10px; font-size:14px;text-decoration: none;"
                                        target="_blank">$300</a></div> &nbsp;</div>
                                  <hr width="75%">
                                  <div><br> <img alt="Alex and Kate" src="https://d2axdqolvqmdvx.cloudfront.net/50a63f8d-7c8c-4809-94b5-fc2033c00160/katealexfeature.jpg" width="100%"> <span style="font-family:'Avenir Next','Avenir',Helvetica,sans-serif !important; font-size:16px; font-weight:400; line-height:1.5; margin-bottom:15px"> <strong>Don't Sweat It: Handling a money change with ease</strong><br> Relationships and finances go through changes, just like seasons and allergies. Most often, we find ourselves gradually adapting. But sometimes the adjustment needs to happen faster than that. Read more about how Kate and Alex got transparent about their finances after Kate lost her job just seven months into dating.&nbsp; <a href="https://www.simple.com/blog/losing-a-job-gaining-a-goal-kate-and-alex-share-their-story" style="color:#0d97ff" target="_blank">Read more</a><br> <br> Show us how saving with Simple has paid off for you! Use <a href="https://www.instagram.com/explore/tags/savedforthat/" style="color:#0d97ff;" target="_blank">#savedforthat</a> on social for a chance to be featured.&nbsp;</span><br>                                    &nbsp;</div>
                                  <hr width="75%">
                                  <p style="margin-bottom: 15px; font-weight: 400; font-size: 16px; line-height: 1.5; font-family: &quot;Avenir Next&quot;, Avenir, Helvetica, sans-serif !important; text-align: center;"><br> ❤️❤️❤️</p>
                                  <p style="margin-bottom: 15px; font-weight: 400; font-size: 16px; line-height: 1.5; font-family: &quot;Avenir Next&quot;, Avenir, Helvetica, sans-serif !important; text-align: center;">If you love using Simple as much as we love building it, shout it from the rooftops! Or, you know, email works too.</p>
                                  <div class="section" style="padding: 20px 0px; font-family: &quot;Avenir Next&quot;, Avenir, Helvetica, sans-serif !important; text-align: center;"><a class="button" href="https://www.simple.com/b/tasks/welcome" style="-moz-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); color: white; font-family: 'Avenir Next', 'Avenir', Helvetica, sans-serif !important; font-weight: 700; background-color: #0d97ff; border-radius: 3px; padding: 10px 12px; text-decoration: none;"
                                      target="_blank">Share Simple</a></div> <br> &nbsp;</td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <table align="center" border="0" cellpadding="0" cellspacing="0" class="email-social-bar" style="background:#0d97ff; padding-bottom:25px; padding-left:50px; padding-right:50px; padding-top:25px; width:100%">
                            <tbody>
                              <tr>
                                <td class="copy email-social-bar-copy" style="font-family:'Avenir Next','Avenir',Helvetica,sans-serif !important">
                                  <p class="ios-no-link" style="margin-bottom: 15px; font-family: 'Avenir Next', 'Avenir', Helvetica, sans-serif !important; font-weight: 400; font-size: 11px; line-height: 1.5; color: white !important; text-decoration: none !important;">Simple Finance Technology Corp.<br style="font-family: 'Avenir Next', 'Avenir', Helvetica, sans-serif !important;"> PO Box 14400<br style="font-family: 'Avenir Next', 'Avenir', Helvetica, sans-serif !important;"> Portland,
                                    OR 97293</p>
                                  <div><a href="#" style="-moz-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); font-family: 'Avenir Next', 'Avenir', Helvetica, sans-serif !important; font-size: 11px; color: white !important; text-decoration: none !important;"
                                      target="_blank">Unsubscribe</a></div>
                                </td>
                                <td class="email-social-bar-icons">
                                  <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%">
                                    <tbody>
                                      <tr>
                                        <td><a class="email-social-bar-social-icon" href="https://www.facebook.com/simple" style="-moz-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); color: #0d97ff; padding: 0 5px; text-decoration: none;"
                                            target="_blank"><img alt="" class="auto-width" height="15" src="https://simple.com/email-images/icons/icon-facebook.png" style="width: 6.89062px; border: 0px; height: 15px; max-width: 100% !important;"></a>
                                          <a
                                            class="email-social-bar-social-icon" href="https://twitter.com/simple" style="-moz-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); color: #0d97ff; padding: 0 5px; text-decoration: none;"
                                            target="_blank"><img alt="" class="auto-width" height="15" src="https://simple.com/email-images/icons/icon-twitter.png" style="width: auto; max-width: 100% !important; border: 0; height: 15px;"></a> <a class="email-social-bar-social-icon"
                                              href="https://www.instagram.com/simple/" style="-moz-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 0.175s cubic-bezier(0.215, 0.61, 0.355, 1); color: #0d97ff; padding: 0 5px; text-decoration: none;"
                                              target="_blank"><img alt="" class="auto-width" height="15" src="https://simple.com/email-images/icons/icon-instagram.png" style="width: auto; max-width: 100% !important; border: 0; height: 15px;"></a></td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%">
                    <tbody>
                      <tr>
                        <td align="center" class="copy email-disclaimer" style="font-family:'Avenir Next','Avenir',Helvetica,sans-serif !important; padding-bottom:15px; padding-left:50px; padding-right:50px; padding-top:15px">
                          <p style="margin-bottom: 15px; font-weight: 400; font-size: 11px; line-height: 1.5; color: rgb(120, 137, 145); margin-top: 0px; font-family: &quot;Avenir Next&quot;, Avenir, Helvetica, sans-serif !important; text-align: center;">Made with ❤️ by Simple's employees working from Portland<br> and 19 states across the U.S.<br> <br> This email was sent to <strong style="color:#788991; font-family:avenir next,avenir,helvetica,sans-serif !important; font-size:11px; font-weight:500; margin-top:0">hello@SmilesDavis.yeah</strong>.
                            This is a commercial message.</p>
                          <p style="margin-bottom: 15px; font-weight: 400; font-size: 11px; line-height: 1.5; color: rgb(120, 137, 145); font-family: &quot;Avenir Next&quot;, Avenir, Helvetica, sans-serif !important; text-align: center;">Banking services provided by BBVA Compass. BBVA Compass is a trade name of Compass Bank, Member FDIC.<br> <br> Disclaimer: Hey! Welcome to our disclaimer.&nbsp;As much as we wish we could control the cost of things, any prices
                            in this email are just estimates. Actual prices are up to retailers, manufacturers, and other people who’ve been granted magical powers over digits and dollar signs.</p>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>

</body>
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console