Meridia — Luxury Real Estate HTML Template

Meridia is a five-page luxury real estate website template for private advisories, boutique brokerages, and single-firm practices representing architecturally significant homes. It leans on a cinematic full-bleed hero, a navy-and-brass palette, and a Cormorant Garamond display serif paired with Inter — built for firms that want to feel established and unrushed rather than loud.

The home page uses a composition most restaurant and SaaS templates skip: a full-height cinematic hero with an overlaid editorial headline, a secondary metadata column (active listings, portfolio, advisors), and a subtle brass accent line framing each section. Below, a three-up featured listings strip uses classic card composition with a badge system (New / For sale / Pending / Off-market), followed by a dark stats band, a two-column editorial advisory section, a center-aligned testimonial on cream, and a closing CTA on deep navy with a brass radial glow.

What's included

• Home — cinematic hero, featured listings, stats band, editorial two-column advisor section, client testimonial, closing CTA.
• Listings — filter bar (location, type, min price, bedrooms, keyword), 9-listing grid, toolbar with sort, and numeric pagination.
• Property single — breadcrumb, title, price row, five-image gallery grid, overview copy, features list, sticky agent card with inquiry form, related properties band.
• About — firm story, four-partner team grid with region labels, pull-quote testimonial, CTA band.
• Contact — three office cards (SF, Mill Valley, St. Helena), sidebar with phone/hours, full contact form with interest and region selects.

Design details

Palette: off-white #f5f3ee background, deep navy #1a2139 ink, brass #b59553 accent, cream #fbf9f2 surfaces on dark sections. Typography pairs Cormorant Garamond (300/400/italic) with Inter (400/500/600). Buttons use narrow letter-spacing uppercase labels and 2px corner radius for a deliberately architectural feel.

The header swaps styles depending on page — transparent over the cinematic hero, solid off-white on interior pages. Every surface has intentional hover, focus, and active states. Keyboard navigation and reduced-motion preferences are respected.

Use cases

Boutique real estate firms, private advisories, single-agent practices, architecture-led brokerages, estate and trust transaction specialists, luxury property marketing, or any hospitality-adjacent real estate brand that wants a calmer, more editorial feel than the typical "big red CTA" real estate template.

Tech

Vanilla HTML, CSS, and JavaScript. No build step, no framework. Google Fonts via preconnect. All images are labeled SVG placeholders under assets/img/ with HTML comments showing exact recommended dimensions.