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.

            
              <!DOCTYPE html>
<html>
  
  <head>
    <!--[if !mso]>
      <!-- -->
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel='stylesheet'
      type='text/css'>
    <!--<![endif]-->
    <!-- Charity:Water Template 2 | Meghan D. 3.3.16 -->
    <!-- SpeedPass enabled and Google Font code added by Logan 6.27.16 -->
    <style type="text/css">
      @media screen and (max-width: 480px) {
          #block_difeepfk .e2ma-holder.e2ma-follow-holder table, #block_oxqqenxd .e2ma-holder.e2ma-follow-holder table, #block_qmcuzeqg .e2ma-holder.e2ma-follow-holder table, #block_uxxysrjm .e2ma-holder.e2ma-follow-holder table, #block_bjqkdfvb .e2ma-holder.e2ma-follow-holder table, #block_pgmirgsx .e2ma-holder.e2ma-follow-holder table, #block_npbysdvq .e2ma-holder.e2ma-follow-holder table {
              width: auto !important;
              margin: 0 auto
              }
          #block_bjqkdfvb .e2ma-holder.e2ma-follow-holder table td, #block_pgmirgsx .e2ma-holder.e2ma-follow-holder table td, #block_oxqqenxd .e2ma-holder.e2ma-follow-holder table td, #block_npbysdvq .e2ma-holder.e2ma-follow-holder table td, #block_qmcuzeqg .e2ma-holder.e2ma-follow-holder table td, #block_difeepfk .e2ma-holder.e2ma-follow-holder table td, #block_uxxysrjm .e2ma-holder.e2ma-follow-holder table td {
              display: table-cell !important;
              float: none !important;
              width: auto !important;
              padding-left: 2px !important;
              padding-right: 2px !important
              }
          html {
              -webkit-text-size-adjust: none
              }
          .e2ma-combo-block div.e2ma-p-div, .e2ma-combo-content li, .e2ma-combo-content div.e2ma-p-div, .e2ma-content-block li, .e2ma-combo-block li, .e2ma-content-block div.e2ma-p-div {
              font-size: 15px !important
              }
          .e2ma-holder table td, .e2ma-holder table {
              display: table !important;
              float: none !important;
              width: 100% !important;
              padding-left: 0 !important;
              padding-right: 0 !important
              }
          .e2ma-single-column-layout table {
              float: none !important;
              margin: 0 auto
              }
          .business_rsvp, .e2ma-unsubscribe span {
              font-size: 12px !important
              }
          .social-sharing {
              text-align: center !important;
              padding-bottom: 10px
              }
          .e2ma-layout-column-sidebar-3 img, .e2ma-layout-column-content img, .e2ma-layout-column-sidebar img, .e2ma-single-column-layout img, .e2ma-layout-column-sidebar-2 img {
              max-width: 100%;
              height: auto;
              margin: 0 auto;
              padding-left: 0 !important;
              padding-right: 0 !important
              }
          .e2ma-design-option-left-column .e2ma-wrapper .e2ma-combo-content .e2ma-content-block .e2ma-wrapper, .e2ma-design-option-right-column .e2ma-wrapper {
              padding-left: 10px !important;
              padding-right: 10px !important
              }
          .footer-social img {
              width: 44px !important;
              height: 43px !important;
              margin: 0 auto
              }
          .share-block {
              text-align: center !important;
              margin: 0 auto !important
              }
          .footer-text {
              text-align: center !important
              }
          .mobile-width {
              width: 100% !important;
              padding-left: 10px;
              padding-right: 10px
              }
          .mobile-width-nopad {
              width: 100% !important
              }
          .stack, .e2ma-layout-column-content, .e2ma-layout-column-sidebar-2, .e2ma-layout-column-sidebar, .e2ma-layout-column-sidebar-3 {
              display: block !important;
              width: 100% !important
              }
          .hide {
              display: none !important
              }
          .center, .center img {
              text-align: center !important;
              margin: 0 auto
              }
          .left, .left img {
              text-align: left !important;
              margin: 0 auto
              }
          .editable_image img, .scale img {
              max-width: 100%;
              height: auto;
              margin: 0 auto
              }
          .addpad {
              padding: 10px !important
              }
          .addpad-top {
              padding-top: 10px !important
              }
          .sanpad {
              padding: 0 !important
              }
          .sanborder {
              border: none !important
              }
          }
      h1, h2, h3, h4, h5, h6 {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline
          }
      h1 {
          font-family: "Open Sans", Arial, sans-serif !important;
          font-size: 26px;
          font-weight: normal;
          color: #333
          }
      h2 {
          font-family: "Open Sans", Arial, sans-serif !important;
          font-size: 18px;
          font-weight: normal;
          color: #333
          }
      h3 {
          font-family: "Open Sans", Arial, sans-serif !important;
          font-size: 14px;
          font-weight: normal;
          color: #333
          }
      h4 {
          font-family: "Open Sans", Arial, sans-serif !important;
          font-size: 11px;
          font-weight: normal;
          color: #333
          }
      .e2ma-content-block div.e2ma-p-div, .e2ma-combo-block div.e2ma-p-div, .e2ma-combo-content div.e2ma-p-div, .e2ma-content-block li, .e2ma-combo-block li, .e2ma-combo-content li {
          font-family: "Open Sans", Arial, sans-serif !important;
          font-size: 13px;
          color: #333
          }
      #template_container a, .link {
          color: #333;
          text-decoration: underline
          }
      blockquote {
          padding-top: 10px;
          padding-bottom: 10px;
          border-top: 1px solid #000;
          border-bottom: 1px solid #000;
          font-style: italic
          }
      blockquote div.e2ma-p-div {
          margin-bottom: 0
          }
      .editable_image img {
          display: block;
          border: 0
          }
      .e2ma-unsubscribe {
          padding-bottom: 10px
          }
      .business_rsvp {
          font-family: Helvetica, Arial, sans-serif;
          padding: 10px;
          color: #666;
          font-size: 10px
          }
    </style>
    <meta content="telephone=no" name="format-detection" />
  </head>
  
  <body class="e2ma-design-option-backdrop e2ma-template" data-e2ma-styles="background"
  style="padding: 0;width: 100% !important;margin: 0;background-color: #eee">
    <div class="e2ma-design-option-backdrop" data-e2ma-styles="background" style="padding: 0;width: 100% !important;margin: 0;background-color: #eee">
      <table border="0" cellpadding="0" cellspacing="0" data-e2ma-color="#ffca0b, #2e9df7, #eeeeee"
      style="font-family: Helvetica;font-size: 12px" width="100%">
        <tbody>
          <tr>
            <td align="center" class="sanpad" style="padding-top:15px" valign="top">
              <table border="0" cellpadding="0" cellspacing="0" class="mobile-width-nopad" id="template_container"
              style="font-family: Helvetica;font-size: 12px" width="640">
                <tbody>
                  <tr>
                    <td align="left" style="background-color:#ffffff" valign="top">
                      <table border="0" cellpadding="0" cellspacing="0" class="e2ma-row-region-content"
                      style="font-family: Helvetica;font-size: 12px" width="100%">
                        <tbody>
                          <tr>
                            <td class="e2ma-layout-column-content">
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_vuczumyo"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td style="padding-bottom:20px"></td>
                                  </tr>
                                  <tr>
                                    <td class="e2ma-wrapper" style="padding-right: 20px;padding-bottom: 20px;padding-left: 20px"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 0 0 0 0;background-color: transparent;border-width: 1px;border-style: solid;border-color: #fff">
                                              <div style="border-bottom: #ffffff solid 2px">
                                                <img border="0" height="1" src="http://cdn.e2ma.net/userdata/images/spacer.gif"
                                                style="display:block" width="1" />
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <div class="e2ma-multi-column-layout">
                        <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                        width="100%">
                          <tbody>
                            <tr>
                              <td class="e2ma-layout-column-content e2ma-design-option-left-column" data-e2ma-styles="background,border-left,border-right"
                              style="background-color: transparent" valign="top" width="50%">
                                <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_iyhzuhse"
                                style="font-family: Helvetica;font-size: 12px" width="100%">
                                  <tbody>
                                    <tr>
                                      <td class="e2ma-wrapper" style="padding-right: 40px;padding-bottom: 10px;padding-left: 40px"
                                      valign="top">
                                        <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                        width="100%">
                                          <tbody>
                                            <tr>
                                              <td class="e2ma-holder" style="padding: 0 0 0 0;background-color: transparent"
                                              valign="top">
                                                <div class="center" style="text-align: left">
                                                  <img alt="" src="" width="" />
                                                </div>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                              <td class="e2ma-layout-column-content e2ma-design-option-right-column" data-e2ma-styles="background,border-left,border-right"
                              style="background-color: transparent" valign="top" width="50%">
                                <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_mcqyyivr"
                                style="font-family: Helvetica;font-size: 12px" width="100%">
                                  <tbody>
                                    <tr>
                                      <td style="padding-bottom:20px"></td>
                                    </tr>
                                    <tr>
                                      <td class="e2ma-wrapper" style="padding-right: 20px;padding-bottom: 20px;padding-left: 20px"
                                      valign="top">
                                        <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                        width="100%">
                                          <tbody>
                                            <tr>
                                              <td class="e2ma-holder" style="padding: 0 0 0 0;background-color: transparent"
                                              valign="top">
                                                <div class="center" style="background-color: #fff; font-style: italic; font-size: 14px; font-family: serif; line-height: 16px; color: #888; text-align: right">An update on your monthly giving
                                                  <br/>membership through .</div>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <table border="0" cellpadding="0" cellspacing="0" class="e2ma-row-region-content"
                      style="font-family: Helvetica;font-size: 12px" width="100%">
                        <tbody>
                          <tr>
                            <td class="e2ma-layout-column-content">
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_gappqqlp"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td style="padding-bottom:6px"></td>
                                  </tr>
                                  <tr>
                                    <td class="e2ma-wrapper" style="padding-right: 6px;padding-bottom: 6px;padding-left: 6px"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 0 0 0 0;background-color: transparent;border-width: 1px;border-style: solid;border-color: #fff">
                                              <div style="border-bottom: #ffffff solid 0px">
                                                <img border="0" height="1" src="http://cdn.e2ma.net/userdata/images/spacer.gif"
                                                style="display:block" width="1" />
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_pgmirgsx"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td class="e2ma-wrapper" style="padding-right: 0;padding-bottom: 0;padding-left: 0"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 0;background-color: transparent" valign="top">
                                              <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                <tbody>
                                                  <tr>
                                                    <td valign="top">
                                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                        <tbody>
                                                          <tr>
                                                            <td class="e2ma-image-td" style="text-align: center; padding: 0px 0px 0px 0px; "
                                                            valign="top">
                                                              <img alt="Your membership means clean water for Srey from this day forward. "
                                                              border="0" height="572" src="http://d31hzlhk6di2h5.cloudfront.net/20171003/55/b2/28/6f/a24466bf958ff3c91f7d9d24_1280x1144.png"
                                                              style="display: block" width="640" />
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_bjqkdfvb"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td class="e2ma-wrapper" style="padding-right: 0;padding-bottom: 0;padding-left: 0"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 40px 0 20px 0;background-color: #239bfa"
                                            valign="top">
                                              <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                <tbody>
                                                  <tr>
                                                    <td valign="top">
                                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                        <tbody>
                                                          <tr>
                                                            <td class="e2ma-image-td" style="text-align: center; padding: 0px 0px 0px 0px; "
                                                            valign="top">
                                                              <img alt="" border="0" height="105" src="http://d31hzlhk6di2h5.cloudfront.net/20171003/8a/a0/26/77/ae794461cd748e3a775e3ff3_1280x210.png"
                                                              style="display: block" width="640" />
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_gzkbvgzq"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td class="e2ma-wrapper e2ma-image-td" style="padding-right: 0;padding-bottom: 0;padding-left: 0;font-size: 12px;line-height: 1.5"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 0 70px 40px 70px;background-color: #239bfa"
                                            valign="top">
                                              <div class="e2ma-content-block">
                                                <div style="text-align: center"></div>
                                                <div class="e2ma-p-div" style="display: block;margin-bottom: 10px;font-size: 12px;line-height: 1.5;font-weight: normal;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;text-align: center"><span class="e2ma-style" style="color: rgb(255, 255, 255); font-size: 20px"><strong>Srey Krem has lived in the same community in rural Cambodia her entire life. </strong></span>
                                                  <span
                                                  class="e2ma-style" style="color: rgb(255, 255, 255); font-size: 18px; text-align: center"></span>
                                                </div>
                                                <div class="e2ma-p-div" style="display: block;margin-bottom: 10px;font-size: 12px;line-height: 1.5;font-weight: normal;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;text-align: center"><span class="e2ma-style" style="color: rgb(255, 255, 255)"><span class="e2ma-style" style="font-size: 18px">For 30 years, she’s relied on unsafe water from local ponds and unprotected sources for cooking, cleaning, and drinking. And like most families here, she and her husband, along with their three kids were often sick.</span></span>
                                                </div>
                                                <div></div>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_oxqqenxd"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td class="e2ma-wrapper" style="padding-right: 0;padding-bottom: 0;padding-left: 0"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 0;background-color: #239bfa" valign="top">
                                              <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                <tbody>
                                                  <tr>
                                                    <td valign="top">
                                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                        <tbody>
                                                          <tr>
                                                            <td class="e2ma-image-td" style="text-align: center; padding: 0px 0px 0px 0px; "
                                                            valign="top">
                                                              <img alt="" border="0" height="82" src="http://d31hzlhk6di2h5.cloudfront.net/20171003/86/15/e3/57/5c68e3adab5ca753047c67ed_1280x164.png"
                                                              style="display: block" width="640" />
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_bxygsiik"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td class="e2ma-wrapper e2ma-image-td" style="padding-right: 0;padding-bottom: 0;padding-left: 0;font-size: 12px;line-height: 1.5"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 20px 70px 40px 70px;background-color: #239bfa"
                                            valign="top">
                                              <div class="e2ma-content-block">
                                                <div style="text-align: center"></div>
                                                <div class="e2ma-p-div" style="display: block;margin-bottom: 10px;font-size: 12px;line-height: 1.5;font-weight: normal;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;text-align: center"><span class="e2ma-style" style="color: rgb(255, 255, 255); font-size: 20px"><strong>The Good News</strong></span>
                                                  <span
                                                  class="e2ma-style" style="color: rgb(255, 255, 255); font-size: 18px; text-align: center"></span>
                                                </div>
                                                <div style="text-align: center"></div>
                                                <div class="e2ma-p-div" style="display: block;margin-bottom: 10px;font-size: 12px;line-height: 1.5;font-weight: normal;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;text-align: center"><span class="e2ma-style" style="color: rgb(255, 255, 255); font-size: 18px">But all of that changed last month when our local partner, Clear Cambodia, arrived at Srey’s home to install a brand new BioSand Filter.</span>

                                                </div>
                                                <div></div>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_difeepfk"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td class="e2ma-wrapper" style="padding-right: 0;padding-bottom: 0;padding-left: 0"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 0 0 0 0;background-color: #fff" valign="top">
                                              <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                <tbody>
                                                  <tr>
                                                    <td valign="top">
                                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                        <tbody>
                                                          <tr>
                                                            <td class="e2ma-image-td" style="text-align: center; padding: 0px 0px 0px 0px; "
                                                            valign="top">
                                                              <img alt="Srey's new BioSand Filter" border="0" height="341" src="http://d31hzlhk6di2h5.cloudfront.net/20171003/aa/f3/2d/3c/35d3fd3c86365f0ee3fcf03b_1280x682.png"
                                                              style="display: block" width="640" />
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_qmcuzeqg"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td class="e2ma-wrapper" style="padding-right: 0;padding-bottom: 0;padding-left: 0"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 0 0 0 0;background-color: #2e9df7" valign="top">
                                              <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                <tbody>
                                                  <tr>
                                                    <td valign="top">
                                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                        <tbody>
                                                          <tr>
                                                            <td class="e2ma-image-td" style="text-align: center; padding: 0px 0px 0px 0px; "
                                                            valign="top">
                                                              <img alt="BioSand Filter" border="0" height="334" src="http://d31hzlhk6di2h5.cloudfront.net/20171003/a0/e7/af/ed/12162ee0d08989c5724b9d2a_1280x668.png"
                                                              style="display: block" width="640" />
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_sqkifjya"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td class="e2ma-wrapper e2ma-image-td" style="padding-right: 0;padding-bottom: 0;padding-left: 0;font-size: 12px;line-height: 1.5"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 40px 70px 0 70px;background-color: #239bfa"
                                            valign="top">
                                              <div class="e2ma-content-block">
                                                <div style="text-align: center"></div>
                                                <div class="e2ma-p-div" style="display: block;margin-bottom: 10px;font-size: 12px;line-height: 1.5;font-weight: normal;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;text-align: center"><span class="e2ma-style" style="color: rgb(255, 255, 255); font-size: 20px"><strong>What is a BioSand Filter?</strong></span>

                                                </div>
                                                <div></div>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_oqlilmek"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td class="e2ma-wrapper e2ma-image-td" style="padding-right: 0;padding-bottom: 0;padding-left: 0;font-size: 12px;line-height: 1.5"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 20px 70px 40px 70px;background-color: #239bfa"
                                            valign="top">
                                              <div class="e2ma-content-block">
                                                <div style="text-align: center"></div>
                                                <div style="text-align: center"></div>
                                                <div class="e2ma-p-div" style="display: block;margin-bottom: 10px;font-size: 12px;line-height: 1.5;font-weight: normal;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;text-align: center"><span class="e2ma-style" style="color: rgb(255, 255, 255); font-size: 18px">Today, anyone in Srey’s family can pour dirty water into the top of their BioSand Filter and watch clean and clear water come out the bottom. From this day forward, they’ll have as much clean water as they need, and they’ll be healthier than ever before.</span>

                                                </div>
                                                <div></div>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_npbysdvq"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td class="e2ma-wrapper" style="padding-right: 0;padding-bottom: 0;padding-left: 0"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 0 0 0 0;background-color: #fff" valign="top">
                                              <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                <tbody>
                                                  <tr>
                                                    <td valign="top">
                                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                        <tbody>
                                                          <tr>
                                                            <td class="e2ma-image-td" style="text-align: center; padding: 0px 0px 0px 0px; "
                                                            valign="top">
                                                              <img alt="Water before going into a BioSand Filter and after " border="0" height="291"
                                                              src="http://d31hzlhk6di2h5.cloudfront.net/20171003/44/6a/e0/65/7739d2a8062ae7bad524c833_1280x582.png"
                                                              style="display: block" width="640" />
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_woslygfi"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td class="e2ma-wrapper e2ma-image-td" style="padding-right: 0;padding-bottom: 0;padding-left: 0;font-size: 12px;line-height: 1.5"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 40px 70px 40px 70px;background-color: #239bfa"
                                            valign="top">
                                              <div class="e2ma-content-block">
                                                <div style="text-align: center"></div>
                                                <div style="text-align: center"></div>
                                                <div style="text-align: center"></div>
                                                <div class="e2ma-p-div" style="display: block;margin-bottom: 10px;font-size: 12px;line-height: 1.5;font-weight: normal;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;text-align: center"><span class="e2ma-style" style="color: rgb(255, 255, 255); font-size: 18px">Your monthly donation to The Spring is bringing BioSand Filters and a new way of life to families all over rural Cambodia. Thank you for continuing to change lives for women like Srey.</span>

                                                </div>
                                                <div></div>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_jmmyrhhc"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td class="e2ma-wrapper e2ma-image-td" style="padding-right: 0;padding-bottom: 0;padding-left: 0;font-size: 12px;line-height: 1.5"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 40px 40px 0 40px;background-color: #135d97"
                                            valign="top">
                                              <div class="e2ma-content-block">
                                                <div class="e2ma-p-div" style="display: block;margin-bottom: 10px;font-size: 12px;line-height: 1.5;font-weight: normal;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;font-family: 'Open Sans', Arial, sans-serif !important;font-size: 13px;color: #333;text-align: center"><strong><span class="e2ma-style" style="font-size: 20px; color: rgb(255, 255, 255)">Share This Update</span></strong> 
                                                </div>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table border="0" cellpadding="0" cellspacing="0" class="e2ma-block-outer" id="block_uxxysrjm"
                              style="font-family: Helvetica;font-size: 12px" width="100%">
                                <tbody>
                                  <tr>
                                    <td class="e2ma-wrapper" style="padding-right: 0;padding-bottom: 0;padding-left: 0"
                                    valign="top">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="e2ma-holder" style="padding: 0 0 0 0;background-color: #135d97" valign="top">
                                              <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                <tbody>
                                                  <tr>
                                                    <td valign="top">
                                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px">
                                                        <tbody>
                                                          <tr>
                                                            <td class="e2ma-image-td" style="text-align: center; padding: 40px 20px 40px 256px; "
                                                            valign="top">
                                                              <a href="https://t.e2ma.net/click/5503bd/9shnts/t8uj2eb" style="font-weight: normal;font-weight: normal;color: #333;text-decoration: underline;color: #333;text-decoration: underline"
                                                              target="_blank">
                                                                <img alt="Facebook" border="0" height="50" src="http://d31hzlhk6di2h5.cloudfront.net/20171003/db/e5/c6/e3/fb975345c7de196abbad75cb_54x100.png"
                                                                style="display: block" width="27" />
                                                              </a>
                                                            </td>
                                                            <td class="e2ma-image-td" style="text-align: center; padding: 40px 257px 40px 20px; "
                                                            valign="top">
                                                              <a href="https://t.e2ma.net/click/5503bd/9shnts/90vj2eb" style="font-weight: normal;font-weight: normal;color: #333;text-decoration: underline;color: #333;text-decoration: underline"
                                                              target="_blank">
                                                                <img alt="Twitter" border="0" height="50" src="http://d31hzlhk6di2h5.cloudfront.net/20171003/12/b1/03/20/a5e2a9bb5b5b286373c8dcf8_120x100.png"
                                                                style="display: block" width="60" />
                                                              </a>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td align="center" style="background-color:#eeeeee; padding:57px 0px" valign="top">
                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                      width="100%">
                        <tbody>
                          <tr>
                            <td align="center" width="146">
                              <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                              width="100%">
                                <tbody>
                                  <tr>
                                    <td align="center">
                                      <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                      width="100%">
                                        <tbody>
                                          <tr>
                                            <td class="hide">
                                              <img border="0" height="1" src="http://cdn.e2ma.net/userdata/images/spacer.gif"
                                              style="display:block" width="1" />
                                            </td>
                                            <td align="center" style="padding-bottom:53px" width="157">
                                              <table align="center" border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                                              width="157">
                                                <tbody>
                                                  <tr>
                                                    <td align="center">
                                                      <a href="https://t.e2ma.net/click/5503bd/9shnts/ptwj2eb" style="font-weight: normal;font-weight: normal;color: #333;text-decoration: underline;color: #333;text-decoration: underline"
                                                      target="_blank">
                                                        <img border="0" height="19" src="http://cdn.e2ma.net/userdata/1757787/images/templates/CharityTwitter.png"
                                                        style="display:block" width="26" />
                                                      </a>
                                                    </td>
                                                    <td align="center">
                                                      <a href="https://t.e2ma.net/click/5503bd/9shnts/5lxj2eb" style="font-weight: normal;font-weight: normal;color: #333;text-decoration: underline;color: #333;text-decoration: underline"
                                                      target="_blank">
                                                        <img border="0" height="19" src="http://cdn.e2ma.net/userdata/1757787/images/templates/CharityFacebook.png"
                                                        style="display:block" width="26" />
                                                      </a>
                                                    </td>
                                                    <td align="center">
                                                      <a href="https://t.e2ma.net/click/5503bd/9shnts/leyj2eb" style="font-weight: normal;font-weight: normal;color: #333;text-decoration: underline;color: #333;text-decoration: underline"
                                                      target="_blank">
                                                        <img border="0" height="20" src="http://cdn.e2ma.net/userdata/1757787/images/templates/CharityInsta.png"
                                                        style="display:block" width="34" />
                                                      </a>
                                                    </td>
                                                    <td align="center">
                                                      <a href="https://t.e2ma.net/click/5503bd/9shnts/16yj2eb" style="font-weight: normal;font-weight: normal;color: #333;text-decoration: underline;color: #333;text-decoration: underline"
                                                      target="_blank">
                                                        <img border="0" height="21" src="http://cdn.e2ma.net/userdata/1757787/images/templates/CharitySnapchat.png"
                                                        style="display:block" width="38" />
                                                      </a>
                                                    </td>
                                                    <td align="center">
                                                      <a href="https://t.e2ma.net/click/5503bd/9shnts/hzzj2eb" style="font-weight: normal;font-weight: normal;color: #333;text-decoration: underline;color: #333;text-decoration: underline"
                                                      target="_blank">
                                                        <img border="0" height="19" src="http://cdn.e2ma.net/userdata/1757787/images/templates/CharityYoutube.png"
                                                        style="display:block" width="28" />
                                                      </a>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                            <td class="hide">
                                              <img border="0" height="1" src="http://cdn.e2ma.net/userdata/images/spacer.gif"
                                              style="display:block" width="1" />
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td align="center">
                              <table border="0" cellpadding="0" cellspacing="0" style="font-family: Helvetica;font-size: 12px"
                              width="100%">
                                <tbody>
                                  <tr>
                                    <td align="center">
                                      <a href="https://t.e2ma.net/click/5503bd/9shnts/xr0j2eb" style="font-weight: normal;font-weight: normal;color: #333;text-decoration: underline;color: #333;text-decoration: underline"
                                      target="_blank">
                                        <img border="0" height="23" src="http://cdn.e2ma.net/userdata/1757787/images/templates/CharityWaterEmmaCopy_17.png"
                                        style="display:block" width="159" />
                                      </a>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td style="padding-top:30px; font-family:Arial, sans-serif; font-size:13px; line-height:1.2; color:#a2a2a2; text-align:center">
                                      <a href="https://t.e2ma.net/click/5503bd/9shnts/dk1j2eb" style="font-weight: normal;font-weight: normal;color: #333;text-decoration: underline;color: #333;text-decoration: underline;text-decoration:none; color:#a2a2a2">40 Worth Street, Suite 330, New York, NY 10013</a>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td style="font-family:Arial, sans-serif; font-size:13px; line-height:1.2; color:#a2a2a2; text-align:center; padding-top:25px">
                                      <a href="#" style="font-weight: normal;font-weight: normal;color: #333;text-decoration: underline;color: #333;text-decoration: underline;text-decoration:underline; color:#a2a2a2">Send Me Less Email</a> |
                                      <a href='#' style="font-weight: normal;font-weight: normal;color: #333;text-decoration: underline;color: #333;text-decoration: underline;text-decoration:underline; color:#a2a2a2">View In My Browser</a>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td style="padding-top:38px; font-family:Arial, sans-serif; font-size:11px; line-height:1.2; color:#a2a2a2; text-align:center">
                              <a href='#'
                              style="font-weight: normal;font-weight: normal;color: #333;text-decoration: underline;color: #333;text-decoration: underline;text-decoration:none; color:#a2a2a2">Opt-out from all charity: water emails using TrueRemove®</a>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <img src="https://t.e2ma.net/track/5503bd/9shnts" width="1" height="1">
  </body>

</html>
            
          
!
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.

Console