Pattern catalog · 12 of 12 loaded
v1.0Spring 2026Internal reference
Web Build Templates
Pattern Reference

Footers library

12 footer patterns
v1.0 · Spring 2026
Live

Twelve footer patterns — from the brutalist sitemap to the editorial masthead — each committing to a clear voice. Pair with any hero in the Heroes library.

How to use this: Pick a footer that fits the project's tone, not just the structure. The "Mega Footer" works for institutional clients; the "Sticky One-Liner" works for funnel-driven service businesses. Mixing matters.

Each pattern includes the full source — copy it, swap the content, and customize from there. Footers are typically the last thing built, but treating them with care is what separates considered sites from generic ones.

01

Editorial Masthead

Editorial

Mirrors a magazine's back-cover masthead. Big serif logotype, colophon-style credits, issue numbers. For publications, content brands, studios.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,800&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'Inter',sans-serif;background:#1a1814;color:#e8e1d0;font-size:14px;line-height:1.5}
.foot{padding:48px 56px 32px;display:flex;flex-direction:column;gap:36px}
.top{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #e8e1d0;padding-bottom:18px}
.title{font-family:'Fraunces',serif;font-weight:800;font-size:clamp(56px,10vw,128px);line-height:.85;letter-spacing:-.04em}
.title em{font-style:italic;font-weight:400}
.issue{text-align:right;font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:#a89b85}
.issue b{display:block;font-family:'Fraunces',serif;font-weight:800;font-size:24px;text-transform:none;letter-spacing:-.01em;color:#e8e1d0;margin:4px 0}
.colophon{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.col h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#a4341e;margin-bottom:12px;font-weight:600}
.col p,.col a{color:#cbc1aa;font-size:13px;line-height:1.7;text-decoration:none;display:block}
.col a:hover{color:#e8e1d0;border-bottom:1px solid #a4341e}
.bottom{display:flex;justify-content:space-between;align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#7a7060;border-top:1px solid #3a352e;padding-top:18px}
.bottom .center{font-family:'Fraunces',serif;font-style:italic;text-transform:none;letter-spacing:0;font-size:13px;color:#cbc1aa}
@media (max-width:780px){.foot{padding:32px 24px}.colophon{grid-template-columns:1fr 1fr}.bottom{flex-direction:column;gap:8px}}
</style></head><body><footer class="foot">
<div class="top"><h1 class="title">Th<em>e</em> Periphery</h1><div class="issue">Vol. XII · Spring 2026<b>№ 47</b>$18 USD · Quarterly</div></div>
<div class="colophon">
<div class="col"><h4>Editorial</h4><a href="#">Mariam El-Sayed, EIC</a><a href="#">D. Wahid, Photo</a><a href="#">Sasha Roth, Features</a><a href="#">Lila Ahmadi, Food</a></div>
<div class="col"><h4>Subscribe</h4><a href="#">Print + digital · $84/yr</a><a href="#">Digital only · $48/yr</a><a href="#">Gift a year</a><a href="#">Manage subscription</a></div>
<div class="col"><h4>Sections</h4><a href="#">Reported</a><a href="#">Essays</a><a href="#">Interviews</a><a href="#">Photo</a><a href="#">Letters</a></div>
<div class="col"><h4>Periphery, Inc.</h4><a href="#">About</a><a href="#">Contact</a><a href="#">Press &amp; media</a><a href="#">Submissions</a><a href="#">Privacy</a></div>
</div>
<div class="bottom"><div>© 2026 Periphery Inc. · Brooklyn</div><div class="center">"For people who'd rather think than scroll."</div><div>ISSN 2789-4421</div></div>
</footer></body></html>
02

Brutalist Sitemap

Brutalist

Every page on the site, listed in a hard grid with monospace numbering. No hierarchy, no decoration. For technical tools, indie sites, anti-design.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'JetBrains Mono',monospace;background:#fafaf7;color:#000;font-size:13px;line-height:1.5}
.foot{border-top:2px solid #000}
.bar{display:grid;grid-template-columns:repeat(12,1fr);border-bottom:1px solid #000}
.bar > *{padding:14px 16px;border-right:1px solid #000;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.bar > *:last-child{border-right:none}
.b1{grid-column:span 2;font-weight:700}
.b2{grid-column:span 7;color:#666}
.b3{grid-column:span 3;text-align:right}
.grid{display:grid;grid-template-columns:repeat(4,1fr)}
.col{border-right:1px solid #000;padding:18px 16px}
.col:last-child{border-right:none}
.col h4{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#666;margin-bottom:12px}
.col ul{list-style:none}
.col li{padding:6px 0;border-bottom:1px solid rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center}
.col li:last-child{border-bottom:none}
.col a{color:#000;text-decoration:none}
.col a:hover{background:#000;color:#e6ff3c;padding:0 4px}
.col .num{color:#999;font-size:11px}
.statusbar{display:grid;grid-template-columns:repeat(12,1fr);border-top:2px solid #000;background:#000;color:#fafaf7}
.statusbar > *{padding:10px 16px;border-right:1px solid rgba(255,255,255,.2);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.statusbar > *:last-child{border-right:none}
.s1{grid-column:span 4}
.s2{grid-column:span 4;text-align:center}
.s3{grid-column:span 4;text-align:right}
.statusbar .live::before{content:"";display:inline-block;width:8px;height:8px;background:#e6ff3c;margin-right:6px;vertical-align:middle;animation:bl 1.2s steps(2) infinite}
@keyframes bl{50%{opacity:.3}}
@media (max-width:780px){.grid{grid-template-columns:1fr 1fr}.bar,.statusbar{grid-template-columns:1fr}.bar > *,.statusbar > *{grid-column:span 1!important;border-right:none;border-bottom:1px solid #000}.statusbar > *{border-bottom:1px solid rgba(255,255,255,.2)}}
</style></head><body><footer class="foot">
<div class="bar"><div class="b1">SITE://MAP</div><div class="b2">14 pages · last updated 04.21.2026 · MIT licensed source</div><div class="b3">[ search ↗ ]</div></div>
<div class="grid">
<div class="col"><h4>// product</h4><ul><li><a href="#">Overview</a><span class="num">[01]</span></li><li><a href="#">Features</a><span class="num">[02]</span></li><li><a href="#">Pricing</a><span class="num">[03]</span></li><li><a href="#">Changelog</a><span class="num">[04]</span></li></ul></div>
<div class="col"><h4>// docs</h4><ul><li><a href="#">Quickstart</a><span class="num">[05]</span></li><li><a href="#">API reference</a><span class="num">[06]</span></li><li><a href="#">Self-host guide</a><span class="num">[07]</span></li><li><a href="#">Recipes</a><span class="num">[08]</span></li></ul></div>
<div class="col"><h4>// community</h4><ul><li><a href="#">GitHub</a><span class="num">[09]</span></li><li><a href="#">Discord (1.4k)</a><span class="num">[10]</span></li><li><a href="#">Issues &amp; bugs</a><span class="num">[11]</span></li><li><a href="#">RSS feed</a><span class="num">[12]</span></li></ul></div>
<div class="col"><h4>// company</h4><ul><li><a href="#">Who we are</a><span class="num">[13]</span></li><li><a href="#">Contact</a><span class="num">[14]</span></li><li><a href="#">Privacy</a><span class="num">[15]</span></li><li><a href="#">Press kit</a><span class="num">[16]</span></li></ul></div>
</div>
<div class="statusbar"><div class="s1"><span class="live"></span>OPERATIONAL · 99.98% uptime</div><div class="s2">v0.4.2 · build 14h ago</div><div class="s3">© 2026 ORBITAL/OS, INC. · EOF</div></div>
</footer></body></html>
03

Contact Card

Minimal

Phone and email at oversized type. No nav, no links, no newsletter. The footer IS the contact info. For agencies, consultants, anyone whose footer should be a CTA.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'Inter',sans-serif;background:#0a2540;color:#faf7f2;line-height:1.5}
.foot{padding:80px 64px 32px;display:flex;flex-direction:column;gap:48px;position:relative}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#b08a3e,transparent)}
.center{display:flex;flex-direction:column;gap:24px;max-width:1100px;margin:0 auto;width:100%}
.label{font-size:11px;text-transform:uppercase;letter-spacing:.3em;color:#b08a3e;display:flex;align-items:center;gap:14px}
.label::after{content:"";flex:1;height:1px;background:#b08a3e;max-width:200px;opacity:.5}
.contact{display:flex;flex-direction:column;gap:12px}
.contact a{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(36px,5.6vw,72px);line-height:1.0;letter-spacing:-.02em;color:#faf7f2;text-decoration:none;transition:color .2s}
.contact a:hover{color:#b08a3e}
.contact a.email{font-style:italic}
.bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;padding-top:24px;border-top:1px solid rgba(176,138,62,.3);max-width:1100px;margin:0 auto;width:100%;align-items:center}
.bottom > div{font-size:13px;color:#b8b0a3}
.bottom .center-text{text-align:center;font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:#faf7f2}
.bottom .right{text-align:right;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#7a7060}
@media (max-width:780px){.foot{padding:48px 24px 24px}.bottom{grid-template-columns:1fr;gap:8px}.bottom .center-text,.bottom .right{text-align:left}}
</style></head><body><footer class="foot">
<div class="center"><div class="label">When you're ready</div>
<div class="contact"><a href="tel:7272221659">(727) 222 — 1659</a><a class="email" href="mailto:rose@bayareatm.com">rose@bayareatm.com</a></div></div>
<div class="bottom"><div>Tampa Bay, Florida · Mon–Fri 9–5 ET</div><div class="center-text">"Quietly licensed · Selectively booked"</div><div class="right">© 2026 — All rights reserved</div></div>
</footer></body></html>
04

Marquee Band

Animated

A single scrolling band as the dominant element. Above or below it, just a thin strip of essentials. For energetic brands, music, fashion, youth-targeted.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;700&display=swap" rel="stylesheet">
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'Archivo',sans-serif;background:#fff5e1;color:#1a1a1a;overflow-x:hidden}
.foot{padding-top:32px}
.top-strip{padding:0 32px 24px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px;align-items:end}
.brand{font-family:'Archivo Black',sans-serif;font-size:32px;letter-spacing:-.02em}
.brand span{color:#ff3d2e}
.tagline{font-size:14px;line-height:1.5;font-weight:500;max-width:36ch}
.col h4{font-family:'Archivo Black',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;color:#ff3d2e}
.col a{display:block;font-size:14px;font-weight:500;color:#1a1a1a;text-decoration:none;padding:3px 0}
.col a:hover{color:#ff3d2e}
.marquee-wrap{background:#1a1a1a;color:#fff5e1;overflow:hidden;padding:36px 0;border-top:3px solid #ff3d2e}
.track{display:flex;animation:scroll 28s linear infinite;white-space:nowrap}
.track span{font-family:'Archivo Black',sans-serif;font-size:clamp(56px,9vw,128px);line-height:1;letter-spacing:-.04em;text-transform:uppercase;padding:0 24px;flex-shrink:0}
.track .outline{-webkit-text-stroke:2px #fff5e1;color:transparent}
.track .red{color:#ff3d2e}
.track .dot{display:inline-flex;align-items:center;color:#ff3d2e;font-size:32px;padding:0 12px;flex-shrink:0}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bottom{padding:18px 32px;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:500;color:#5a5040}
.bottom .copy b{color:#1a1a1a}
.dots{display:flex;gap:10px}
.dots a{width:36px;height:36px;border-radius:50%;background:#1a1a1a;color:#fff5e1;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px;transition:background .2s}
.dots a:hover{background:#ff3d2e}
@media (max-width:780px){.top-strip{grid-template-columns:1fr;gap:18px;padding:0 20px 18px}.bottom{flex-direction:column;gap:12px;padding:16px 20px}}
</style></head><body><footer class="foot">
<div class="top-strip"><div><div class="brand">RUN<span>/</span>CLUB</div><p class="tagline">A free running club for people who keep meaning to start. Show up Tuesdays.</p></div>
<div class="col"><h4>Find us</h4><a href="#">14 cities</a><a href="#">Tuesday meetups</a><a href="#">Strava</a></div>
<div class="col"><h4>The club</h4><a href="#">Manifesto</a><a href="#">Run leaders</a><a href="#">Press</a></div></div>
<div class="marquee-wrap"><div class="track"><span>Faster Together</span><span class="dot">●</span><span class="outline">Show up anyway</span><span class="dot">●</span><span class="red">Tuesday Nights</span><span class="dot">●</span><span>Faster Together</span><span class="dot">●</span><span class="outline">Show up anyway</span><span class="dot">●</span><span class="red">Tuesday Nights</span><span class="dot">●</span></div></div>
<div class="bottom"><div class="copy">© 2026 RUN/CLUB · <b>Free, forever</b></div><div class="dots"><a href="#">IG</a><a href="#">St</a><a href="#">YT</a></div></div>
</footer></body></html>
05

Newsletter Hero

Functional

The newsletter signup is the entire footer, treated like a hero. For media, content brands, anyone whose primary conversion is email capture.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'IBM Plex Sans',sans-serif;background:#0a0e0f;color:#e8eaea;line-height:1.5}
.foot{padding:64px 48px 32px;display:flex;flex-direction:column;gap:48px}
.center{max-width:880px;margin:0 auto;width:100%;text-align:center;display:flex;flex-direction:column;gap:24px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#5eead4;font-weight:500;padding:6px 14px;background:rgba(94,234,212,.08);border:1px solid rgba(94,234,212,.2);border-radius:999px}
.kicker::before{content:"";width:6px;height:6px;background:#5eead4;border-radius:50%}
.headline{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(36px,5.4vw,68px);line-height:1.05;letter-spacing:-.015em}
.headline em{font-style:italic;color:#5eead4}
.sub{font-size:17px;line-height:1.6;color:#a3a8a8;max-width:54ch}
.signup{margin-top:14px;display:flex;gap:8px;width:100%;max-width:480px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px;backdrop-filter:blur(8px)}
.signup input{flex:1;padding:14px 20px;background:transparent;border:none;color:#fff;font-family:inherit;font-size:15px;outline:none}
.signup input::placeholder{color:#666}
.signup button{padding:14px 26px;background:#5eead4;color:#0a0e0f;border:none;font-family:inherit;font-weight:600;font-size:14px;border-radius:999px;cursor:pointer;letter-spacing:.02em}
.signup button:hover{background:#fff}
.proof{font-size:13px;color:#666;margin-top:8px}
.proof b{color:#a3a8a8;font-weight:500}
.bottom{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);align-items:center}
.bottom > div{font-size:12px;color:#666}
.bottom .links{display:flex;gap:20px}
.bottom .links a{color:#a3a8a8;text-decoration:none;font-size:13px}
.bottom .links a:hover{color:#5eead4}
.bottom .copy{font-family:'IBM Plex Sans',sans-serif;text-align:right;letter-spacing:.05em;text-transform:uppercase;font-size:11px}
.bottom .center-text{font-family:'Instrument Serif',serif;font-style:italic;font-size:14px;color:#a3a8a8;letter-spacing:0;text-transform:none}
@media (max-width:780px){.foot{padding:48px 20px 24px}.signup{flex-direction:column;border-radius:18px}.signup button{width:100%}.bottom{grid-template-columns:1fr;text-align:left}.bottom .copy,.bottom .center-text{text-align:left}}
</style></head><body><footer class="foot">
<div class="center"><div class="kicker">Sundays · 6:00 AM ET</div>
<h2 class="headline">One <em>well-researched email</em> a week. That's it. That's the deal.</h2>
<p class="sub">Markets, demystified. Read by 38,000 portfolio managers, founders, and policy nerds. Free for now, ad-free forever.</p>
<form class="signup"><input type="email" placeholder="your@email.com"><button>Subscribe →</button></form>
<div class="proof"><b>★ 38,402 readers</b> · 68% open rate · Unsubscribe anytime</div></div>
<div class="bottom"><div class="links"><a href="#">Archive</a><a href="#">About</a><a href="#">Privacy</a><a href="#">RSS</a></div><div class="center-text">"For people who'd rather understand than react."</div><div class="copy">© 2026 Almanac Research</div></div>
</footer></body></html>
06

Statement

Editorial

A paragraph of prose as the footer. Reads like a colophon or back-of-the-book note. Nav lives elsewhere. For studios, considered brands, founder-led companies.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'EB Garamond',serif;background:#fcfaf5;color:#1a1612;line-height:1.6}
.foot{padding:64px 0 32px;border-top:1px solid #d4cabb}
.center{max-width:780px;margin:0 auto;padding:0 48px;display:flex;flex-direction:column;gap:32px}
.label{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9c4a2c;display:flex;align-items:center;gap:12px}
.label::after{content:"";flex:1;height:1px;background:#9c4a2c;max-width:140px;opacity:.5}
.statement{font-size:clamp(20px,2.2vw,26px);line-height:1.5;letter-spacing:-.005em;font-weight:400}
.statement::first-letter{font-size:3.4em;font-weight:500;float:left;line-height:.85;margin:0.05em 0.1em 0 -0.04em;color:#9c4a2c}
.statement em{font-style:italic;color:#9c4a2c}
.sig{display:flex;align-items:center;gap:18px;font-family:'Inter',sans-serif;font-size:13px;color:#7a6f5f}
.sig .name{font-family:'EB Garamond',serif;font-style:italic;font-size:24px;color:#1a1612}
.bottom{margin-top:32px;padding:18px 48px 0;border-top:1px solid #d4cabb;max-width:780px;margin-left:auto;margin-right:auto;display:flex;justify-content:space-between;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9b8e7c}
.bottom a{color:#9b8e7c;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.bottom a:hover{color:#1a1612;border-bottom-color:#9c4a2c}
.bottom .links{display:flex;gap:20px}
@media (max-width:780px){.center,.bottom{padding-left:24px;padding-right:24px}.bottom{flex-direction:column;gap:12px}}
</style></head><body><footer class="foot">
<div class="center"><div class="label">A note from the workshop</div>
<p class="statement">Made one piece at a time, in our shop in Camden, Maine. Slowly enough that we know the wood, fast enough to keep the lights on. Available, when they're ready. <em>Sold here, and almost nowhere else, on purpose.</em> If something speaks to you, take your time deciding — they aren't going anywhere fast.</p>
<div class="sig"><span class="name">— Dean Hollow</span><span>founder, occasional writer</span></div></div>
<div class="bottom"><div>© 2026 Hollow &amp; Co. · Camden, Maine</div><div class="links"><a href="#">Catalog</a><a href="#">Shop visits</a><a href="#">Email</a></div></div>
</footer></body></html>
07

Typographic Columns

Classic

Four-column nav done with proper typographic care — distinctive type pairing, mixed weights, unexpected color. The classic done well rather than reinvented.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'Bricolage Grotesque',sans-serif;background:#ebe8e1;color:#1a1a1a;line-height:1.5}
.foot{padding:48px 40px 24px}
.top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:32px;border-bottom:1px solid rgba(26,26,26,.15)}
.brand-col h2{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:.95}
.brand-col h2 .pulse{display:inline-block;width:10px;height:10px;background:#ff6b35;border-radius:50%;margin-right:6px;animation:p 1.6s ease-in-out infinite;vertical-align:middle}
@keyframes p{50%{opacity:.4}}
.brand-col p{margin-top:14px;font-size:14px;line-height:1.55;color:#5a5346;max-width:36ch}
.brand-col .tag{margin-top:20px;display:inline-block;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#ff6b35;background:#fff;padding:5px 12px;border-radius:999px;border:1px solid rgba(255,107,53,.3)}
.col h4{font-family:'Geist Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#ff6b35;margin-bottom:14px;font-weight:500}
.col a{display:block;font-size:15px;color:#1a1a1a;text-decoration:none;padding:4px 0;font-weight:500;transition:color .15s}
.col a:hover{color:#ff6b35}
.col a .num{font-family:'Geist Mono',monospace;font-size:11px;color:#999;margin-right:8px}
.bottom{padding-top:18px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5a5346}
.bottom .legal a{color:#5a5346;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.bottom .legal a:hover{color:#1a1a1a;border-bottom-color:#ff6b35}
.bottom .legal{display:flex;gap:18px}
.bottom .center{text-align:center}
.bottom .right{text-align:right}
@media (max-width:880px){.top{grid-template-columns:1fr 1fr;gap:24px}.brand-col{grid-column:span 2}.bottom{grid-template-columns:1fr;text-align:left}.bottom .right,.bottom .center{text-align:left}}
</style></head><body><footer class="foot">
<div class="top">
<div class="brand-col"><h2><span class="pulse"></span>FIELD &amp; FORM</h2><p>An independent studio for brands that refuse to look like everyone else. Selectively booking new work.</p><span class="tag">Now open · Q3 2026</span></div>
<div class="col"><h4>// studio</h4><a href="#"><span class="num">01</span>Work</a><a href="#"><span class="num">02</span>Process</a><a href="#"><span class="num">03</span>Team</a><a href="#"><span class="num">04</span>Press kit</a></div>
<div class="col"><h4>// services</h4><a href="#">Identity</a><a href="#">Web</a><a href="#">Packaging</a><a href="#">Type</a></div>
<div class="col"><h4>// writing</h4><a href="#">Journal</a><a href="#">Newsletter</a><a href="#">Talks</a><a href="#">Interviews</a></div>
<div class="col"><h4>// say hi</h4><a href="#">Email</a><a href="#">Instagram</a><a href="#">Read.cv</a><a href="#">RSS</a></div>
</div>
<div class="bottom"><div>© 2026 Field &amp; Form Studio LLC</div><div class="center">Oakland, California · Made on the West Coast</div><div class="legal right"><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Imprint</a></div></div>
</footer></body></html>
08

Sticky One-Liner

Functional

A single sentence with a CTA. No nav, no links, no decoration. Maximum focus. For service businesses, single-product sites, anything funnel-driven.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600&display=swap" rel="stylesheet">
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'Plus Jakarta Sans',sans-serif;background:linear-gradient(180deg,#f0f4ff 0%,#dbe4ff 100%);color:#0f1845;line-height:1.5;min-height:100vh}
.foot{padding:64px 40px 24px;display:flex;flex-direction:column;gap:32px}
.center{max-width:1100px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;background:#fff;border-radius:24px;padding:40px 48px;box-shadow:0 24px 64px -28px rgba(15,24,69,.18)}
.headline{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.02em}
.headline em{font-style:italic;color:#3d4ad9}
.sub{font-size:15px;color:#3a4670;margin-top:6px}
.btn{padding:16px 30px;background:#0f1845;color:#fff;border:none;font-family:inherit;font-weight:600;font-size:15px;border-radius:999px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.btn:hover{background:#3d4ad9}
.bottom{max-width:1100px;margin:0 auto;width:100%;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#3a4670;padding-top:8px}
.bottom .center-text{font-family:'Fraunces',serif;font-style:italic;font-size:14px}
.bottom .links{display:flex;gap:16px}
.bottom a{color:#3a4670;text-decoration:none}
.bottom a:hover{color:#3d4ad9}
@media (max-width:780px){.foot{padding:32px 20px 20px}.center{grid-template-columns:1fr;padding:24px;gap:20px;text-align:center}.btn{justify-self:center}.bottom{flex-direction:column;gap:8px}}
</style></head><body><footer class="foot">
<div class="center"><div><h2 class="headline">See what you'd save in <em>about ten seconds</em>.</h2><p class="sub">No contact info, no soft credit pull. Real numbers, instantly.</p></div><button class="btn">Run my numbers →</button></div>
<div class="bottom"><div>© 2026 Fundament · NMLS #1843092 · Equal Housing Lender</div><div class="center-text">"4.9 ★ from 12,400 borrowers"</div><div class="links"><a href="#">Privacy</a><a href="#">Licenses</a><a href="#">Contact</a></div></div>
</footer></body></html>
09

Mega Footer

Classic

Comprehensive footer with multiple offices, full link tree, multiple sub-brands. For agencies, corporate, multi-region companies.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Neue+Haas+Grotesk+Display+Pro:wght@400;500;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'Inter',sans-serif;background:#000;color:#fff;line-height:1.5}
.foot{padding:64px 48px 24px}
.top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.15)}
.brand-col h2{font-size:36px;font-weight:700;letter-spacing:-.03em;line-height:1}
.brand-col p{margin-top:14px;font-size:14px;line-height:1.55;color:#888;max-width:36ch}
.brand-col .langs{margin-top:20px;display:flex;gap:6px;flex-wrap:wrap}
.brand-col .langs a{padding:5px 10px;font-size:11px;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#aaa;text-decoration:none;letter-spacing:.04em;text-transform:uppercase}
.brand-col .langs a.active,.brand-col .langs a:hover{background:#fff;color:#000;border-color:#fff}
.col h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#888;margin-bottom:16px;font-weight:600}
.col a{display:block;font-size:14px;color:#fff;text-decoration:none;padding:5px 0;transition:color .15s}
.col a:hover{color:#e8000b}
.offices{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:36px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.office h5{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#e8000b;margin-bottom:8px;font-weight:600}
.office b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
.office address{font-size:13px;color:#aaa;line-height:1.5;font-style:normal}
.bottom{padding-top:24px;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#666}
.bottom .legal a{color:#aaa;text-decoration:none;margin-right:18px}
.bottom .legal a:hover{color:#fff}
.bottom .center-text{font-family:'Inter',sans-serif;text-align:center}
.bottom .right{text-align:right;display:flex;gap:10px;justify-content:flex-end}
.bottom .right a{width:32px;height:32px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:13px;text-transform:none;letter-spacing:0}
.bottom .right a:hover{background:#fff;color:#000}
@media (max-width:920px){.top{grid-template-columns:1fr 1fr;gap:32px}.brand-col{grid-column:span 2}.offices{grid-template-columns:1fr 1fr;gap:20px}.bottom{grid-template-columns:1fr;text-align:left}.bottom .center-text,.bottom .right{text-align:left;justify-content:flex-start}}
</style></head><body><footer class="foot">
<div class="top">
<div class="brand-col"><h2>Kunsthalle Basel</h2><p>An institution dedicated to contemporary art and design, in continuous operation since 1872. Member of the Kunsthalle network.</p><div class="langs"><a class="active" href="#">EN</a><a href="#">DE</a><a href="#">FR</a><a href="#">IT</a></div></div>
<div class="col"><h4>Visit</h4><a href="#">Plan your visit</a><a href="#">Hours &amp; admission</a><a href="#">Accessibility</a><a href="#">Group bookings</a><a href="#">Café &amp; shop</a></div>
<div class="col"><h4>Programme</h4><a href="#">Current</a><a href="#">Upcoming</a><a href="#">Past</a><a href="#">Education</a><a href="#">Talks &amp; events</a></div>
<div class="col"><h4>Support</h4><a href="#">Become a member</a><a href="#">Patrons circle</a><a href="#">Volunteer</a><a href="#">Press</a><a href="#">Jobs</a></div>
</div>
<div class="offices">
<div class="office"><h5>Main hall</h5><b>Basel</b><address>Steinenberg 7<br>4051 Basel<br>+41 61 206 99 00</address></div>
<div class="office"><h5>Annex</h5><b>Zürich</b><address>Limmatstrasse 270<br>8005 Zürich<br>+41 44 277 23 50</address></div>
<div class="office"><h5>Reading room</h5><b>Bern</b><address>Helvetiaplatz 1<br>3005 Bern<br>+41 31 350 04 40</address></div>
<div class="office"><h5>Studio</h5><b>Geneva</b><address>Rue Charles-Galland 10<br>1206 Genève<br>+41 22 418 33 40</address></div>
</div>
<div class="bottom"><div class="legal"><a href="#">Privacy</a><a href="#">Imprint</a><a href="#">Terms</a><a href="#">Cookies</a></div><div class="center-text">© 1872–2026 Kunsthalle Basel · Public foundation</div><div class="right"><a href="#">IG</a><a href="#">FB</a><a href="#">in</a><a href="#">YT</a></div></div>
</footer></body></html>
10

Event Poster

Editorial

Designed like a concert or event poster. Big type, listing-style information, no traditional nav structure. For arts venues, festivals, music, fashion drops.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Anton&family=Manrope:wght@400;500;700&display=swap" rel="stylesheet">
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'Manrope',sans-serif;background:#fbf24a;color:#0d0d0d;line-height:1.4}
.foot{padding:32px 36px;display:flex;flex-direction:column;gap:24px;position:relative;overflow:hidden}
.foot::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='1' seed='5'/></filter><rect width='400' height='400' filter='url(%23n)' opacity='0.18'/></svg>");mix-blend-mode:multiply;pointer-events:none}
.kicker{font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.25em;text-transform:uppercase;display:flex;align-items:center;gap:14px;position:relative;z-index:2}
.kicker::after{content:"";flex:1;height:2px;background:#0d0d0d;max-width:240px}
.huge{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(64px,11vw,160px);line-height:.86;letter-spacing:-.005em;text-transform:uppercase;position:relative;z-index:2}
.listing{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;padding-top:24px;border-top:3px solid #0d0d0d;position:relative;z-index:2}
.list-col h4{font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
.list-col p{font-size:14px;font-weight:500;line-height:1.5}
.list-col p b{display:block;font-family:'Anton',sans-serif;font-size:24px;font-weight:400;letter-spacing:-.01em;text-transform:uppercase;margin-top:2px}
.list-col a{color:#0d0d0d;text-decoration:none;border-bottom:2px solid #0d0d0d}
.list-col a:hover{background:#0d0d0d;color:#fbf24a}
.dates{display:flex;flex-wrap:wrap;gap:0;font-family:'Anton',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;border-top:1px solid #0d0d0d;border-bottom:1px solid #0d0d0d;position:relative;z-index:2;background:#0d0d0d;color:#fbf24a}
.dates span{padding:10px 16px;border-right:1px solid rgba(251,242,74,.3)}
.dates span:last-child{border-right:none}
.bottom{display:flex;justify-content:space-between;align-items:center;font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;position:relative;z-index:2}
@media (max-width:780px){.listing{grid-template-columns:1fr;gap:18px}.bottom{flex-direction:column;gap:6px;text-align:center}.dates{flex-direction:column}.dates span{border-right:none;border-bottom:1px solid rgba(251,242,74,.3)}.dates span:last-child{border-bottom:none}}
</style></head><body><footer class="foot">
<div class="kicker">Now booking · Spring–Summer 2026</div>
<h1 class="huge">Volt/22<br>on tour.</h1>
<div class="dates"><span>05/14 Boulder, CO</span><span>05/22 Bozeman, MT</span><span>06/04 Bend, OR</span><span>06/18 Squamish, BC</span><span>07/02 Park City, UT</span></div>
<div class="listing">
<div class="list-col"><h4>Demo days</h4><p>Show up. Ride one. <b>Free, no signup.</b><br>Full schedule and routes at <a href="#">volt22.bike/tour</a></p></div>
<div class="list-col"><h4>Find a dealer</h4><p>72 dealers in 14 states.<b>Visit one →</b><a href="#">volt22.bike/dealers</a></p></div>
<div class="list-col"><h4>Stay in touch</h4><p>Build releases &amp; demo dates, six times a year.<b>The newsletter →</b><a href="#">volt22.bike/news</a></p></div>
</div>
<div class="bottom"><div>© 2026 Volt/22 Bicycles, Boulder Co.</div><div>Built different · Made in USA</div></div>
</footer></body></html>
11

Soft Minimal

Minimal

Restrained, calm, soft palette, lots of whitespace. Tiny type, gentle dividers. For wellness, paper goods, anything that wants to feel quiet.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;1,300&family=Manrope:wght@300;400;500&display=swap" rel="stylesheet">
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'Manrope',sans-serif;background:#f1ebe3;color:#3a2f26;font-weight:300;line-height:1.6}
.foot{padding:64px 40px 32px;display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center}
.symbol{width:48px;height:48px;border:1px solid #3a2f26;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cormorant',serif;font-style:italic;font-size:22px}
.brand{font-family:'Cormorant',serif;font-size:32px;font-style:italic}
.message{font-family:'Cormorant',serif;font-style:italic;font-size:20px;line-height:1.5;color:#5e5045;max-width:46ch}
.message em{color:#9b7e63;font-style:italic;font-weight:400}
.links{display:flex;gap:32px;font-size:13px;letter-spacing:.04em;flex-wrap:wrap;justify-content:center}
.links a{color:#3a2f26;text-decoration:none;opacity:.7;transition:opacity .25s}
.links a:hover{opacity:1;color:#9b7e63}
.divider{display:flex;align-items:center;gap:14px;width:100%;max-width:300px;color:#9b7e63}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:#9b7e63;opacity:.4}
.divider .dot{width:6px;height:6px;border-radius:50%;background:#9b7e63}
.bottom{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;display:flex;flex-direction:column;gap:4px}
@media (max-width:780px){.foot{padding:48px 24px 24px;gap:24px}}
</style></head><body><footer class="foot">
<div class="symbol">·</div>
<div class="brand">Petal &amp; Slow</div>
<p class="message">Made in <em>small batches</em> in our studio in northern Portugal. Sold here, and almost nowhere else, on purpose.</p>
<div class="divider"><span class="dot"></span></div>
<div class="links"><a href="#">Shop</a><a href="#">Ritual</a><a href="#">Story</a><a href="#">Journal</a><a href="#">Stockists</a><a href="#">Contact</a></div>
<div class="bottom"><div>© 2026 Petal &amp; Slow Lda. · Porto, Portugal</div><div>Vegan · Refillable · Made slowly</div></div>
</footer></body></html>
12

Glass Gradient

Atmospheric

Layered glass over a colorful gradient. Modern, polished, slightly futuristic. For SaaS, AI products, anything in tech that wants to feel premium.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400&display=swap" rel="stylesheet">
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'Geist',sans-serif;background:#0a0512;color:#fff;line-height:1.5;min-height:100vh;position:relative;overflow:hidden}
.bg{position:absolute;inset:0;background:radial-gradient(circle at 20% 100%,#7e3aff 0%,transparent 40%),radial-gradient(circle at 80% 100%,#ff3a8c 0%,transparent 40%),radial-gradient(circle at 50% 0%,#3a5fff 0%,transparent 50%);filter:blur(60px);opacity:.4}
.foot{padding:56px 36px 24px;position:relative;z-index:2;display:flex;flex-direction:column;gap:36px}
.top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:28px;background:rgba(255,255,255,.04);backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.1);border-radius:20px}
.brand-col{display:flex;flex-direction:column;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:20px}
.brand .dot{width:28px;height:28px;background:linear-gradient(135deg,#7e3aff,#ff3a8c);border-radius:8px;box-shadow:0 4px 16px rgba(126,58,255,.5)}
.brand-col p{font-size:13px;color:rgba(255,255,255,.65);line-height:1.55;max-width:36ch}
.status{margin-top:8px;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.3);border-radius:999px;font-family:'Geist Mono',monospace;font-size:11px;color:#5eead4;width:fit-content}
.status::before{content:"";width:6px;height:6px;background:#5eead4;border-radius:50%;animation:p 1.6s ease-in-out infinite}
@keyframes p{50%{opacity:.4}}
.col h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.5);margin-bottom:14px;font-weight:500}
.col a{display:block;font-size:14px;color:rgba(255,255,255,.85);text-decoration:none;padding:5px 0;transition:color .15s}
.col a:hover{color:#fff}
.col a .new{display:inline-block;margin-left:6px;padding:1px 6px;font-size:9px;background:linear-gradient(135deg,#7e3aff,#ff3a8c);color:#fff;border-radius:4px;letter-spacing:.05em;font-weight:600;font-family:'Geist Mono',monospace;vertical-align:middle}
.bottom{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;font-size:12px;color:rgba(255,255,255,.5);padding:0 12px}
.bottom .legal{display:flex;gap:18px}
.bottom .legal a{color:rgba(255,255,255,.5);text-decoration:none}
.bottom .legal a:hover{color:#fff}
.bottom .center-text{text-align:center;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.05em}
.bottom .right{text-align:right}
@media (max-width:880px){.top{grid-template-columns:1fr 1fr;gap:24px;padding:20px}.brand-col{grid-column:span 2}.bottom{grid-template-columns:1fr;text-align:left;gap:8px}.bottom .center-text,.bottom .right{text-align:left}}
</style></head><body><div class="bg"></div><footer class="foot">
<div class="top">
<div class="brand-col"><div class="brand"><div class="dot"></div>Lumen Compute</div><p>Inference platform for open-weight models. Pay per token, scale to zero.</p><div class="status">All systems operational</div></div>
<div class="col"><h4>Platform</h4><a href="#">Models</a><a href="#">API <span class="new">v4</span></a><a href="#">Inference engine</a><a href="#">Pricing</a></div>
<div class="col"><h4>Developers</h4><a href="#">Documentation</a><a href="#">Quickstart</a><a href="#">SDK reference</a><a href="#">Status page</a></div>
<div class="col"><h4>Company</h4><a href="#">About</a><a href="#">Blog</a><a href="#">Careers</a><a href="#">Contact</a></div>
</div>
<div class="bottom"><div class="legal"><a href="#">Privacy</a><a href="#">Terms</a><a href="#">DPA</a><a href="#">Security</a></div><div class="center-text">SOC 2 · GDPR · HIPAA · ISO 27001</div><div class="right">© 2026 Lumen Compute, Inc.</div></div>
</footer></body></html>
Copied