AVAVA Estates is a complete front end for a real-estate agency, a broker or a property portal: 68 hand-coded pages covering the whole journey — search, the property, the agent, the mortgage, the buyer's account and the agent's desk. Built with plain HTML5, CSS3 and vanilla JavaScript: no jQuery, no Bootstrap, no npm, no build step. Open index.html and start editing.

Filters, view switches, calculators and dashboard actions all work in the browser, so your client can click through a working demo before any back-end code is written.

What's inside

3 home pages

• Three hero layouts with full-width photo slides.

Listings — 16 layouts

• Grids: grid of four, grid of five, filter sidebar with three or four across, masonry wall
• Lists: full-width rows, rows with a filter rail, compact rows, portrait cards, and a three-view switcher (rows / cards / map)
• Maps: half map, map listing, map with a slide-out drawer, map overhead, a full-screen search workspace and a blueprint-style view — on live OpenStreetMap maps

Property registers — 7 pages

• All properties
• Homes for sale
• For rent
• New builds
• Commercial
• Land & plots
• Recently sold

Property detail — 5 layouts

• Gallery, key facts, floor plan, documents, price history, mortgage estimate, agent card and viewing request.

Buyer dashboard — 9 screens

• Overview
• Saved properties
• Saved searches
• Price alerts
• Viewing requests
• Messages
• Documents
• Sell my home
• Profile & settings

Agent dashboard — 10 screens

• Agent desk
• My listings
• Add a property
• Enquiries
• Viewings
• Clients
• Offers
• Messages
• Performance
• Desk settings

Journal — 4 pages

• Two list layouts and two article layouts.

Content & tools

• About
• Agent list
• Agent profile
• Create a free agent account
• Pricing
• Compare properties
• Mortgage calculator
• Home loan process
• Careers
• Coming soon
• FAQ
• Contacts with map
• Style guide
• 404

Features

• Live Leaflet + OpenStreetMap maps — no API key, no billing account; the library ships inside the package
• Mortgage calculator that really computes the monthly payment, plus a step-by-step home-loan guide
• Property comparison side by side
• Three-view switcher — the same results as rows, cards or a map
• Working filters, sorting and pagination on the listing pages
• Style guide page showing every colour, type size and component in the system
• Blueprint-style placeholders drawn at the exact size each slot expects, with the size printed on them — drop in your photos and nothing shifts
• Fully responsive — tested on desktop, tablet and phone
• Accessible — skip link, landmarks, labelled forms, visible keyboard focus, reduced-motion support
• Valid HTML and CSS, clean and commented code: one stylesheet in numbered sections, one script in numbered blocks
• Fast — no framework, self-hosted map library, only Google Fonts and map tiles load from the internet

Package contents

• Template/ — all 68 HTML pages with CSS, JavaScript, images, fonts and Leaflet
• documents/ — step-by-step documentation: getting started, file structure, colours, fonts, images, editing content, JavaScript features, validation, browser support and licences

Technical details

• HTML5, CSS3 (custom properties, grid, flexbox), vanilla JavaScript
• Leaflet 1.9.4 (included)
• Google Fonts: Instrument Serif, Manrope; BBH Bartle wordmark face (included)
• Browsers: latest Chrome, Firefox, Safari, Edge; iOS Safari and Chrome for Android

Images

The hero slides and the portrait avatars are included and may be used in any site you build with this template, commercially or not, with no attribution. Property, city, agent, plan and article images are sized placeholders for your own photography.

Please note

This is an HTML template. Forms and dashboards work in the browser but do not send data — connect them to your own back end or a form service. Addresses, agents and figures in the demo are fictional.