Section
Large Footer
Large colored footer with newsletter + link groups.
- Section
- Vanilla
- HTML
- MIT
Preview
Live section
No interactive preview for this section.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Sections/Footer/footer-large Vanilla/Sections/Footer/footer-large <!-- Snippet Name: Large Footer | Family: Footer | Description: Large colored footer with newsletter + link groups. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Large Footer | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: footer-large. Copy, customize, ship.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> /* ---- Neo-Brutalist design tokens ---- */
:root{
--bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
--border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
--accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
--radius:6px; --radius-lg:10px;
--shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
--ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
--container:1200px; --gutter:20px;
--fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
--fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
--ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
:root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
--border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
}
/* ---- base layout + components ---- */
*{box-sizing:border-box}
.nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
.nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
.nb p{margin:0} .nb a{color:inherit}
.nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
font-weight:700;text-transform:uppercase;letter-spacing:.14em;
border:2px solid var(--border);background:var(--surface);padding:6px 12px;
border-radius:999px;box-shadow:var(--shadow)}
.nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
.nb .muted{color:var(--muted)}
.nb .center{text-align:center;margin-inline:auto}
.nb .grid{display:grid;gap:var(--gutter)}
.nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
padding:14px 22px;background:var(--primary);color:var(--primary-fg);
box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
.nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.nb .btn.outline{background:var(--surface);color:var(--foreground)}
.nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
.nb .btn.accent{background:var(--accent);color:#0a0a0a}
.nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
.nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
.nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
padding:4px 10px;border-radius:999px;background:var(--surface)}
.nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
.nb .skip:focus{left:8px}
.nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (prefers-reduced-motion:reduce){
.nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
transition-duration:.001ms!important;animation-iteration-count:1!important}
}
.fl{border-top:3px solid var(--border);background:var(--primary);color:#fff}
.fl .top{padding-block:50px;display:grid;gap:36px;grid-template-columns:1fr}
.fl h2{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:14px;max-width:14ch}
.fl .sub{color:rgba(255,255,255,.85);max-width:42ch;margin-bottom:22px}
.fl .form{display:flex;gap:0;max-width:440px}
.fl .form input{flex:1;border:3px solid #fff;background:rgba(255,255,255,.1);color:#fff;padding:14px 16px;font:inherit;font-weight:600;border-radius:10px 0 0 10px}
.fl .form input::placeholder{color:rgba(255,255,255,.7)}
.fl .form button{border:3px solid #fff;border-left:0;background:var(--accent);color:#0a0a0a;font:inherit;font-weight:800;padding:0 22px;border-radius:0 10px 10px 0;cursor:pointer}
.fl .cols{display:grid;gap:26px;grid-template-columns:repeat(2,1fr)}
.fl .col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;color:rgba(255,255,255,.7)}
.fl .col a{display:block;padding:5px 0;text-decoration:none;color:#fff;font-weight:600;font-size:.9rem;opacity:.85}
.fl .col a:hover{opacity:1}
.fl .bottom{border-top:2px solid rgba(255,255,255,.25);padding-block:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.7)}
@media(min-width:760px){.fl .top{grid-template-columns:1.2fr 1fr}.fl .cols{grid-template-columns:repeat(4,1fr)}}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<footer class="fl">
<div class="container">
<div class="top">
<div>
<h2>Ship something worth shipping.</h2>
<p class="sub">Get product updates, design tips, and the occasional hot take. No spam.</p>
<form class="form" onsubmit="return false"><label class="visually-hidden" for="fl-e">Email</label><input id="fl-e" type="email" placeholder="you@company.com"><button type="submit">Subscribe</button></form>
</div>
<nav class="cols" aria-label="Footer">
<div class="col"><h4>Product</h4><a href="#">Features</a><a href="#">Pricing</a><a href="#">Integrations</a><a href="#">Roadmap</a></div>
<div class="col"><h4>Company</h4><a href="#">About</a><a href="#">Careers</a><a href="#">Blog</a><a href="#">Contact</a></div>
<div class="col"><h4>Resources</h4><a href="#">Docs</a><a href="#">API</a><a href="#">Guides</a><a href="#">Status</a></div>
<div class="col"><h4>Legal</h4><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Security</a><a href="#">DPA</a></div>
</nav>
</div>
<div class="bottom"><p>© 2026 DevSnips, Inc.</p><p>San Francisco · London · Singapore</p></div>
</div>
</footer>
</body>
</html># Large Footer
Large colored footer with newsletter + link groups.
**Technology:** Vanilla HTML/CSS/JS
**Category:** sections / footer
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)
**Responsive:** Mobile-first (320px → 1920px)
**Dark mode:** via `prefers-color-scheme`
**Tags:** footer, large, newsletter
**Features:** light/dark, responsive
## Usage
1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand. 111 lines UTF-8 · LF · Spaces: 2
Continue browsing