WorkspaceFieldwell — water mission
Find your next idea/Create
STUDIO PICK · TEMPLATE

Fieldwell — water mission

A sunshine-yellow nonprofit campaign with a giant water glyph, visible donation choices and a sample impact calculation.

S studioUpdated Oct 5, 2026Revision 1
Remix this Present Download
LIVE PREVIEW Isolated & interactive
<!-- Original layout, SVG/CSS artwork and JavaScript © 2026 XXC Templates. MIT License.
Visual pattern references (original code, names and content; no affiliation):
charity: water: https://www.charitywater.org/
A focused donation action and an impact narrative with clear supporting information.
Illustrative sample content and data; no real accounts, payments, reservations or messages. -->
<main>
  <header>
    <b>fieldwell<span>↗</span></b>
    <nav><a href="#why">Why water</a><a href="#give">Take part</a></nav>
    <small>EVERY DROP IS A BEGINNING.</small>
  </header>
  <section class="mission" id="why">
    <div>
      <span class="tag">SMALL ACTION. LASTING CHANGE.</span>
      <h1>TURN ON<br />A BETTER<br /><i>TOMORROW.</i></h1>
      <p>Clean water belongs in every everyday story. Let's help write the next one.</p>
    </div>
    <div class="water-art" aria-label="Original blue water drop illustration">
      <svg viewBox="0 0 260 290">
        <path
          d="M130 12C112 51 40 116 40 180A90 90 0 0 0 220 180C220 116 148 51 130 12Z"
          fill="#1459ac"
        />
        <path
          d="M74 177Q73 220 115 237"
          fill="none"
          stroke="#e9f5ff"
          stroke-width="12"
          stroke-linecap="round"
        /></svg
      ><span>WATER IS<br />WHERE IT STARTS.</span>
    </div>
  </section>
  <section class="give" id="give">
    <div>
      <b>A little goes further.</b>
      <p>Choose a sample gift to see the impact model.</p>
    </div>
    <div class="amounts">
      <button id="change" data-amount="15" aria-pressed="false">$15</button
      ><button data-amount="30" aria-pressed="true">$30</button
      ><button data-amount="60" aria-pressed="false">$60</button>
    </div>
    <strong id="impact">6 refill kits</strong>
  </section>
  <output data-status aria-live="polite"></output>
  <footer class="demo-note">Fictional brand · local interface demo · no information is sent</footer>
</main>
Revision history · 1 versions
v12026-10-05 18:26:29 UTC

Keep the ideas flowing.

Explore the library
HELP KEEP THE WORKSHOP USEFUL

Report this creation
ONE QUICK CHECK

Continue?