A real estate HTML template for agencies, single agents and new developments. Every home sits on an illustrated city map: twelve home pages, six one-page sites and 68 inner pages with film heroes, hero sliders, map search, filters, property pages, floor plans and calculators. Light and dark themes, six map colour skins, a right-to-left version and a bonus UI Kit with SCSS sources are included.

This is a front-end HTML template with sample listings. It has no database, admin panel or property feed: filters, the map search, saved homes and the calculators work in the browser on the homes written in the pages.

Who is it for

• Real estate agencies and brokers
• Independent agents who want their own site
• Developers selling a new building off-plan
• Rental and property management companies
• A single home for sale with its own one-page site

Included pages

• Home pages: Atlas (illustrated map hero), Street view (photo slides and search bar), Private office (luxury, night hero, horizontal villa gallery), Rentals, New development, Agent, Film from above (aerial film with map pins), Card stack (swipeable featured homes), Split slider (neighbourhoods), House window (a film in a house shape that opens on scroll), Holiday lets (thumbnail slider and stay search), Commercial (moving rows of offices and shops)
• One-page sites: Agency, Single property, Development, Agent, Film, Holiday home
• Search and listings: grid, list and map views, photo grid, luxury homes, commercial spaces, holiday lets, land and plots, homes to rent, recently sold, new homes, development, compare, saved homes, search results, price map, commute search
• Property pages: house for sale, villa with a dark hero, flat to rent, film tour with a room panorama, photo slider, office space, building plot, holiday let with a booking calendar, open houses
• Areas and agency: neighbourhoods map, area guide, about, agents, two agent profiles, offices, partners, press, careers, job opening, contact
• Services: services, sell, buy, valuation, mortgage calculator, buying costs, investors with a yield calculator, landlords, list your home (4 steps), fees and plans, relocation
• Journal and more: two journal layouts, two article layouts, market report, video tours, gallery, sliders, questions, reviews, sign in, create account, account (front end only), 404, coming soon, maintenance, thank you, privacy, terms

Maps and search

• Illustrated city map drawn for the template, coloured by the active skin, no API key and no map service
• Map search with Leaflet: price pins, popups with a photo, list and map in sync, search as I move the map
• Filters for area, type, price range, bedrooms and features, with chips, sorting and an empty state
• Links such as listings.html?area=foz open the page with filters set
• Saved homes kept in the browser and a side-by-side compare table

Property and development pages

• Photo mosaic with a keyboard-friendly lightbox
• Two-floor plans with room highlights and floor tabs
• Key facts, features, energy rating, price history and nearby places
• Mortgage calculator, viewing booking card and a sticky price bar
• Floor picker with a unit table, status filter and build progress

Interactions and animations

• Map pins that drop in and streets that draw themselves on the home page
• Page transition: a pin-coloured circle grows from the click and shrinks into a pin on the next page
• Headings that rise word by word, sections that reveal, counters, parallax photos
• Background films that play only while on screen, with a pause button and a still poster when motion is off
• Hero sliders: card stack you can drag, split slider, thumbnail slider, moving card rows
• Before and after slider, room panorama, review slider, snap sliders
• Pinned horizontal villa gallery, photo slides, card photo carousels, magnetic buttons
• Reduced motion mode that removes every effect

Design and settings

• Light and dark themes plus an automatic mode
• 6 map colour skins: Porto, Copenhagen, Marrakesh, Kyoto, Oslo and Havana
• Appearance panel inside the menu: theme, skin, motion and text direction
• Right-to-left copy of every page
• Bricolage Grotesque and Geist Mono fonts, self-hosted

Bonus UI Kit

• 30 examples: listing cards, price tags, map pins, key facts, search bar, energy scale, agent card, buttons, badges, form fields, chips, cards, fee plans, numbers, table, timeline, accordion, tabs, alerts, toast, dialog and navigation
• Plain HTML and CSS with SCSS sources; every class starts with av-, so it works next to other frameworks
• Light and dark themes, 6 accents and three corner styles
• An overview page with code to copy

Technical

• HTML5, CSS3 and plain JavaScript, no build step, no jQuery
• Leaflet 1.9.4 (BSD-2-Clause) for the map search and Lenis 1.3.27 (MIT) for smooth scrolling
• PHP form mailer for every form: spam trap, phone-only call-back forms, optional reCAPTCHA v3
• Clean, indented and commented code
• Responsive WebP images with srcset and lazy loading
• Keyboard friendly, skip link and visible focus; tested with axe in both themes

Images

The photos and films in the live preview are for preview only and are not included in the download. The download contains placeholder images with the same file names and sizes and short placeholder films, so the layout stays the same until you add your own photos and films. The agency, agents, homes, prices and reviews in the demo are fictional, and the city map shows an imaginary city.

Documentation

A documentation site with search is included: getting started, setup, customization and map skins, page structure, motion, films and sliders, listings and filters, maps (and how to draw your own city), developments, one-page sites, forms and reCAPTCHA, right to left, UI Kit, troubleshooting, credits and changelog.

Changelog

Version 1.0.0 (2026-11-02)

Added

• First release: 12 home pages (Atlas, Street view, Private office, Rentals, New development, Agent, Film from above, Card stack, Split slider, House window, Holiday lets, Commercial), 6 one-page sites and 68 inner pages, plus a demo overview page.
• Film heroes with a pause button and hero sliders: card stack, split slider, thumbnail slider and moving rows.
• Holiday lets with a booking calendar, commercial spaces with a before and after slider, land and plots, open houses, price map, commute search, buying-cost and rental yield calculators, a 4-step listing form, video tours with chapters, a room panorama and a filterable gallery.
• Illustrated city map with 6 colour skins, shown with Leaflet for the map search: price pins, popups, search as I move the map and small maps on property and area pages.
• Filters, sorting and active filter chips; grid, list and map views; saved homes and side-by-side compare.
• Property pages with a photo lightbox, two-floor plans, energy rating, price history, mortgage calculator and a viewing booking card.
• New development pages with a floor picker, unit table and build progress.
• Valuation wizard, mortgage and affordability calculators, fee plans, market report with charts.
• Light and dark themes, motion switch, page transitions and scroll motion.
• Right-to-left copy of every page.
• PHP form mailer for all forms, with a spam trap and optional reCAPTCHA v3.
• Bonus UI Kit: 30 component examples with SCSS sources, light and dark themes and 6 accents.
• Documentation with search and copyable code.