Free CSS template · Seasonal landing
Santa Claus
A festive Christmas landing page in red and green, ready for a seasonal promo.
A modern 2026 rebuild of a long-running CSS Crème template: responsive, accessible, and framework-free. Preview it below, then copy the starter.
Design tokens
Grab the starter
A complete, responsive single-file page themed to this template. Copy it into an
index.html and open it. That's the whole setup.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Santa Claus</title>
<style>
:root {
--bg: #10241A; --surface: #16331F; --primary: #D9453C;
--accent: #F4C04E; --text: #F2F7EE; --muted: #9DB6A2;
}
* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 Fraunces, system-ui, sans-serif; background: var(--bg); color: var(--text); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 80px 24px; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; }
p { margin: 18px 0 0; color: var(--muted); font-size: 1.15rem; max-width: 52ch; }
.btn { display: inline-block; margin-top: 28px; padding: 13px 26px; border-radius: 12px;
background: var(--primary); color: #fff; text-decoration: none; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
border-radius: 16px; padding: 24px; }
</style>
</head>
<body>
<main class="wrap">
<h1>Santa Claus</h1>
<p>A festive Christmas landing page in red and green, ready for a seasonal promo.</p>
<a class="btn" href="#">Get started</a>
<div class="grid">
<div class="card">One</div><div class="card">Two</div><div class="card">Three</div>
</div>
</main>
</body>
</html>About the Santa Claus template
Santa Claus began as one of CSS Crème's most-linked free templates. We rebuilt it from scratch for 2026: modern, responsive CSS with no framework to untangle, custom properties for every color so a rebrand takes minutes, and markup that stays readable months later. The preview above is the real layout; the starter is the real code.
Want to push it further? Pull a different palette, round the corners in the border-radius tool, or see the system decoded in a breakdown.
More landing templates: Beauty Co, Organic Beauty, Valentine's Lovers.