Design patterns · Section 09 of 14

Get involved

Ten layouts for giving monthly, fundraising, volunteering, partnering and sharing the appeal. Click View code under any design to see its HTML, or Copy HTML to paste it into a page.

Get involved · Design 01

Five Way Grid

Five linked cards in a two-over-three grid, with Give monthly picked out in teal as the lead option.

Get involved

Five ways to help families in Pakistan and the UK

Giving is one way to support the work. There are others, and each of them helps.

<section aria-labelledby="involved-01-title" class="bg-smoke py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="mx-auto max-w-[60ch] text-center">
      <p class="t-label text-water">Get involved</p>
      <h2 id="involved-01-title" class="t-h2 mt-3">Five ways to help families in Pakistan and the UK</h2>
      <p class="t-lead mt-4 text-slate">Giving is one way to support the work. There are others, and each of them helps.</p>
    </div>
    <ul class="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-6">
      <li class="lg:col-span-3">
        <a href="donate.html?frequency=monthly" class="card-hover group flex h-full flex-col rounded-xl bg-water p-6 text-white shadow-[var(--shadow-card)] sm:p-8">
          <span class="grid size-12 place-items-center rounded-md bg-marigold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-38.34-85.66a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L116,164.69l42.34-42.35A8,8,0,0,1,169.66,122.34Z"></path></svg></span>
          <h3 class="t-h3 mt-6">Give monthly</h3>
          <p class="mt-2 max-w-[44ch] flex-1 text-[15px] leading-relaxed text-white/85">Regular gifts let us plan ahead and respond quickly when a family needs help. Cancel at any time.</p>
          <span class="t-label mt-6 inline-flex items-center gap-1.5 text-white">Set up a monthly gift<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
        </a>
      </li>
      <li class="lg:col-span-3">
        <a href="get-involved.html#fundraise" class="card card-hover group flex h-full flex-col p-6 sm:p-8">
          <span class="grid size-12 place-items-center rounded-md bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M248,120a48.05,48.05,0,0,0-48-48H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48.07,48.07,0,0,0,248,120ZM48,199.93V40h0c42.81,35.91,86.63,45,104,47.24v65.48C134.65,155,90.84,164.07,48,199.93Zm131,8,0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z"></path></svg></span>
          <h3 class="t-h3 mt-6">Fundraise for us</h3>
          <p class="mt-2 max-w-[44ch] flex-1 text-[15px] leading-relaxed text-slate">Run, bake, climb or host an iftar and ask friends to sponsor you.</p>
          <span class="t-label mt-6 inline-flex items-center gap-1.5 text-water">Find out more<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
        </a>
      </li>
      <li class="lg:col-span-2">
        <a href="get-involved.html#volunteer" class="card card-hover group flex h-full flex-col p-6 sm:p-7">
          <span class="grid size-12 place-items-center rounded-md bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M230.33,141.06a24.34,24.34,0,0,0-18.61-4.77C230.5,117.33,240,98.48,240,80c0-26.47-21.29-48-47.46-48A47.58,47.58,0,0,0,156,48.75,47.58,47.58,0,0,0,119.46,32C93.29,32,72,53.53,72,80c0,11,3.24,21.69,10.06,33a31.87,31.87,0,0,0-14.75,8.4L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56ZM119.46,48A31.15,31.15,0,0,1,148.6,67a8,8,0,0,0,14.8,0,31.15,31.15,0,0,1,29.14-19C209.59,48,224,62.65,224,80c0,19.51-15.79,41.58-45.66,63.9l-11.09,2.55A28,28,0,0,0,140,112H100.68C92.05,100.36,88,90.12,88,80,88,62.65,102.41,48,119.46,48ZM16,160H40v40H16Zm203.43,8.21-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9Z"></path></svg></span>
          <h3 class="t-h3 mt-5">Volunteer</h3>
          <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Help with events and packing in Sheffield, or share professional skills remotely.</p>
          <span class="t-label mt-5 inline-flex items-center gap-1.5 text-water">Find out more<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
        </a>
      </li>
      <li class="lg:col-span-2">
        <a href="get-involved.html#partner" class="card card-hover group flex h-full flex-col p-6 sm:p-7">
          <span class="grid size-12 place-items-center rounded-md bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M240,208H224V96a16,16,0,0,0-16-16H144V32a16,16,0,0,0-24.88-13.32L39.12,72A16,16,0,0,0,32,85.34V208H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM208,96V208H144V96ZM48,85.34,128,32V208H48ZM112,112v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm-32,0v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm0,56v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Zm32,0v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Z"></path></svg></span>
          <h3 class="t-h3 mt-5">Partner with us</h3>
          <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Mosques, schools, businesses and community groups can support a cause together.</p>
          <span class="t-label mt-5 inline-flex items-center gap-1.5 text-water">Find out more<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
        </a>
      </li>
      <li class="sm:col-span-2 lg:col-span-2">
        <a href="get-involved.html#share" class="card card-hover group flex h-full flex-col p-6 sm:p-7">
          <span class="grid size-12 place-items-center rounded-md bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M176,160a39.89,39.89,0,0,0-28.62,12.09l-46.1-29.63a39.8,39.8,0,0,0,0-28.92l46.1-29.63a40,40,0,1,0-8.66-13.45l-46.1,29.63a40,40,0,1,0,0,55.82l46.1,29.63A40,40,0,1,0,176,160Zm0-128a24,24,0,1,1-24,24A24,24,0,0,1,176,32ZM64,152a24,24,0,1,1,24-24A24,24,0,0,1,64,152Zm112,72a24,24,0,1,1,24-24A24,24,0,0,1,176,224Z"></path></svg></span>
          <h3 class="t-h3 mt-5">Share the appeal</h3>
          <p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Send the current appeal to someone who would want to know about it.</p>
          <span class="t-label mt-5 inline-flex items-center gap-1.5 text-water">Find out more<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
        </a>
      </li>
    </ul>
  </div>
</section>

Get involved · Design 02

Alternating Photo Rows

Fundraising, volunteering and partnering as three large photo rows that swap sides, each with its own checklist and action.

More ways to get involved

Time, skills and the people you know can do as much as a donation, in Sheffield, remotely and in your own community.

Men cooking a large pot of food over an open fire outdoors

Fundraise for us

Turn something you already enjoy into support for a cause.

Pick an activity: a run, a bake sale, a climb, an iftar, a birthday without presents
Tell us what you are planning so we can suggest a cause
Ask friends, family and colleagues to sponsor you

Tell us your plan

The Sheffield city skyline under a cloudy sky

Volunteer

Time and skills are as valuable as money, in Sheffield and remotely.

Events and collections in Sheffield
Packing and logistics
Professional skills (design, accounts, translation, IT)

A large group of children and adults gathered for an outdoor class, some seated with books

Partner with us

A mosque, school, business or community group can back a cause together.

Sponsor a cause for a year, such as clean water
Run a workplace or school fundraiser with a matched contribution
Host an information evening for your community

Start a conversation

<section aria-labelledby="involved-02-title" class="bg-white py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="grid gap-4 lg:grid-cols-12 lg:items-end">
      <h2 id="involved-02-title" class="t-h2 max-w-[18ch] lg:col-span-6">More ways to get involved</h2>
      <p class="t-lead max-w-[48ch] text-slate lg:col-span-5 lg:col-start-8">Time, skills and the people you know can do as much as a donation, in Sheffield, remotely and in your own community.</p>
    </div>
    <div class="mt-12 grid gap-14 lg:mt-16 lg:gap-20">
      <article class="grid items-center gap-8 lg:grid-cols-2 lg:gap-16">
        <div class="relative aspect-[4/3] overflow-hidden rounded-xl bg-mist"><img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="(min-width: 1024px) 40vw, 100vw" alt="Men cooking a large pot of food over an open fire outdoors" loading="lazy" decoding="async" class="h-full w-full object-cover"></div>
        <div>
          <span class="grid size-11 place-items-center rounded-md bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M248,120a48.05,48.05,0,0,0-48-48H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48.07,48.07,0,0,0,248,120ZM48,199.93V40h0c42.81,35.91,86.63,45,104,47.24v65.48C134.65,155,90.84,164.07,48,199.93Zm131,8,0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z"></path></svg></span>
          <h3 class="t-h3 mt-5 lg:text-[2rem]">Fundraise for us</h3>
          <p class="mt-3 max-w-[52ch] text-slate">Turn something you already enjoy into support for a cause.</p>
          <ul class="mt-5 grid gap-2.5">
            <li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Pick an activity: a run, a bake sale, a climb, an iftar, a birthday without presents</li>
            <li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Tell us what you are planning so we can suggest a cause</li>
            <li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Ask friends, family and colleagues to sponsor you</li>
          </ul>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-ink text-ink hover:bg-smoke mt-7 h-12 px-6 text-base" href="mailto:info@zafarfoundation.org.uk?subject=Fundraising%20for%20Zafar%20Foundation">Tell us your plan</a>
        </div>
      </article>
      <article class="grid items-center gap-8 lg:grid-cols-2 lg:gap-16">
        <div class="relative aspect-[4/3] overflow-hidden rounded-xl bg-mist lg:order-2"><img src="images/sheffield-skyline.jpg" srcset="images/webp/sheffield-skyline-640.webp 640w, images/webp/sheffield-skyline-1080.webp 1080w" sizes="(min-width: 1024px) 40vw, 100vw" alt="The Sheffield city skyline under a cloudy sky" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></div>
        <div>
          <span class="grid size-11 place-items-center rounded-md bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M230.33,141.06a24.34,24.34,0,0,0-18.61-4.77C230.5,117.33,240,98.48,240,80c0-26.47-21.29-48-47.46-48A47.58,47.58,0,0,0,156,48.75,47.58,47.58,0,0,0,119.46,32C93.29,32,72,53.53,72,80c0,11,3.24,21.69,10.06,33a31.87,31.87,0,0,0-14.75,8.4L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56ZM119.46,48A31.15,31.15,0,0,1,148.6,67a8,8,0,0,0,14.8,0,31.15,31.15,0,0,1,29.14-19C209.59,48,224,62.65,224,80c0,19.51-15.79,41.58-45.66,63.9l-11.09,2.55A28,28,0,0,0,140,112H100.68C92.05,100.36,88,90.12,88,80,88,62.65,102.41,48,119.46,48ZM16,160H40v40H16Zm203.43,8.21-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9Z"></path></svg></span>
          <h3 class="t-h3 mt-5 lg:text-[2rem]">Volunteer</h3>
          <p class="mt-3 max-w-[52ch] text-slate">Time and skills are as valuable as money, in Sheffield and remotely.</p>
          <ul class="mt-5 grid gap-2.5">
            <li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Events and collections in Sheffield</li>
            <li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Packing and logistics</li>
            <li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Professional skills (design, accounts, translation, IT)</li>
          </ul>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-ink text-white hover:bg-water-deep mt-7 h-12 px-6 text-base" href="get-involved.html#volunteer">Register your interest</a>
        </div>
      </article>
      <article class="grid items-center gap-8 lg:grid-cols-2 lg:gap-16">
        <div class="relative aspect-[4/3] overflow-hidden rounded-xl bg-mist"><img src="images/outdoor-class.jpg" srcset="images/webp/outdoor-class-640.webp 640w, images/webp/outdoor-class-1080.webp 1080w" sizes="(min-width: 1024px) 40vw, 100vw" alt="A large group of children and adults gathered for an outdoor class, some seated with books" loading="lazy" decoding="async" class="h-full w-full object-cover"></div>
        <div>
          <span class="grid size-11 place-items-center rounded-md bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M240,208H224V96a16,16,0,0,0-16-16H144V32a16,16,0,0,0-24.88-13.32L39.12,72A16,16,0,0,0,32,85.34V208H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM208,96V208H144V96ZM48,85.34,128,32V208H48ZM112,112v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm-32,0v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm0,56v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Zm32,0v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Z"></path></svg></span>
          <h3 class="t-h3 mt-5 lg:text-[2rem]">Partner with us</h3>
          <p class="mt-3 max-w-[52ch] text-slate">A mosque, school, business or community group can back a cause together.</p>
          <ul class="mt-5 grid gap-2.5">
            <li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Sponsor a cause for a year, such as clean water</li>
            <li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Run a workplace or school fundraiser with a matched contribution</li>
            <li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Host an information evening for your community</li>
          </ul>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-ink text-ink hover:bg-smoke mt-7 h-12 px-6 text-base" href="mailto:info@zafarfoundation.org.uk?subject=Partnering%20with%20Zafar%20Foundation">Start a conversation</a>
        </div>
      </article>
    </div>
  </div>
</section>

Get involved · Design 03

Icon List Panel

A heading and photo on the left, and all five ways to help as one divided list with arrows on the right.

Get involved

There is more than one way to help

Give, fundraise, volunteer, partner or simply share. Each of them helps families in Pakistan and the UK.

Children walking through a narrow alley between brick walls — Jalalpur Pirwala, Punjab, Pakistan

<section aria-labelledby="involved-03-title" class="bg-water-tint py-16 sm:py-20 lg:py-24">
  <div class="mx-auto grid w-full max-w-content gap-10 px-5 sm:px-8 lg:grid-cols-12 lg:gap-16">
    <div class="lg:col-span-5">
      <p class="t-label text-water">Get involved</p>
      <h2 id="involved-03-title" class="t-h2 mt-3 max-w-[16ch]">There is more than one way to help</h2>
      <p class="t-lead mt-4 max-w-[46ch] text-slate">Give, fundraise, volunteer, partner or simply share. Each of them helps families in Pakistan and the UK.</p>
      <figure class="mt-8">
        <div class="relative aspect-[4/3] overflow-hidden rounded-xl bg-mist"><img src="images/alley-jalalpur-pirwala.jpg" srcset="images/webp/alley-jalalpur-pirwala-640.webp 640w, images/webp/alley-jalalpur-pirwala-1080.webp 1080w" sizes="(min-width: 1024px) 34vw, 100vw" alt="Children walking through a narrow alley between brick walls" loading="lazy" decoding="async" class="h-full w-full object-cover"></div>
        <figcaption class="t-caption mt-2.5 text-slate">Jalalpur Pirwala, Punjab, Pakistan</figcaption>
      </figure>
    </div>
    <div class="lg:col-span-7 lg:self-center">
      <ul class="divide-y divide-line overflow-hidden rounded-xl border border-line bg-white shadow-[var(--shadow-card)]">
        <li>
          <a href="donate.html?frequency=monthly" class="group flex items-center gap-4 p-5 transition-colors hover:bg-smoke sm:gap-5 sm:p-6">
            <span class="grid size-12 shrink-0 place-items-center rounded-full bg-marigold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-38.34-85.66a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L116,164.69l42.34-42.35A8,8,0,0,1,169.66,122.34Z"></path></svg></span>
            <span class="min-w-0 flex-1"><span class="block font-display text-[18px] font-semibold text-ink">Give monthly</span><span class="mt-1 block text-[15px] leading-snug text-slate">Regular gifts let us plan ahead. Cancel or change the amount at any time.</span></span>
            <span class="hidden size-10 shrink-0 place-items-center rounded-full border border-line text-ink sm:grid transition-colors group-hover:border-water group-hover:bg-water group-hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
          </a>
        </li>
        <li>
          <a href="get-involved.html#fundraise" class="group flex items-center gap-4 p-5 transition-colors hover:bg-smoke sm:gap-5 sm:p-6">
            <span class="grid size-12 shrink-0 place-items-center rounded-full bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M248,120a48.05,48.05,0,0,0-48-48H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48.07,48.07,0,0,0,248,120ZM48,199.93V40h0c42.81,35.91,86.63,45,104,47.24v65.48C134.65,155,90.84,164.07,48,199.93Zm131,8,0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z"></path></svg></span>
            <span class="min-w-0 flex-1"><span class="block font-display text-[18px] font-semibold text-ink">Fundraise for us</span><span class="mt-1 block text-[15px] leading-snug text-slate">Run, bake, climb or host an iftar and ask friends to sponsor you.</span></span>
            <span class="hidden size-10 shrink-0 place-items-center rounded-full border border-line text-ink sm:grid transition-colors group-hover:border-water group-hover:bg-water group-hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
          </a>
        </li>
        <li>
          <a href="get-involved.html#volunteer" class="group flex items-center gap-4 p-5 transition-colors hover:bg-smoke sm:gap-5 sm:p-6">
            <span class="grid size-12 shrink-0 place-items-center rounded-full bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M230.33,141.06a24.34,24.34,0,0,0-18.61-4.77C230.5,117.33,240,98.48,240,80c0-26.47-21.29-48-47.46-48A47.58,47.58,0,0,0,156,48.75,47.58,47.58,0,0,0,119.46,32C93.29,32,72,53.53,72,80c0,11,3.24,21.69,10.06,33a31.87,31.87,0,0,0-14.75,8.4L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56ZM119.46,48A31.15,31.15,0,0,1,148.6,67a8,8,0,0,0,14.8,0,31.15,31.15,0,0,1,29.14-19C209.59,48,224,62.65,224,80c0,19.51-15.79,41.58-45.66,63.9l-11.09,2.55A28,28,0,0,0,140,112H100.68C92.05,100.36,88,90.12,88,80,88,62.65,102.41,48,119.46,48ZM16,160H40v40H16Zm203.43,8.21-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9Z"></path></svg></span>
            <span class="min-w-0 flex-1"><span class="block font-display text-[18px] font-semibold text-ink">Volunteer</span><span class="mt-1 block text-[15px] leading-snug text-slate">Help with events and packing in Sheffield, or share professional skills remotely.</span></span>
            <span class="hidden size-10 shrink-0 place-items-center rounded-full border border-line text-ink sm:grid transition-colors group-hover:border-water group-hover:bg-water group-hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
          </a>
        </li>
        <li>
          <a href="get-involved.html#partner" class="group flex items-center gap-4 p-5 transition-colors hover:bg-smoke sm:gap-5 sm:p-6">
            <span class="grid size-12 shrink-0 place-items-center rounded-full bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M240,208H224V96a16,16,0,0,0-16-16H144V32a16,16,0,0,0-24.88-13.32L39.12,72A16,16,0,0,0,32,85.34V208H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM208,96V208H144V96ZM48,85.34,128,32V208H48ZM112,112v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm-32,0v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm0,56v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Zm32,0v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Z"></path></svg></span>
            <span class="min-w-0 flex-1"><span class="block font-display text-[18px] font-semibold text-ink">Partner with us</span><span class="mt-1 block text-[15px] leading-snug text-slate">Mosques, schools, businesses and community groups can support a cause together.</span></span>
            <span class="hidden size-10 shrink-0 place-items-center rounded-full border border-line text-ink sm:grid transition-colors group-hover:border-water group-hover:bg-water group-hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
          </a>
        </li>
        <li>
          <a href="get-involved.html#share" class="group flex items-center gap-4 p-5 transition-colors hover:bg-smoke sm:gap-5 sm:p-6">
            <span class="grid size-12 shrink-0 place-items-center rounded-full bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M176,160a39.89,39.89,0,0,0-28.62,12.09l-46.1-29.63a39.8,39.8,0,0,0,0-28.92l46.1-29.63a40,40,0,1,0-8.66-13.45l-46.1,29.63a40,40,0,1,0,0,55.82l46.1,29.63A40,40,0,1,0,176,160Zm0-128a24,24,0,1,1-24,24A24,24,0,0,1,176,32ZM64,152a24,24,0,1,1,24-24A24,24,0,0,1,64,152Zm112,72a24,24,0,1,1,24-24A24,24,0,0,1,176,224Z"></path></svg></span>
            <span class="min-w-0 flex-1"><span class="block font-display text-[18px] font-semibold text-ink">Share the appeal</span><span class="mt-1 block text-[15px] leading-snug text-slate">The simplest help of all: tell someone who would want to know.</span></span>
            <span class="hidden size-10 shrink-0 place-items-center rounded-full border border-line text-ink sm:grid transition-colors group-hover:border-water group-hover:bg-water group-hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</section>

Get involved · Design 04

Ink Numbered Panel

A dark section with a large statement and buttons on the left and the five ways to help as a numbered, ruled list.

Get involved

Giving is one way to help. Here are the others.

Each of them supports practical help for families in Pakistan and the UK.

Set up a monthly gift Email us

01
Give monthly
Regular gifts let us plan ahead and respond quickly when a family needs help.
Give monthly
02
Fundraise for us
Turn something you already enjoy into support for a cause.
Fundraise
03
Volunteer
Time and skills are as valuable as money, in Sheffield and remotely.
Volunteer
04
Partner with us
A mosque, school, business or community group can back a cause together.
Partner
05
Share the appeal
The simplest help of all: tell someone who would want to know.
Share

<section aria-labelledby="involved-04-title" class="bg-ink py-16 text-white sm:py-20 lg:py-24">
  <div class="mx-auto grid w-full max-w-content gap-12 px-5 sm:px-8 lg:grid-cols-12 lg:gap-16">
    <div class="lg:col-span-5">
      <p class="t-label text-marigold">Get involved</p>
      <h2 id="involved-04-title" class="t-h2 mt-3 max-w-[14ch] lg:text-[3rem]">Giving is one way to help. Here are the others.</h2>
      <p class="t-lead mt-5 max-w-[42ch] text-white/80">Each of them supports practical help for families in Pakistan and the UK.</p>
      <div class="mt-8 flex flex-wrap gap-3">
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base" href="donate.html?frequency=monthly">Set up a monthly gift</a>
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-white/70 text-white hover:border-white hover:bg-white/10 h-12 px-6 text-base" href="mailto:info@zafarfoundation.org.uk">Email us</a>
      </div>
    </div>
    <ol class="border-t border-white/15 lg:col-span-7">
      <li class="grid gap-x-6 gap-y-2 border-b border-white/15 py-6 sm:grid-cols-[3.5rem_1fr_auto] sm:items-baseline">
        <span class="font-display text-[15px] font-semibold tabular-nums text-marigold">01</span>
        <div><h3 class="t-h3">Give monthly</h3><p class="mt-1.5 max-w-[50ch] text-[15px] leading-relaxed text-white/75">Regular gifts let us plan ahead and respond quickly when a family needs help.</p></div>
        <a class="link-on-dark t-label" href="donate.html?frequency=monthly">Give monthly</a>
      </li>
      <li class="grid gap-x-6 gap-y-2 border-b border-white/15 py-6 sm:grid-cols-[3.5rem_1fr_auto] sm:items-baseline">
        <span class="font-display text-[15px] font-semibold tabular-nums text-marigold">02</span>
        <div><h3 class="t-h3">Fundraise for us</h3><p class="mt-1.5 max-w-[50ch] text-[15px] leading-relaxed text-white/75">Turn something you already enjoy into support for a cause.</p></div>
        <a class="link-on-dark t-label" href="get-involved.html#fundraise">Fundraise</a>
      </li>
      <li class="grid gap-x-6 gap-y-2 border-b border-white/15 py-6 sm:grid-cols-[3.5rem_1fr_auto] sm:items-baseline">
        <span class="font-display text-[15px] font-semibold tabular-nums text-marigold">03</span>
        <div><h3 class="t-h3">Volunteer</h3><p class="mt-1.5 max-w-[50ch] text-[15px] leading-relaxed text-white/75">Time and skills are as valuable as money, in Sheffield and remotely.</p></div>
        <a class="link-on-dark t-label" href="get-involved.html#volunteer">Volunteer</a>
      </li>
      <li class="grid gap-x-6 gap-y-2 border-b border-white/15 py-6 sm:grid-cols-[3.5rem_1fr_auto] sm:items-baseline">
        <span class="font-display text-[15px] font-semibold tabular-nums text-marigold">04</span>
        <div><h3 class="t-h3">Partner with us</h3><p class="mt-1.5 max-w-[50ch] text-[15px] leading-relaxed text-white/75">A mosque, school, business or community group can back a cause together.</p></div>
        <a class="link-on-dark t-label" href="get-involved.html#partner">Partner</a>
      </li>
      <li class="grid gap-x-6 gap-y-2 border-b border-white/15 py-6 sm:grid-cols-[3.5rem_1fr_auto] sm:items-baseline">
        <span class="font-display text-[15px] font-semibold tabular-nums text-marigold">05</span>
        <div><h3 class="t-h3">Share the appeal</h3><p class="mt-1.5 max-w-[50ch] text-[15px] leading-relaxed text-white/75">The simplest help of all: tell someone who would want to know.</p></div>
        <a class="link-on-dark t-label" href="get-involved.html#share">Share</a>
      </li>
    </ol>
  </div>
</section>

Get involved · Design 05

Tabbed Ways

CSS-only tabs (radio buttons) switch between five panels, each with a photo, a checklist and one action.

Find your way to help

Choose an option to see what it involves and how to start.

<section aria-labelledby="involved-05-title" class="bg-smoke py-16 sm:py-20 lg:py-24">
  <div class="group/tabs mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="flex flex-wrap items-end justify-between gap-x-10 gap-y-3">
      <h2 id="involved-05-title" class="t-h2">Find your way to help</h2>
      <p class="max-w-[44ch] text-slate">Choose an option to see what it involves and how to start.</p>
    </div>
    <fieldset class="mt-8 min-w-0">
      <legend class="sr-only">Ways to help</legend>
      <div class="relative -mx-5 flex gap-2 overflow-x-auto px-5 pb-2 [scrollbar-width:none] sm:mx-0 sm:flex-wrap sm:px-0">
        <div class="shrink-0"><input id="involved-05-t1" type="radio" name="involved-05-tab" class="peer sr-only" checked><label for="involved-05-t1" class="inline-flex h-11 cursor-pointer items-center gap-2 rounded-full border border-line-strong bg-white px-5 font-display text-[15px] font-semibold text-ink transition-colors hover:border-ink peer-checked:border-ink peer-checked:bg-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-38.34-85.66a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L116,164.69l42.34-42.35A8,8,0,0,1,169.66,122.34Z"></path></svg>Give monthly</label></div>
        <div class="shrink-0"><input id="involved-05-t2" type="radio" name="involved-05-tab" class="peer sr-only"><label for="involved-05-t2" class="inline-flex h-11 cursor-pointer items-center gap-2 rounded-full border border-line-strong bg-white px-5 font-display text-[15px] font-semibold text-ink transition-colors hover:border-ink peer-checked:border-ink peer-checked:bg-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M248,120a48.05,48.05,0,0,0-48-48H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48.07,48.07,0,0,0,248,120ZM48,199.93V40h0c42.81,35.91,86.63,45,104,47.24v65.48C134.65,155,90.84,164.07,48,199.93Zm131,8,0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z"></path></svg>Fundraise</label></div>
        <div class="shrink-0"><input id="involved-05-t3" type="radio" name="involved-05-tab" class="peer sr-only"><label for="involved-05-t3" class="inline-flex h-11 cursor-pointer items-center gap-2 rounded-full border border-line-strong bg-white px-5 font-display text-[15px] font-semibold text-ink transition-colors hover:border-ink peer-checked:border-ink peer-checked:bg-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M230.33,141.06a24.34,24.34,0,0,0-18.61-4.77C230.5,117.33,240,98.48,240,80c0-26.47-21.29-48-47.46-48A47.58,47.58,0,0,0,156,48.75,47.58,47.58,0,0,0,119.46,32C93.29,32,72,53.53,72,80c0,11,3.24,21.69,10.06,33a31.87,31.87,0,0,0-14.75,8.4L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56ZM119.46,48A31.15,31.15,0,0,1,148.6,67a8,8,0,0,0,14.8,0,31.15,31.15,0,0,1,29.14-19C209.59,48,224,62.65,224,80c0,19.51-15.79,41.58-45.66,63.9l-11.09,2.55A28,28,0,0,0,140,112H100.68C92.05,100.36,88,90.12,88,80,88,62.65,102.41,48,119.46,48ZM16,160H40v40H16Zm203.43,8.21-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9Z"></path></svg>Volunteer</label></div>
        <div class="shrink-0"><input id="involved-05-t4" type="radio" name="involved-05-tab" class="peer sr-only"><label for="involved-05-t4" class="inline-flex h-11 cursor-pointer items-center gap-2 rounded-full border border-line-strong bg-white px-5 font-display text-[15px] font-semibold text-ink transition-colors hover:border-ink peer-checked:border-ink peer-checked:bg-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M240,208H224V96a16,16,0,0,0-16-16H144V32a16,16,0,0,0-24.88-13.32L39.12,72A16,16,0,0,0,32,85.34V208H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM208,96V208H144V96ZM48,85.34,128,32V208H48ZM112,112v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm-32,0v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm0,56v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Zm32,0v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Z"></path></svg>Partner</label></div>
        <div class="shrink-0"><input id="involved-05-t5" type="radio" name="involved-05-tab" class="peer sr-only"><label for="involved-05-t5" class="inline-flex h-11 cursor-pointer items-center gap-2 rounded-full border border-line-strong bg-white px-5 font-display text-[15px] font-semibold text-ink transition-colors hover:border-ink peer-checked:border-ink peer-checked:bg-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-water"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M176,160a39.89,39.89,0,0,0-28.62,12.09l-46.1-29.63a39.8,39.8,0,0,0,0-28.92l46.1-29.63a40,40,0,1,0-8.66-13.45l-46.1,29.63a40,40,0,1,0,0,55.82l46.1,29.63A40,40,0,1,0,176,160Zm0-128a24,24,0,1,1-24,24A24,24,0,0,1,176,32ZM64,152a24,24,0,1,1,24-24A24,24,0,0,1,64,152Zm112,72a24,24,0,1,1,24-24A24,24,0,0,1,176,224Z"></path></svg>Share</label></div>
      </div>
    </fieldset>
    <div class="card mt-6 hidden overflow-hidden group-has-[#involved-05-t1:checked]/tabs:grid lg:grid-cols-2">
      <div class="p-6 sm:p-10">
        <h3 class="t-h3">Give monthly</h3>
        <p class="mt-3 text-slate">Regular gifts let us plan ahead and respond quickly when a family needs help.</p>
        <ul class="mt-5 grid gap-2.5"><li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Cancel or change the amount at any time</li><li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Gift Aid can be added for UK taxpayers</li><li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Choose a cause, the appeal, or a general gift</li></ul>
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep mt-8 h-12 px-6 text-base" href="donate.html?frequency=monthly">Set up a monthly gift</a>
      </div>
      <div class="relative min-h-[240px] bg-mist"><img src="images/village-pump-shikarpur.jpg" srcset="images/webp/village-pump-shikarpur-640.webp 640w, images/webp/village-pump-shikarpur-1080.webp 1080w" sizes="(min-width: 1024px) 40vw, 100vw" alt="Women and a child drawing water from a hand pump beside their home in a village" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover"></div>
    </div>
    <div class="card mt-6 hidden overflow-hidden group-has-[#involved-05-t2:checked]/tabs:grid lg:grid-cols-2">
      <div class="p-6 sm:p-10">
        <h3 class="t-h3">Fundraise for us</h3>
        <p class="mt-3 text-slate">Turn something you already enjoy into support for a cause.</p>
        <ul class="mt-5 grid gap-2.5"><li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Pick an activity: a run, a bake sale, a climb, an iftar</li><li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Tell us your plan so we can suggest a cause and share your page</li><li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Ask people to sponsor you, and send us the total when you finish</li></ul>
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-ink text-white hover:bg-water-deep mt-8 h-12 px-6 text-base" href="mailto:info@zafarfoundation.org.uk?subject=Fundraising%20for%20Zafar%20Foundation">Tell us your plan</a>
      </div>
      <div class="relative min-h-[240px] bg-mist"><img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="(min-width: 1024px) 40vw, 100vw" alt="Men cooking a large pot of food over an open fire outdoors" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover"></div>
    </div>
    <div class="card mt-6 hidden overflow-hidden group-has-[#involved-05-t3:checked]/tabs:grid lg:grid-cols-2">
      <div class="p-6 sm:p-10">
        <h3 class="t-h3">Volunteer</h3>
        <p class="mt-3 text-slate">Time and skills are as valuable as money, in Sheffield and remotely.</p>
        <ul class="mt-5 grid gap-2.5"><li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Events and collections in Sheffield</li><li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Packing and logistics</li><li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Professional skills (design, accounts, translation, IT)</li></ul>
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-ink text-white hover:bg-water-deep mt-8 h-12 px-6 text-base" href="get-involved.html#volunteer">Register your interest</a>
      </div>
      <div class="relative min-h-[240px] bg-mist"><img src="images/sheffield-skyline.jpg" srcset="images/webp/sheffield-skyline-640.webp 640w, images/webp/sheffield-skyline-1080.webp 1080w" sizes="(min-width: 1024px) 40vw, 100vw" alt="The Sheffield city skyline under a cloudy sky" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover" style="object-position: 50% 60%"></div>
    </div>
    <div class="card mt-6 hidden overflow-hidden group-has-[#involved-05-t4:checked]/tabs:grid lg:grid-cols-2">
      <div class="p-6 sm:p-10">
        <h3 class="t-h3">Partner with us</h3>
        <p class="mt-3 text-slate">A mosque, school, business or community group can back a cause together.</p>
        <ul class="mt-5 grid gap-2.5"><li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Sponsor a cause for a year, such as clean water</li><li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Run a workplace or school fundraiser with a matched contribution</li><li class="flex items-start gap-2.5 text-[15px] text-slate"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-water"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Host an information evening for your community</li></ul>
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-ink text-white hover:bg-water-deep mt-8 h-12 px-6 text-base" href="mailto:info@zafarfoundation.org.uk?subject=Partnering%20with%20Zafar%20Foundation">Start a conversation</a>
      </div>
      <div class="relative min-h-[240px] bg-mist"><img src="images/outdoor-class.jpg" srcset="images/webp/outdoor-class-640.webp 640w, images/webp/outdoor-class-1080.webp 1080w" sizes="(min-width: 1024px) 40vw, 100vw" alt="A large group of children and adults gathered for an outdoor class, some seated with books" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover"></div>
    </div>
    <div class="card mt-6 hidden overflow-hidden group-has-[#involved-05-t5:checked]/tabs:grid lg:grid-cols-2">
      <div class="p-6 sm:p-10">
        <h3 class="t-h3">Share the appeal</h3>
        <p class="mt-3 text-slate">The simplest help of all: tell someone who would want to know about the current appeal.</p>
        <div class="mt-6 flex flex-wrap gap-3">
          <a href="https://wa.me/?text=Zafar%20Foundation%20is%20a%20UK-registered%20charity%20giving%20practical%20help%20to%20families%20in%20Pakistan%20and%20the%20UK.%20https%3A%2F%2Fwww.zafarfoundation.org.uk" target="_blank" rel="noreferrer" class="inline-flex h-11 items-center gap-2 rounded-sm border border-line-strong bg-white px-4 font-display text-[15px] font-semibold text-ink transition-colors hover:border-water hover:bg-water-tint hover:text-water"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M187.58,144.84l-32-16a8,8,0,0,0-8,.5l-14.69,9.8a40.55,40.55,0,0,1-16-16l9.8-14.69a8,8,0,0,0,.5-8l-16-32A8,8,0,0,0,104,64a40,40,0,0,0-40,40,88.1,88.1,0,0,0,88,88,40,40,0,0,0,40-40A8,8,0,0,0,187.58,144.84ZM152,176a72.08,72.08,0,0,1-72-72A24,24,0,0,1,99.29,80.46l11.48,23L101,118a8,8,0,0,0-.73,7.51,56.47,56.47,0,0,0,30.15,30.15A8,8,0,0,0,138,155l14.61-9.74,23,11.48A24,24,0,0,1,152,176ZM128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-6.54-.67L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Z"></path></svg>WhatsApp<span class="sr-only"> (opens in a new tab)</span></a>
          <a href="mailto:?subject=Zafar%20Foundation&amp;body=Zafar%20Foundation%20is%20a%20UK-registered%20charity%20giving%20practical%20help%20to%20families%20in%20Pakistan%20and%20the%20UK.%20https%3A%2F%2Fwww.zafarfoundation.org.uk" class="inline-flex h-11 items-center gap-2 rounded-sm border border-line-strong bg-white px-4 font-display text-[15px] font-semibold text-ink transition-colors hover:border-water hover:bg-water-tint hover:text-water"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"></path></svg>Email</a>
        </div>
        <p class="t-caption mt-4 text-slate">Shares the homepage link: https://www.zafarfoundation.org.uk</p>
      </div>
      <div class="relative min-h-[240px] bg-mist"><img src="images/children-walking-road.jpg" srcset="images/webp/children-walking-road-640.webp 640w, images/webp/children-walking-road-1080.webp 1080w" sizes="(min-width: 1024px) 40vw, 100vw" alt="Three children walking together along an unpaved road in morning light" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover"></div>
    </div>
  </div>
</section>

Get involved · Design 06

Photo Tile Mosaic

Five full-photo link tiles with dark gradients, a large Give monthly tile beside four smaller ones.

Get involved

Giving is one way to support the work. There are others, and each of them helps families in Pakistan and the UK.

All the ways to help

<section aria-labelledby="involved-06-title" class="bg-white py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="flex flex-wrap items-end justify-between gap-x-10 gap-y-4">
      <div class="max-w-[56ch]">
        <h2 id="involved-06-title" class="t-h2">Get involved</h2>
        <p class="t-lead mt-4 text-slate">Giving is one way to support the work. There are others, and each of them helps families in Pakistan and the UK.</p>
      </div>
      <a class="link t-label" href="get-involved.html">All the ways to help</a>
    </div>
    <ul class="mt-10 grid gap-4 sm:grid-cols-2 lg:h-[600px] lg:grid-cols-4 lg:grid-rows-2">
      <li class="sm:col-span-2 lg:row-span-2">
        <a href="donate.html?frequency=monthly" class="group relative flex h-full min-h-[360px] flex-col justify-end overflow-hidden rounded-xl bg-ink p-6 text-white sm:p-8">
          <img src="images/village-pump-shikarpur.jpg" srcset="images/webp/village-pump-shikarpur-640.webp 640w, images/webp/village-pump-shikarpur-1080.webp 1080w" sizes="(min-width: 1024px) 50vw, 100vw" alt="Women and a child drawing water from a hand pump beside their home in a village" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
          <span aria-hidden="true" class="absolute inset-0 bg-linear-to-t from-ink/90 via-ink/40 to-ink/0"></span>
          <div class="relative">
            <span class="grid size-11 place-items-center rounded-md bg-marigold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-38.34-85.66a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L116,164.69l42.34-42.35A8,8,0,0,1,169.66,122.34Z"></path></svg></span>
            <h3 class="t-h3 mt-4 lg:text-[2rem]">Give monthly</h3>
            <span class="mt-2 block max-w-[42ch] text-white/85">Regular gifts let us plan ahead and respond quickly when a family needs help.</span>
            <span class="t-label mt-4 inline-flex items-center gap-1.5 text-marigold">Set up a monthly gift<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-hover:translate-x-1"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
          </div>
        </a>
      </li>
      <li>
        <a href="get-involved.html#fundraise" class="group relative flex h-full min-h-[240px] flex-col justify-end overflow-hidden rounded-xl bg-ink p-5 text-white">
          <img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" alt="Men cooking a large pot of food over an open fire outdoors" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
          <span aria-hidden="true" class="absolute inset-0 bg-linear-to-t from-ink/90 via-ink/30 to-ink/0"></span>
          <div class="relative"><h3 class="font-display text-[20px] font-semibold">Fundraise for us</h3><span class="mt-1 block text-[15px] leading-snug text-white/85">Run, bake, climb or host an iftar.</span></div>
        </a>
      </li>
      <li>
        <a href="get-involved.html#volunteer" class="group relative flex h-full min-h-[240px] flex-col justify-end overflow-hidden rounded-xl bg-ink p-5 text-white">
          <img src="images/sheffield-weston-park.jpg" srcset="images/webp/sheffield-weston-park-640.webp 640w, images/webp/sheffield-weston-park-1080.webp 1080w" sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" alt="A statue in Weston Park in front of a red-brick university building" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" style="object-position: 50% 35%">
          <span aria-hidden="true" class="absolute inset-0 bg-linear-to-t from-ink/90 via-ink/30 to-ink/0"></span>
          <div class="relative"><h3 class="font-display text-[20px] font-semibold">Volunteer</h3><span class="mt-1 block text-[15px] leading-snug text-white/85">In Sheffield, or remotely with your skills.</span></div>
        </a>
      </li>
      <li>
        <a href="get-involved.html#partner" class="group relative flex h-full min-h-[240px] flex-col justify-end overflow-hidden rounded-xl bg-ink p-5 text-white">
          <img src="images/outdoor-class.jpg" srcset="images/webp/outdoor-class-640.webp 640w, images/webp/outdoor-class-1080.webp 1080w" sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" alt="A large group of children and adults gathered for an outdoor class" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
          <span aria-hidden="true" class="absolute inset-0 bg-linear-to-t from-ink/90 via-ink/30 to-ink/0"></span>
          <div class="relative"><h3 class="font-display text-[20px] font-semibold">Partner with us</h3><span class="mt-1 block text-[15px] leading-snug text-white/85">Mosques, schools and businesses.</span></div>
        </a>
      </li>
      <li>
        <a href="get-involved.html#share" class="group relative flex h-full min-h-[240px] flex-col justify-end overflow-hidden rounded-xl bg-ink p-5 text-white">
          <img src="images/children-walking-to-school.jpg" srcset="images/webp/children-walking-to-school-640.webp 640w, images/webp/children-walking-to-school-1080.webp 1080w" sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" alt="Children with school bags walking along a tree-lined path in early morning light" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
          <span aria-hidden="true" class="absolute inset-0 bg-linear-to-t from-ink/90 via-ink/30 to-ink/0"></span>
          <div class="relative"><h3 class="font-display text-[20px] font-semibold">Share the appeal</h3><span class="mt-1 block text-[15px] leading-snug text-white/85">Tell someone who would want to know.</span></div>
        </a>
      </li>
    </ul>
  </div>
</section>

Get involved · Design 07

Monthly Giving Focus

A teal section that sells monthly giving, with large amount tiles that open the donate page pre-filled for a monthly gift.

Give monthly

A regular gift helps us plan ahead

Regular gifts let us plan ahead and respond quickly when a family needs help.

Cancel or change the amount at any time
Gift Aid adds 25p to every £1 for UK taxpayers
Choose a cause, the appeal, or a general gift

Choose a monthly amount

Set up a monthly gift Choose another amount

Prefer to give time? Fundraise, volunteer or partner with us.

<section aria-labelledby="involved-07-title" class="bg-water py-16 text-white sm:py-20 lg:py-24">
  <div class="mx-auto grid w-full max-w-content items-center gap-10 px-5 sm:px-8 lg:grid-cols-12 lg:gap-16">
    <div class="lg:col-span-6">
      <p class="t-label text-marigold">Give monthly</p>
      <h2 id="involved-07-title" class="t-h2 mt-3 max-w-[15ch] lg:text-[3rem]">A regular gift helps us plan ahead</h2>
      <p class="t-lead mt-5 max-w-[46ch] text-white/85">Regular gifts let us plan ahead and respond quickly when a family needs help.</p>
      <ul class="mt-8 grid gap-3">
        <li class="flex items-start gap-3 font-display text-[16px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Cancel or change the amount at any time</li>
        <li class="flex items-start gap-3 font-display text-[16px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Gift Aid adds 25p to every £1 for UK taxpayers</li>
        <li class="flex items-start gap-3 font-display text-[16px] text-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="mt-0.5 shrink-0 text-marigold"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>Choose a cause, the appeal, or a general gift</li>
      </ul>
    </div>
    <div class="rounded-2xl bg-white p-6 text-ink shadow-[var(--shadow-card)] sm:p-8 lg:col-span-6">
      <h3 class="t-h3">Choose a monthly amount</h3>
      <ul class="mt-5 grid grid-cols-2 gap-3" aria-label="Monthly amounts">
        <li><a href="donate.html?frequency=monthly&amp;amount=10" class="flex h-24 flex-col items-center justify-center rounded-lg border border-line-strong transition-colors hover:border-water hover:bg-water-tint"><span class="font-display text-[2rem] font-bold leading-none tabular-nums">£10</span><span class="t-caption mt-1.5 text-slate">per month</span></a></li>
        <li><a href="donate.html?frequency=monthly&amp;amount=25" class="flex h-24 flex-col items-center justify-center rounded-lg border border-line-strong transition-colors hover:border-water hover:bg-water-tint"><span class="font-display text-[2rem] font-bold leading-none tabular-nums">£25</span><span class="t-caption mt-1.5 text-slate">per month</span></a></li>
        <li><a href="donate.html?frequency=monthly&amp;amount=50" class="flex h-24 flex-col items-center justify-center rounded-lg border border-line-strong transition-colors hover:border-water hover:bg-water-tint"><span class="font-display text-[2rem] font-bold leading-none tabular-nums">£50</span><span class="t-caption mt-1.5 text-slate">per month</span></a></li>
        <li><a href="donate.html?frequency=monthly&amp;amount=100" class="flex h-24 flex-col items-center justify-center rounded-lg border border-line-strong transition-colors hover:border-water hover:bg-water-tint"><span class="font-display text-[2rem] font-bold leading-none tabular-nums">£100</span><span class="t-caption mt-1.5 text-slate">per month</span></a></li>
      </ul>
      <div class="mt-6 flex flex-wrap items-center gap-x-6 gap-y-3">
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base" href="donate.html?frequency=monthly">Set up a monthly gift</a>
        <a class="link t-label" href="donate.html?frequency=monthly">Choose another amount</a>
      </div>
      <p class="mt-6 border-t border-line pt-5 text-[15px] text-slate">Prefer to give time? <a class="link" href="get-involved.html#fundraise">Fundraise</a>, <a class="link" href="get-involved.html#volunteer">volunteer</a> or <a class="link" href="get-involved.html#partner">partner with us</a>.</p>
    </div>
  </div>
</section>

Get involved · Design 08

Grouped Checklist Card

One wide card with a marigold header and three checklists (give, give time, spread the word) above a contact footer.

Everything you can do to help

Pick one thing from any list. Every one of them supports families in Pakistan and the UK.

Give

Set up a monthly gift you can cancel at any time
Add Gift Aid if you pay UK tax: 25p on every £1
Give Zakat or Sadaqah, kept separate

Make a donation

Give time

Help at events and collections in Sheffield
Lend a hand with packing and logistics
Share design, accounts, translation or IT skills remotely

Spread the word

Share the appeal with someone who would want to know
Run, bake, climb or host an iftar for sponsorship
Bring in your mosque, school or business as a partner

Share the appeal

Not sure where to start? Email info@zafarfoundation.org.uk or call 07940 040010.

Get involved

<section aria-labelledby="involved-08-title" class="bg-white py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="overflow-hidden rounded-2xl border border-line shadow-[var(--shadow-card)]">
      <div class="grid gap-4 bg-marigold px-6 py-8 text-ink sm:px-10 sm:py-10 lg:grid-cols-12 lg:items-end">
        <h2 id="involved-08-title" class="t-h2 max-w-[16ch] lg:col-span-6">Everything you can do to help</h2>
        <p class="max-w-[48ch] text-[17px] leading-relaxed lg:col-span-6 lg:justify-self-end">Pick one thing from any list. Every one of them supports families in Pakistan and the UK.</p>
      </div>
      <div class="grid divide-y divide-line bg-white md:grid-cols-3 md:divide-x md:divide-y-0">
        <div class="flex flex-col p-6 sm:p-8">
          <h3 class="flex items-center gap-3 font-display text-[19px] font-semibold"><span class="grid size-10 place-items-center rounded-md bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M230.33,141.06a24.43,24.43,0,0,0-21.24-4.23l-41.84,9.62A28,28,0,0,0,140,112H89.94a31.82,31.82,0,0,0-22.63,9.37L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56ZM16,160H40v40H16Zm203.43,8.21-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9ZM164,96a36,36,0,0,0,5.9-.48,36,36,0,1,0,28.22-47A36,36,0,1,0,164,96Zm60-12a20,20,0,1,1-20-20A20,20,0,0,1,224,84ZM164,40a20,20,0,0,1,19.25,14.61,36,36,0,0,0-15,24.93A20.42,20.42,0,0,1,164,80a20,20,0,0,1,0-40Z"></path></svg></span>Give</h3>
          <ul class="mt-5 grid flex-1 content-start gap-3">
            <li class="flex items-start gap-3 text-[15px] leading-snug text-slate"><span class="mt-px grid size-5 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span>Set up a monthly gift you can cancel at any time</li>
            <li class="flex items-start gap-3 text-[15px] leading-snug text-slate"><span class="mt-px grid size-5 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span>Add Gift Aid if you pay UK tax: 25p on every £1</li>
            <li class="flex items-start gap-3 text-[15px] leading-snug text-slate"><span class="mt-px grid size-5 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span>Give Zakat or Sadaqah, kept separate</li>
          </ul>
          <a class="link t-label mt-6 self-start" href="donate.html">Make a donation</a>
        </div>
        <div class="flex flex-col p-6 sm:p-8">
          <h3 class="flex items-center gap-3 font-display text-[19px] font-semibold"><span class="grid size-10 place-items-center rounded-md bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M230.33,141.06a24.34,24.34,0,0,0-18.61-4.77C230.5,117.33,240,98.48,240,80c0-26.47-21.29-48-47.46-48A47.58,47.58,0,0,0,156,48.75,47.58,47.58,0,0,0,119.46,32C93.29,32,72,53.53,72,80c0,11,3.24,21.69,10.06,33a31.87,31.87,0,0,0-14.75,8.4L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56ZM119.46,48A31.15,31.15,0,0,1,148.6,67a8,8,0,0,0,14.8,0,31.15,31.15,0,0,1,29.14-19C209.59,48,224,62.65,224,80c0,19.51-15.79,41.58-45.66,63.9l-11.09,2.55A28,28,0,0,0,140,112H100.68C92.05,100.36,88,90.12,88,80,88,62.65,102.41,48,119.46,48ZM16,160H40v40H16Zm203.43,8.21-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9Z"></path></svg></span>Give time</h3>
          <ul class="mt-5 grid flex-1 content-start gap-3">
            <li class="flex items-start gap-3 text-[15px] leading-snug text-slate"><span class="mt-px grid size-5 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span>Help at events and collections in Sheffield</li>
            <li class="flex items-start gap-3 text-[15px] leading-snug text-slate"><span class="mt-px grid size-5 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span>Lend a hand with packing and logistics</li>
            <li class="flex items-start gap-3 text-[15px] leading-snug text-slate"><span class="mt-px grid size-5 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span>Share design, accounts, translation or IT skills remotely</li>
          </ul>
          <a class="link t-label mt-6 self-start" href="get-involved.html#volunteer">Register your interest</a>
        </div>
        <div class="flex flex-col p-6 sm:p-8">
          <h3 class="flex items-center gap-3 font-display text-[19px] font-semibold"><span class="grid size-10 place-items-center rounded-md bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M176,160a39.89,39.89,0,0,0-28.62,12.09l-46.1-29.63a39.8,39.8,0,0,0,0-28.92l46.1-29.63a40,40,0,1,0-8.66-13.45l-46.1,29.63a40,40,0,1,0,0,55.82l46.1,29.63A40,40,0,1,0,176,160Zm0-128a24,24,0,1,1-24,24A24,24,0,0,1,176,32ZM64,152a24,24,0,1,1,24-24A24,24,0,0,1,64,152Zm112,72a24,24,0,1,1,24-24A24,24,0,0,1,176,224Z"></path></svg></span>Spread the word</h3>
          <ul class="mt-5 grid flex-1 content-start gap-3">
            <li class="flex items-start gap-3 text-[15px] leading-snug text-slate"><span class="mt-px grid size-5 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span>Share the appeal with someone who would want to know</li>
            <li class="flex items-start gap-3 text-[15px] leading-snug text-slate"><span class="mt-px grid size-5 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span>Run, bake, climb or host an iftar for sponsorship</li>
            <li class="flex items-start gap-3 text-[15px] leading-snug text-slate"><span class="mt-px grid size-5 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span>Bring in your mosque, school or business as a partner</li>
          </ul>
          <a class="link t-label mt-6 self-start" href="get-involved.html#share">Share the appeal</a>
        </div>
      </div>
      <div class="flex flex-col gap-4 border-t border-line bg-smoke px-6 py-5 sm:flex-row sm:items-center sm:justify-between sm:px-10">
        <p class="text-[15px] text-slate">Not sure where to start? Email <a class="link" href="mailto:info@zafarfoundation.org.uk">info@zafarfoundation.org.uk</a> or call <a class="link" href="tel:+447940040010">07940 040010</a>.</p>
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-ink text-white hover:bg-water-deep h-10 shrink-0 self-start px-4 text-[15px] sm:self-auto" href="get-involved.html">Get involved</a>
      </div>
    </div>
  </div>
</section>

Get involved · Design 09

Scrolling Card Row

Five photo cards in a horizontal snap-scroll row that runs past the edge of the screen on smaller devices.

Pick a way to help

Five ways to support families in Pakistan and the UK, from a monthly gift to a message to a friend.

Scroll for more

Give
Give monthly
Regular gifts let us plan ahead and respond quickly when a family needs help.
Set up a monthly gift
Raise
Fundraise for us
Run, bake, climb or host an iftar and ask friends to sponsor you.
Plan a fundraiser
Time
Volunteer
Help with events and packing in Sheffield, or share professional skills remotely.
Register your interest
Together
Partner with us
Mosques, schools, businesses and community groups can support a cause together.
Start a conversation
Voice
Share the appeal
Send the current appeal to someone who would want to know about it.
Share the appeal

<section aria-labelledby="involved-09-title" class="bg-smoke py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="flex flex-wrap items-end justify-between gap-x-10 gap-y-3">
      <div class="max-w-[52ch]">
        <h2 id="involved-09-title" class="t-h2">Pick a way to help</h2>
        <p class="t-lead mt-3 text-slate">Five ways to support families in Pakistan and the UK, from a monthly gift to a message to a friend.</p>
      </div>
      <p class="t-caption inline-flex items-center gap-1.5 font-semibold text-slate">Scroll for more<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></p>
    </div>
    <ul class="-mx-5 mt-10 flex snap-x snap-mandatory scroll-px-5 gap-4 overflow-x-auto px-5 pb-4 sm:-mx-8 sm:scroll-px-8 sm:gap-5 sm:px-8">
      <li class="w-[80%] max-w-[320px] shrink-0 snap-start sm:w-[320px]">
        <article class="card flex h-full flex-col overflow-hidden">
          <div class="relative aspect-[4/3] overflow-hidden bg-mist"><img src="images/water-hand-pump-boy.jpg" srcset="images/webp/water-hand-pump-boy-640.webp 640w, images/webp/water-hand-pump-boy-1080.webp 1080w" sizes="320px" alt="A boy pumping water from a green hand pump into a bucket" loading="lazy" decoding="async" class="h-full w-full object-cover"></div>
          <div class="flex flex-1 flex-col p-6"><p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Give</p><h3 class="t-h3 mt-1.5">Give monthly</h3><p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Regular gifts let us plan ahead and respond quickly when a family needs help.</p><a class="link t-label mt-5 self-start" href="donate.html?frequency=monthly">Set up a monthly gift</a></div>
        </article>
      </li>
      <li class="w-[80%] max-w-[320px] shrink-0 snap-start sm:w-[320px]">
        <article class="card flex h-full flex-col overflow-hidden">
          <div class="relative aspect-[4/3] overflow-hidden bg-mist"><img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="320px" alt="Men cooking a large pot of food over an open fire outdoors" loading="lazy" decoding="async" class="h-full w-full object-cover"></div>
          <div class="flex flex-1 flex-col p-6"><p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Raise</p><h3 class="t-h3 mt-1.5">Fundraise for us</h3><p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Run, bake, climb or host an iftar and ask friends to sponsor you.</p><a class="link t-label mt-5 self-start" href="get-involved.html#fundraise">Plan a fundraiser</a></div>
        </article>
      </li>
      <li class="w-[80%] max-w-[320px] shrink-0 snap-start sm:w-[320px]">
        <article class="card flex h-full flex-col overflow-hidden">
          <div class="relative aspect-[4/3] overflow-hidden bg-mist"><img src="images/sheffield-skyline.jpg" srcset="images/webp/sheffield-skyline-640.webp 640w, images/webp/sheffield-skyline-1080.webp 1080w" sizes="320px" alt="The Sheffield city skyline under a cloudy sky" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></div>
          <div class="flex flex-1 flex-col p-6"><p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Time</p><h3 class="t-h3 mt-1.5">Volunteer</h3><p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Help with events and packing in Sheffield, or share professional skills remotely.</p><a class="link t-label mt-5 self-start" href="get-involved.html#volunteer">Register your interest</a></div>
        </article>
      </li>
      <li class="w-[80%] max-w-[320px] shrink-0 snap-start sm:w-[320px]">
        <article class="card flex h-full flex-col overflow-hidden">
          <div class="relative aspect-[4/3] overflow-hidden bg-mist"><img src="images/education-classroom.jpg" srcset="images/webp/education-classroom-640.webp 640w, images/webp/education-classroom-1080.webp 1080w" sizes="320px" alt="Students at wooden desks listening to a teacher writing on the board" loading="lazy" decoding="async" class="h-full w-full object-cover"></div>
          <div class="flex flex-1 flex-col p-6"><p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Together</p><h3 class="t-h3 mt-1.5">Partner with us</h3><p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Mosques, schools, businesses and community groups can support a cause together.</p><a class="link t-label mt-5 self-start" href="get-involved.html#partner">Start a conversation</a></div>
        </article>
      </li>
      <li class="w-[80%] max-w-[320px] shrink-0 snap-start sm:w-[320px]">
        <article class="card flex h-full flex-col overflow-hidden">
          <div class="relative aspect-[4/3] overflow-hidden bg-mist"><img src="images/children-walking-road.jpg" srcset="images/webp/children-walking-road-640.webp 640w, images/webp/children-walking-road-1080.webp 1080w" sizes="320px" alt="Three children walking together along an unpaved road in morning light" loading="lazy" decoding="async" class="h-full w-full object-cover"></div>
          <div class="flex flex-1 flex-col p-6"><p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Voice</p><h3 class="t-h3 mt-1.5">Share the appeal</h3><p class="mt-2 flex-1 text-[15px] leading-relaxed text-slate">Send the current appeal to someone who would want to know about it.</p><a class="link t-label mt-5 self-start" href="get-involved.html#share">Share the appeal</a></div>
        </article>
      </li>
    </ul>
  </div>
</section>

Get involved · Design 10

Volunteer Form Split

Three volunteering roles on the left and a register-your-interest form on the right (a preview form marked data-demo-form).

Volunteer

Give your time and skills

Time and skills are as valuable as money, in Sheffield and remotely.

Events and collections
In person, in Sheffield.
Packing and logistics
Helping practical items get where they are needed.
Professional skills
Design, accounts, translation or IT, remotely.

<section aria-labelledby="involved-10-title" class="bg-white py-16 sm:py-20 lg:py-24">
  <div class="mx-auto grid w-full max-w-content gap-10 px-5 sm:px-8 lg:grid-cols-12 lg:gap-16">
    <div class="lg:col-span-5">
      <p class="t-label text-water">Volunteer</p>
      <h2 id="involved-10-title" class="t-h2 mt-3 max-w-[16ch]">Give your time and skills</h2>
      <p class="t-lead mt-4 max-w-[44ch] text-slate">Time and skills are as valuable as money, in Sheffield and remotely.</p>
      <ul class="mt-8 grid gap-3">
        <li class="flex items-start gap-4 rounded-lg border border-line p-4 sm:p-5">
          <span class="grid size-11 shrink-0 place-items-center rounded-md bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg></span>
          <div><h3 class="font-display text-[17px] font-semibold">Events and collections</h3><p class="mt-1 text-[15px] leading-snug text-slate">In person, in Sheffield.</p></div>
        </li>
        <li class="flex items-start gap-4 rounded-lg border border-line p-4 sm:p-5">
          <span class="grid size-11 shrink-0 place-items-center rounded-md bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.34,44-29.77,16.3-80.35-44ZM128,120,47.66,76l33.9-18.56,80.34,44ZM40,90l80,43.78v85.79L40,175.82Zm176,85.78h0l-80,43.79V133.82l32-17.51V152a8,8,0,0,0,16,0V107.55L216,90v85.77Z"></path></svg></span>
          <div><h3 class="font-display text-[17px] font-semibold">Packing and logistics</h3><p class="mt-1 text-[15px] leading-snug text-slate">Helping practical items get where they are needed.</p></div>
        </li>
        <li class="flex items-start gap-4 rounded-lg border border-line p-4 sm:p-5">
          <span class="grid size-11 shrink-0 place-items-center rounded-md bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,144a15.78,15.78,0,0,1-10.42,14.94L146,178l-19,51.62a15.92,15.92,0,0,1-29.88,0L78,178l-51.62-19a15.92,15.92,0,0,1,0-29.88L78,110l19-51.62a15.92,15.92,0,0,1,29.88,0L146,110l51.62,19A15.78,15.78,0,0,1,208,144ZM152,48h16V64a8,8,0,0,0,16,0V48h16a8,8,0,0,0,0-16H184V16a8,8,0,0,0-16,0V32H152a8,8,0,0,0,0,16Zm88,32h-8V72a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0V96h8a8,8,0,0,0,0-16Z"></path></svg></span>
          <div><h3 class="font-display text-[17px] font-semibold">Professional skills</h3><p class="mt-1 text-[15px] leading-snug text-slate">Design, accounts, translation or IT, remotely.</p></div>
        </li>
      </ul>
    </div>
    <form data-demo-form aria-labelledby="involved-10-form-title" class="rounded-2xl bg-smoke p-6 sm:p-10 lg:col-span-7">
      <h3 id="involved-10-form-title" class="t-h3">Register your interest</h3>
      <p class="mt-2 text-[15px] text-slate">Tell us a little about yourself and how you would like to help.</p>
      <div class="mt-6 grid gap-5 sm:grid-cols-2">
        <div class="grid gap-1.5"><label for="involved-10-name" class="t-label text-ink">Your name</label><input id="involved-10-name" name="name" type="text" autocomplete="name" class="w-full min-w-0 rounded-sm border border-line-strong bg-white px-4 font-display text-base text-ink placeholder:text-slate/70 focus:border-water focus:outline-none focus:ring-2 focus:ring-water/30 h-12"></div>
        <div class="grid gap-1.5"><label for="involved-10-email" class="t-label text-ink">Email address</label><input id="involved-10-email" name="email" type="email" autocomplete="email" class="w-full min-w-0 rounded-sm border border-line-strong bg-white px-4 font-display text-base text-ink placeholder:text-slate/70 focus:border-water focus:outline-none focus:ring-2 focus:ring-water/30 h-12"></div>
        <div class="grid gap-1.5 sm:col-span-2">
          <label for="involved-10-area" class="t-label text-ink">How would you like to help</label>
          <select id="involved-10-area" name="area" class="w-full min-w-0 rounded-sm border border-line-strong bg-white px-4 font-display text-base text-ink placeholder:text-slate/70 focus:border-water focus:outline-none focus:ring-2 focus:ring-water/30 h-12">
            <option value="">Choose one</option>
            <option>Events and collections in Sheffield</option>
            <option>Packing and logistics</option>
            <option>Professional skills (design, accounts, translation, IT)</option>
            <option>Something else</option>
          </select>
        </div>
        <div class="grid gap-1.5 sm:col-span-2"><label for="involved-10-message" class="t-label text-ink">Anything else we should know <span class="font-normal text-slate">(optional)</span></label><textarea id="involved-10-message" name="message" rows="4" class="w-full min-w-0 rounded-sm border border-line-strong bg-white px-4 font-display text-base text-ink placeholder:text-slate/70 focus:border-water focus:outline-none focus:ring-2 focus:ring-water/30 py-3"></textarea></div>
      </div>
      <div class="mt-6 flex flex-wrap items-center gap-x-5 gap-y-3">
        <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-ink text-white hover:bg-water-deep h-12 px-6 text-base">Register your interest</button>
        <p class="t-caption text-slate">Or email <a class="link" href="mailto:info@zafarfoundation.org.uk?subject=Volunteering">info@zafarfoundation.org.uk</a></p>
      </div>
    </form>
  </div>
</section>