← All samples

Small Business Landing Page

A responsive single-file landing page for a fictional bakery: hero, feature cards and a demo signup form. No frameworks.

Run it

Open samples/landing-page/index.html in a browser.

Files: index.html

Open the live demo

Source

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Rideau Bakery — demo landing page</title>
<style>*{box-sizing:border-box}body{margin:0;font-family:Georgia,serif;color:#3b2a1e;background:#fbf6ef}
header{padding:5rem 1.5rem;text-align:center;background:linear-gradient(135deg,#f3d9b1,#e8b77d)}h1{font-size:clamp(2rem,6vw,3.5rem);margin:0}
.btn{display:inline-block;margin-top:1.5rem;padding:.8rem 1.6rem;background:#3b2a1e;color:#fff;border-radius:999px;text-decoration:none;font-family:system-ui}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;max-width:960px;margin:3rem auto;padding:0 1.5rem}
.card{background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 2px 10px #0001}form{max-width:480px;margin:0 auto 4rem;padding:0 1.5rem;display:flex;gap:.5rem}
input{flex:1;padding:.8rem;border:1px solid #c9b49a;border-radius:8px}button{padding:.8rem 1.2rem;border:0;background:#c96f3b;color:#fff;border-radius:8px}
#msg{text-align:center;font-family:system-ui}footer{text-align:center;padding:2rem;font-size:.85rem;opacity:.7}</style></head><body>
<header><h1>Fresh sourdough, every morning</h1><p>A fictional neighbourhood bakery, used as a design demo.</p><a class="btn" href="#signup">Get the weekly menu</a></header>
<section class="grid"><div class="card"><h3>Baked daily</h3><p>Loaves out of the oven by 7 a.m.</p></div><div class="card"><h3>Local flour</h3><p>Placeholder copy describing sourcing.</p></div><div class="card"><h3>Pre-order</h3><p>Reserve online, pick up on your way to work.</p></div></section>
<h2 style="text-align:center" id="signup">Weekly menu email</h2>
<form onsubmit="event.preventDefault();document.getElementById('msg').textContent='Thanks! (Demo only, nothing was sent.)';this.reset()"><input type="email" required placeholder="you@example.com" aria-label="Email"><button>Subscribe</button></form><p id="msg"></p>
<footer>Demo page by Kirk Davies Studio. "Rideau Bakery" is fictional.</footer></body></html>