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 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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

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.

            
              <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Simple + BBVA Compass: we’re moving!</title>
  <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>
  <!--[if mso]><style type=”text/css”>span,td,table,div,p{font-family:Helvetica,sans-serif}</style><![endif]-->
</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;">The Simple you know and (hopefully) love isn’t going anywhere. We are, however, transitioning to our new partner bank.</span><img src="http://links.simple.com/e/open?_k=8dbbfde46a4d438d83c4d5d3d8484ea4&amp;_u=&amp;_n=71436&amp;_t=109270&amp;_m=8d32ade69ac9467abd008f2bdd807550"
    style="border:0;width:1px;height:1px;" width="1" height="1">
  <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%">
    <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 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 class="hero-image" src="https://simple.com/email-images/migration-hero.png" style="width: 100%; max-width: 100% !important; position: relative; border-bottom: 5px solid #0d97ff; display: block; top: -1px;" width="550"></td>
                      </tr>
                      <tr>
                        <td class="email-content" style="background-color: #FFFFFF;">
                          <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%">
                            <tbody>
                              <tr>
                                <td class="email-content-block copy" style="font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, 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: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; color: #333e48; font-size: 2rem; font-weight: 500; font-style: normal;">Hi <!----> Really Good Emails<!---->,</h2>
                                  <p style="margin-bottom: 15px; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; font-weight: 400; font-size: 16px; line-height: 1.5;">The Simple you know and (hopefully) love isn’t going anywhere. We are, however, transitioning to our new partner bank. If you'd like to keep banking with Simple, we need your help moving your account from our current
                                    partner bank, The Bancorp Bank, to our new one, BBVA Compass.</p>
                                  <h3 style="margin: 0 0 0.5rem 0; line-height: 1.25; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; color: #3e474c; font-size: 1.25rem; font-weight: 500;">Ok, but why the change?</h3>
                                  <p style="margin-bottom: 15px; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; font-weight: 400; font-size: 16px; line-height: 1.5;">Since BBVA Compass became our parent company in 2014, we’ve been excited to start using their technology platform; it’s well-suited to our love of tech and appreciation for innovation. We’re confident that the future
                                    of Simple and BBVA Compass is bright.</p>
                                  <h3 style="margin: 0 0 0.5rem 0; line-height: 1.25; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; color: #3e474c; font-size: 1.25rem; font-weight: 500;">What does it mean for me?</h3>
                                  <p style="margin-bottom: 15px; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; font-weight: 400; font-size: 16px; line-height: 1.5;">It means we have some exciting announcements forthcoming! If you decide to move your account, you’ll be one step closer to enjoying&nbsp;the new features we’ve developed to share, save, and spend money with a partner,
                                    friend, or family member. Helpful saving features are coming too.</p>
                                  <h3 style="margin: 0 0 0.5rem 0; line-height: 1.25; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; color: #3e474c; font-size: 1.25rem; font-weight: 500;">Will my account information change?</h3>
                                  <p style="margin-bottom: 15px; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; font-weight: 400; font-size: 16px; line-height: 1.5;">In short, yes. If you decide to move your Simple account from The Bancorp Bank to BBVA Compass, you'll get a new Simple Visa<sup>®</sup> Card, and new bank routing and account numbers. (So, indeed, you'll need to update
                                    any subscriptions and autopays you have set up. We're sorry for the hassle!) The good news is that your balance, Goals, transaction history, etc., will arrive in your new Simple account on BBVA Compass right along with
                                    you. We'll take it in small steps to make sure the entire process runs super-smoothly.</p>
                                  <h3 style="margin: 0 0 0.5rem 0; line-height: 1.25; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; color: #3e474c; font-size: 1.25rem; font-weight: 500;">What do I do now?</h3>
                                  <p style="margin-bottom: 15px; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; font-weight: 400; font-size: 16px; line-height: 1.5;">Stay tuned! We'll be in touch in 2 days with an "it's time!" email describing how you can move your Simple account to our new partner bank, BBVA Compass.</p>
                                  <p style="margin-bottom: 15px; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; font-weight: 400; font-size: 16px; line-height: 1.5;">Don’t fret. We’ll be with you every step of the way.</p>
                                  <p class="signout light-type" style="margin-bottom: 15px; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; font-weight: 400; font-size: 16px; line-height: 1.5; color: #788991;">— The Team at Simple</p>
                                  <div class="padding-break" style="font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; margin-top: 50px;"></div>
                                </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="email-social-bar-copy copy" style="font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important;">
                                  <p class="ios-no-link" style="margin-bottom: 15px; font-family: &quot; AvenirNext&quot;,&quot;Avenir&quot;,&quot;Helvetica&quot;,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: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important;"> PO Box 28462<br style="font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important;">                                    Portland, OR 97228</p>
                                </td>
                                <td class="email-social-bar-icons">
                                  <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%">
                                    <tbody>
                                      <tr>
                                        <td align="right">
                                          <a class="email-social-bar-social-icon" href="http://links.simple.com/u/2711bf6c9d0b4cc8b1b2a05da7199b37?_e=&amp;_m=8d32ade69ac9467abd008f2bdd807550" 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 class="”auto-width”" height="15" src="https://simple.com/email-images/icons/icon-facebook.png" style="width: auto; max-width: 100% !important; border: 0; height: 15px;"></a>
                                          <a class="email-social-bar-social-icon" href="http://links.simple.com/u/e86dcf22a70748389a3cb31d69bee04e?_e=&amp;_m=8d32ade69ac9467abd008f2bdd807550" 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 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="http://links.simple.com/u/3f1d2352998c4b339ee533fae1df19a6?_e=&amp;_m=8d32ade69ac9467abd008f2bdd807550" 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 class="”auto-width”" height="15" src="https://simple.com/email-images/icons/icon-pinterest.png" style="width: auto; max-width: 100% !important; border: 0; height: 15px;"></a>
                                          <a class="email-social-bar-social-icon" href="http://links.simple.com/u/e8c3f539d75d4dc29c60374c59801ead?_e=&amp;_m=8d32ade69ac9467abd008f2bdd807550" 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 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="email-disclaimer copy" style="font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; padding-left: 50px; padding-right: 50px; padding-top: 15px; padding-bottom: 15px;">
                          <p style="margin-bottom: 15px; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; font-weight: 400; font-size: 11px; line-height: 1.5; color: #788991; margin-top: 0;">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">xxxxx@xxxxx.xxx</strong>.</p>
                          <p style="margin-bottom: 15px; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; font-weight: 400; font-size: 11px; line-height: 1.5; color: #788991;">Banking services provided are provided by Compass Bank and The Bancorp Bank; Members FDIC. BBVA Compass is a trade name of Compass Bank.</p>
                          <p style="margin-bottom: 15px; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; font-weight: 400; font-size: 11px; line-height: 1.5; color: #788991;">The Simple Visa Card is issued by Compass Bank and The Bancorp Bank pursuant to a license from Visa U.S.A. Inc., and may be used everywhere Visa debit cards are accepted.</p>
                          <p style="margin-bottom: 15px; font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, &quot;Helvetica&quot;, sans-serif !important; font-weight: 400; font-size: 11px; line-height: 1.5; color: #788991;">Please see back of your Card for issuing bank.</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