Avava is a complete front end for a private real-estate brokerage or agency: 70 hand-coded pages in two themes — light and dark, switched with one click in the header. Search, the property, the agent, the mortgage, the buyer's account and the agent's desk are all here. Built with plain HTML5, CSS3 and vanilla JavaScript: no jQuery, no Bootstrap, no npm, no build step. Open index.html and start editing.

Light and dark, built in

• A moon / sun button in the header switches every page between the warm paper light theme and the deep dark theme
• The visitor's choice is remembered and carried from page to page, and the page opens in the right theme with no flash
• Both themes run on the same colour tokens — change a value once in style.css and both follow
• The home hero has its own photograph for each theme, and only the active theme's picture is downloaded
• Want only one? Make dark the default or remove the toggle — explained step by step in the documentation

What's inside

2 home pages

Listings

• 5 card styles — standard, overlay, docket, framed and survey-led, each on its own showcase page
• 10 search views — five grid layouts, grid with a left or right filter sidebar, and three map views on live OpenStreetMap maps
• Working filters, sorting, grid / list switch and pagination

Property detail — 6 layouts

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

Buyer dashboard — 9 screens

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

Agent dashboard — 14 screens

• Overview
• Today
• Buyers
• Listings
• Add a home
• Price moves
• Viewings
• Availability
• Reports
• Documents
• Messages
• Public page
• Pledge
• Profile & settings

Journal — 8 pages

• Four list layouts (one without photographs) and four article layouts, with filters, pagination and comment sorting.

Company & tools

• About
• Agents
• Agent profile
• Our team
• Services
• Pricing
• Mortgage calculator
• Home loan process
• Compare homes
• Careers
• Free agent account
• FAQ
• Contact with live map
• Style guide
• 404
• Blank starter page

Features

• Light and dark themes on every one of the 70 pages
• Six working mortgage calculators, a step-by-step home-loan guide and a side-by-side home comparison
• Live Leaflet + OpenStreetMap maps — no API key, no billing account; the library ships inside the package
• Style guide page showing every colour, type size and component, plus a blank page to start new ones from
• Sized placeholders — every photo slot prints its exact size and file name, so you know what to prepare and never touch the HTML
• Fully responsive from 320px phones to 2560px displays; tables turn into cards and sticky rails into blocks on phones
• Accessible and semantic — one h1 per page, landmarks, labelled forms, alt text and explicit image sizes
• Valid HTML and CSS — zero errors on the W3C validators
• Clean, commented code — one stylesheet with a numbered table of contents, one script in independent blocks you can delete
• Works without JavaScript — every page still renders with all its content visible

Package contents

• Template/ — all 70 HTML pages with CSS, JavaScript, images and Leaflet
• Documentation/ — step-by-step guide with screenshots: getting started, files, every page, navigation, logo, colours and dark theme, fonts, images, forms, maps, JavaScript, responsive behaviour, SEO, publishing and licences

Technical details

• HTML5, CSS3 (custom properties, grid, flexbox), vanilla JavaScript
• Leaflet 1.9.4 (included)
• Google Fonts: Playfair Display, DM Sans, IBM Plex Mono
• Browsers: latest Chrome, Firefox, Safari, Edge; iOS Safari and Chrome for Android

Images

The home-page hero photographs (light and dark) and the avatars are included and may be used with the template. All other photo slots 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. Names, addresses and figures in the demo are fictional.