Nocturne Gallery
A contemporary gallery page with a pinned white-cube hero, a horizontal hanging reel, and a collector viewing form.
Real Estate Landing Page
A residential brokerage page with featured homes, neighborhood notes, and a viewing request form.
Use this free Keystone page as a starting point for an agent or small brokerage. The layout is a single HTML file with CSS variables for color, listing cards, and a demo viewing form you can connect later.
What's included
- Sticky navigation with a mobile menu
- Hero with a CSS facade placeholder
- Listing cards with sample prices
- Neighborhood notes and agent bio
- Accessible viewing form that does not pretend to book an appointment
Responsive support
This template is built as a full page and adapts to desktop, tablet, and mobile widths. Use the live preview to check each viewport before you copy the code.
Template source
Copy the HTML below into your project. A short README in the template folder explains colors, content, and placeholder visuals.
<!--
Keystone — Residential real estate landing page
See README.md in this folder for usage, colors, content, and placeholder visuals.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Keystone — Homes with a clear brief</title>
<meta name="description" content="Keystone is a residential brokerage landing page with featured homes, a neighborhood note, and a viewing request form.">
<style>
:root {
--bg: #f5f2ec;
--ink: #1b2420;
--muted: #5a635c;
--card: #fff;
--line: #ddd6c8;
--accent: #1d4a3a;
--accent-dark: #133328;
--clay: #c46a3a;
--radius: 12px;
--font: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
--ui: "Avenir Next", "Segoe UI", sans-serif;
--max: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--ui); line-height: 1.55; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
.skip-link { position: absolute; left: 1rem; top: -40px; background: var(--ink); color: #fff; padding: 0.5rem 0.75rem; z-index: 20; }
.skip-link:focus { top: 1rem; }
.wrap { width: min(var(--max), calc(100% - 2rem)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(245,242,236,0.94); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 1rem; }
.logo { text-decoration: none; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.86rem; }
.nav-links { display: flex; align-items: center; gap: 1.2rem; }
.nav-links a:not(.btn) { text-decoration: none; color: var(--muted); }
.nav-toggle { display: none; border: 1px solid var(--line); background: var(--card); border-radius: 6px; padding: 0.45rem 0.7rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; padding: 0.75rem 1.1rem; text-decoration: none; font-weight: 700; cursor: pointer; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost { background: transparent; border: 1px solid var(--ink); }
.hero { padding: 4.2rem 0 3rem; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.2rem; align-items: center; }
.eyebrow { color: var(--clay); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.76rem; margin: 0 0 0.8rem; }
h1, h2, h3 { font-family: var(--font); letter-spacing: -0.03em; line-height: 1.15; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 0.7rem; }
h3 { font-size: 1.2rem; margin: 0 0 0.35rem; }
.lede { font-size: 1.1rem; color: var(--muted); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.facade { min-height: 260px; border-radius: 8px; background: linear-gradient(180deg, #d7cbb8, #1d4a3a 90%); border: 1px solid var(--line); }
section { padding: 3.2rem 0; }
.homes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.4rem; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.card, .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem; }
.mass { height: 130px; border-radius: 6px; margin-bottom: 0.9rem; }
.mass.a { background: linear-gradient(160deg, #c46a3a, #f5f2ec); }
.mass.b { background: linear-gradient(160deg, #1d4a3a, #d7cbb8); }
.mass.c { background: linear-gradient(160deg, #1b2420, #c46a3a); }
.price { font-weight: 800; color: var(--accent); }
form { display: grid; gap: 0.85rem; }
label { font-weight: 600; font-size: 0.92rem; }
input, select, textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0.75rem 0.9rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.form-status { min-height: 1.4em; color: var(--muted); }
.site-footer { border-top: 1px solid var(--line); padding: 2.2rem 0; color: var(--muted); }
.footer-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 860px) {
.hero, .homes, .facts, .form-row { grid-template-columns: 1fr; }
.nav-toggle { display: inline-flex; }
.nav-links { display: none; position: absolute; left: 1rem; right: 1rem; top: 74px; background: var(--card); border: 1px solid var(--line); padding: 1rem; flex-direction: column; align-items: flex-start; }
.nav-links.is-open { display: flex; }
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="site-header">
<div class="wrap nav">
<a class="logo" href="#top">Keystone</a>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav">Menu</button>
<nav id="site-nav" class="nav-links" aria-label="Primary">
<a href="#homes">Homes</a>
<a href="#area">Neighborhood</a>
<a href="#agent">Agent</a>
<a class="btn btn-primary" href="#viewing">Request a viewing</a>
</nav>
</div>
</header>
<main id="main">
<section class="wrap hero" id="top">
<div>
<p class="eyebrow">Residential brokerage · Portland</p>
<h1>Houses with a brief, not a slogan.</h1>
<p class="lede">Keystone lists a few homes at a time. Light, street, and what the last owner actually used the rooms for. This free page is a starting point you can restyle.</p>
<div class="hero-actions">
<a class="btn btn-primary" href="#homes">Current listings</a>
<a class="btn btn-ghost" href="#viewing">Plan a viewing</a>
</div>
</div>
<div class="facade" role="img" aria-label="Placeholder for a house photograph."></div>
</section>
<section class="wrap" id="homes" aria-labelledby="homes-heading">
<h2 id="homes-heading">On the market</h2>
<p class="lede">CSS volumes stand in for listing photos. Swap them for your own with short alt text.</p>
<div class="homes">
<article class="card"><div class="mass a" aria-hidden="true"></div><h3>412 Splinter</h3><p>4 bed · garden · 1928</p><p class="price">$890,000</p></article>
<article class="card"><div class="mass b" aria-hidden="true"></div><h3>18 Fern Court</h3><p>2 bed · top floor · light</p><p class="price">$540,000</p></article>
<article class="card"><div class="mass c" aria-hidden="true"></div><h3>The warehouse loft</h3><p>Open plan · parking · 1 bath</p><p class="price">$720,000</p></article>
</div>
</section>
<section class="wrap" id="area" aria-labelledby="area-heading">
<h2 id="area-heading">The neighborhood, without the brochure</h2>
<div class="facts">
<article class="panel"><h3>Walk</h3><p>Bakery, river path, and a bookstore that still writes paper receipts.</p></article>
<article class="panel"><h3>School run</h3><p>Two blocks to the elementary. The high school is a short bike.</p></article>
</div>
</section>
<section class="wrap" id="agent" aria-labelledby="agent-heading">
<h2 id="agent-heading">Your agent</h2>
<article class="panel">
<h3>Rowan Hale</h3>
<p>Sells fewer homes on purpose. Will tell you if a house is noisy, dark, or priced for a bidding war you should skip.</p>
</article>
</section>
<section class="wrap" id="viewing" aria-labelledby="viewing-heading">
<h2 id="viewing-heading">Request a viewing</h2>
<p class="lede">This demo form does not book a real appointment. Connect it to your CRM or email before you publish.</p>
<form id="viewing-form" class="panel" style="margin-top:1.2rem;">
<div class="form-row">
<div><label for="name">Name</label><input id="name" name="name" type="text" autocomplete="name" required></div>
<div><label for="email">Email</label><input id="email" name="email" type="email" autocomplete="email" required></div>
</div>
<div>
<label for="home">Home</label>
<select id="home" name="home"><option>412 Splinter</option><option>18 Fern Court</option><option>The warehouse loft</option><option>Not sure yet</option></select>
</div>
<div><label for="note">Timing or questions</label><textarea id="note" name="note" rows="3"></textarea></div>
<button class="btn btn-primary" type="submit">Request a viewing</button>
<p class="form-status" id="viewing-status" role="status" aria-live="polite"></p>
</form>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-row">
<p>© <span id="year"></span> Keystone. Real estate template by Designyff. Sample prices only.</p>
<p><a href="#top">Back to top</a></p>
</div>
</footer>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
const toggle = document.querySelector('.nav-toggle');
const nav = document.getElementById('site-nav');
toggle.addEventListener('click', () => { const open = toggle.getAttribute('aria-expanded') === 'true'; toggle.setAttribute('aria-expanded', String(!open)); nav.classList.toggle('is-open', !open); });
const form = document.getElementById('viewing-form');
const status = document.getElementById('viewing-status');
form.addEventListener('submit', (event) => { event.preventDefault(); status.textContent = 'This demo form does not send data. Connect it to your CRM or email.'; form.reset(); });
</script>
</body>
</html>
Related templates
Meridian Private Office
A quiet private-wealth page on paper and navy, with household figures, a mandate reel, and a referral introduction form.
Wellness Studio
A calm yoga and breathwork studio page with a weekly schedule, teachers, and a trial class form.