Meridian Estates
A refined HTML5 template for real estate agencies, brokerages and property portfolios.
About this theme
Meridian is a full website template built for real estate agencies and independent brokers. It includes a two-column hero with a live-feeling property search bar, a featured-listings grid, a numbered value-proposition section, a neighborhood directory, a solid-color stats band, agent profile cards, an about/story section with a pull-quote panel, testimonials, and a contact/viewing-request form. Built with plain HTML, CSS and vanilla JavaScript — no build step, no framework dependency. Fully responsive, with a built-in dark mode toggle (persisted per visitor) and smooth scroll-reveal animations. Ships with real, licensed photography (not placeholder gray boxes) for every listing, agent portrait and the hero image, so the demo looks like a real working site out of the box — all easily replaceable with your own property photos. Deliberately restrained visual language — a single bronze accent color, no gradients, no decorative icon sets, numbered indices instead of icon glyphs.
Platform compatibility
| Edition | Responsive | RTL | Translation-ready | Dark mode | Version |
|---|---|---|---|---|---|
| HTML5 | ✓ | — | — | ✓ | 1.0.0 |
Documentation
What's included
Meridian ships as plain HTML, CSS and vanilla JavaScript — no build tools, no framework, no dependencies to install. Unzip and open `index.html` directly, or upload the files to any static host. **Sections included:** - Two-column hero with a property search bar (location, type, budget) and a featured-property image - Featured-in press strip - Featured listings grid — 6 property cards with real photography, price, address and bed/bath/sqft meta - Numbered value-proposition section (4 reasons to work with the agency, index-style layout — no icon set) - Neighborhood directory grid, numbered - Solid-color stats band (properties sold, years in business, satisfaction, team size) - Agent profile cards with real portrait photography - About/story section with a pull-quote panel and a facts panel - Testimonials - Contact / book-a-viewing form (front-end markup only — wire up your own form handler or endpoint) - Footer with social links **Built-in features:** - Dark mode toggle, persisted per visitor via `localStorage` - Scroll-reveal animations using `IntersectionObserver`, with a no-JS fallback that shows all content immediately - Fully responsive from 375px mobile through wide desktop - Mobile navigation drawer - Real, licensed demo photography throughout (hero, all 6 listings, 3 agent portraits, about section) — not gray placeholder boxes — so the template looks like a finished site out of the box Color and type are controlled from CSS custom properties at the top of `assets/css/styles.css` — change the single accent color there to retheme the whole site.
Customization guide
**Accent color** — open `assets/css/styles.css` and edit the `--accent` custom property near the top of the file. Every price, link, numbered index and the stats band read from this single variable, so one edit reskins the whole site. **Replacing listing photos** — each property card is a plain `<img>` inside `.listing-thumb`; swap the `src` for your own listing photography. The hero panel and about-section photo work the same way. **Editing listings** — property price, address and bed/bath/sqft details live directly in `index.html` next to each `.listing-card`; there is no data file or templating layer to sync. **Agent profiles** — each `.agent-card` pairs a circular portrait photo with a name, role and contact line. Swap the portrait image and edit the text directly. **Search form** — the location/type/budget search bar in the hero is front-end markup only; it currently scrolls to the listings section on submit. Wire it up to a real search endpoint or filtering script for a live site. **Contact form** — point the form's `action` attribute at your own form-handling endpoint (e.g. Formspree, a serverless function, or your own backend) and add a `name` attribute to each field per that service's requirements. **Dark mode** — controlled by a `data-theme="dark"` attribute on `<html>`, toggled by `assets/js/main.js` and persisted to `localStorage`. Text colors that sit on colored panels (value props, stats band, about facts) are defined as `--c-block-text`/`--c-block-text-muted` tokens, redefined under `[data-theme="dark"]`, so retheming stays contrast-safe. **Fonts** — Newsreader (headings) and Inter (body) are loaded from Google Fonts in the `<head>`. Swap the `<link>` tag and the `--font-display`/`--font-body` variables to change typefaces. **Image licensing** — the demo photography bundled with this template is used under a free commercial-use license (no attribution required). Replace it with your own property and team photography before using this as a live site.
Reviews
No reviews yet — be the first to share your experience.
Related themes
