Footers · Design 01
Classic four columns
The standard ink footer: logo, mission and registered office, then Explore, Give and Legal link columns and an email sign-up, with the full charity registration line below.
<footer class="bg-ink text-white">
<div class="mx-auto w-full max-w-content px-5 sm:px-8 grid gap-12 py-16 lg:grid-cols-12 lg:gap-8 lg:py-20">
<div class="lg:col-span-4">
<a class="inline-flex items-center gap-2.5 rounded-sm" aria-label="Zafar Foundation home" href="index.html"><img src="images/logo-white.svg" alt="Zafar Foundation" width="521" height="80" class="h-9 sm:h-10 w-auto"></a>
<p class="mt-5 max-w-[36ch] text-[15px] leading-relaxed text-on-dark-muted">A UK-registered charity supporting people and communities facing poverty and hardship in Pakistan and the UK.</p>
<address class="mt-6 not-italic">
<p class="font-display text-[15px] leading-relaxed text-on-dark-muted">94 Glen Road<br>Sheffield<br>S7 1RB<br>United Kingdom</p>
<p class="mt-4 grid gap-1 font-display text-[15px]"><a class="link-on-dark w-fit" href="mailto:info@zafarfoundation.org.uk">info@zafarfoundation.org.uk</a><a class="link-on-dark w-fit" href="tel:+447940040010">07940 040010</a></p>
</address>
</div>
<nav aria-label="Footer 1 links" class="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:col-span-5">
<div>
<h3 class="t-label text-white">Explore</h3>
<ul class="mt-3 grid gap-1.5">
<li><a class="inline-block py-1 font-display text-[15px] text-on-dark-muted transition-colors hover:text-white" href="about.html">About the foundation</a></li>
<li><a class="inline-block py-1 font-display text-[15px] text-on-dark-muted transition-colors hover:text-white" href="causes.html">Our causes</a></li>
<li><a class="inline-block py-1 font-display text-[15px] text-on-dark-muted transition-colors hover:text-white" href="impact.html">Impact</a></li>
<li><a class="inline-block py-1 font-display text-[15px] text-on-dark-muted transition-colors hover:text-white" href="get-involved.html">Get involved</a></li>
<li><a class="inline-block py-1 font-display text-[15px] text-on-dark-muted transition-colors hover:text-white" href="contact.html">Contact</a></li>
</ul>
</div>
<div>
<h3 class="t-label text-white">Give</h3>
<ul class="mt-3 grid gap-1.5">
<li><a class="inline-block py-1 font-display text-[15px] text-on-dark-muted transition-colors hover:text-white" href="donate.html">Donate now</a></li>
<li><a class="inline-block py-1 font-display text-[15px] text-on-dark-muted transition-colors hover:text-white" href="donate.html?frequency=monthly">Give monthly</a></li>
<li><a class="inline-block py-1 font-display text-[15px] text-on-dark-muted transition-colors hover:text-white" href="donate.html?fund=zakat">Give Zakat</a></li>
<li><a class="inline-block py-1 font-display text-[15px] text-on-dark-muted transition-colors hover:text-white" href="donate.html?fund=sadaqah">Give Sadaqah</a></li>
<li><a class="inline-block py-1 font-display text-[15px] text-on-dark-muted transition-colors hover:text-white" href="donate.html#zakat-calculator">Zakat calculator</a></li>
<li><a class="inline-block py-1 font-display text-[15px] text-on-dark-muted transition-colors hover:text-white" href="donate.html#gift-aid">Gift Aid</a></li>
</ul>
</div>
<div>
<h3 class="t-label text-white">Legal</h3>
<ul class="mt-3 grid gap-1.5">
<li><a class="inline-block py-1 font-display text-[15px] text-on-dark-muted transition-colors hover:text-white" href="privacy-policy.html">Privacy policy</a></li>
<li><a class="inline-block py-1 font-display text-[15px] text-on-dark-muted transition-colors hover:text-white" href="terms-and-conditions.html">Terms and conditions</a></li>
</ul>
</div>
</nav>
<div class="lg:col-span-3">
<h3 class="t-h3 text-white">Stay in touch</h3>
<form data-demo-form class="mt-4 grid gap-3">
<label for="footer-01-email" class="t-label text-white">Email address</label>
<input id="footer-01-email" type="email" name="email" autocomplete="email" required aria-describedby="footer-01-email-help" placeholder="you@example.com" class="h-12 w-full min-w-0 rounded-md border border-white/30 bg-white/5 px-4 font-display text-base text-white placeholder:text-white/50 focus:border-white">
<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 border border-white/70 text-white hover:border-white hover:bg-white/10 h-12 px-6 text-base justify-self-start">Subscribe</button>
<p id="footer-01-email-help" class="t-caption text-on-dark-muted">Occasional updates about appeals and completed work. Unsubscribe at any time.</p>
<p data-demo-status role="status" class="t-caption font-semibold text-marigold empty:hidden"></p>
</form>
</div>
</div>
<div class="border-t border-white/15">
<div class="mx-auto w-full max-w-content px-5 sm:px-8 flex flex-col gap-3 py-6 font-display text-[13px] text-on-dark-muted sm:flex-row sm:items-center sm:justify-between sm:gap-8">
<p>Zafar Foundation is a charitable incorporated organisation registered with the Charity Commission for England and Wales, number 1215863.</p>
<p class="shrink-0">© 2026 Zafar Foundation</p>
</div>
</div>
</footer>