Avava Realestate HTML Template

AVAVA Real Estate – Private Brokerage HTML Template

A light, editorial HTML template for a private real-estate brokerage, with a complete dark theme built in. 70 hand-built pages, one stylesheet, one script, no build step and no framework to learn — open a file, edit it, upload it. The design is built on one idea: a brokerage that shows its working. Surveys are published, answering times are counted, the advisor's desk is visible, and the journal prints the desk's own mistakes beside its advice.

What you get

• 2 homepages — the same page with two hero treatments, each with its own light and dark photography and a mobile version of every image.
• 5 listing card styles — standard, overlay, docket, framed and survey-led — each documented on its own page so you can pick the card that fits your stock.
• 10 search views — five grid and list views, a search with a left sidebar, one with a right sidebar, and three map searches with a live map beside the results. Filters, sorting, view switching and pagination all run in the browser.
• 6 property detail layouts — the home as a drawing sheet, a sticky-sidebar version, a thumbnail rail, a plate-by-plate version, and a day-by-day history with a photo viewer. Viewing dockets, room plans, monthly cost breakdowns, building and document sections and question forms included.
• 9 buyer dashboard screens — overview, saved properties, saved searches, viewings, price alerts, messages, documents, sell my home (a five-step form with a map) and profile and settings.
• 14 advisor dashboard screens — overview, today, your buyers, listings, add a home (six steps), price moves, viewings calendar, availability, reports, documents, messages, public page, pledge, and profile and settings. Every screen shares one sticky rail, and the filters, toggles, counters and forms on each of them work.
• 4 journal layouts — a classic three-column journal with sticky rails and additive filters, a masthead version with a reading queue, a typographic index with a questions rail, and a photograph-free version with full-text search.
• 4 article layouts — a long read with letters and a reply form, the same article in a second frame, a broadsheet with two text columns and ordinary comments, and a four-chapter version with a sortable comment thread.
• 16 content and tool pages — about, agents, agent profile, team, services, pricing, mortgage calculator, home loan process, compare, careers, free agent account, FAQ, contact with a live map, 404, a full style guide and an empty starter page.

Light and dark

The dark theme is not an afterthought. Every colour is a CSS custom property declared twice — once for light, once for dark — so a colour you change once is right in both. The moon and sun button in the header switches the theme and remembers the visitor's choice; the page never flashes on load. Photographs stay the same, plates and cards repaint, and the homepage hero has its own dark image.

Built to be edited

• Vanilla JavaScript. No jQuery, no Bootstrap, no npm install, no bundler. Every behaviour is an independent, commented block in one main.js. A block runs only on pages that have its markup, and you can delete any block you do not need.
• One stylesheet in numbered sections with a table of contents at the top. Colours, sizes and radii come from custom properties; change the palette in one block and the whole site follows.
• Maps on 12 pages, drawn with Leaflet and free OpenStreetMap tiles — no API key, no account. Change a location by editing the coordinates on the map element. The scroll wheel zooms the map only after a click, so the page keeps scrolling.
• Progressive enhancement. Every page renders, reads and navigates with JavaScript switched off. The mobile menu is pure CSS.
• Valid, semantic HTML5 — one main heading per page, real navigation elements, real tables for tabular data, labelled forms, skip links and ARIA where it earns its place. Zero errors on the W3C markup and CSS validators, no inline styles, no console errors.

Responsive and accessible

Tested from a 320px phone to a 2560px display in current Chrome, Firefox, Safari and Edge, with no horizontal scrolling at any width. Sizes are fluid, so there is no fixed maximum width. Sticky rails become ordinary blocks on phones, grids collapse in order, tables turn into cards, and everything the desktop reveals on hover is shown permanently on touch screens. Nothing is set smaller than 12px, and text contrast holds in both themes.

Working tools, not screenshots

The six mortgage calculators, the compare bench, the price simulators, the listing filters and pagination, the dashboard filters and toggles, the journal search and comment sorting, the letter and comment forms and the maps all actually run in the browser. Forms confirm in place; connect them to your own endpoint by changing the form action and removing one line in the script.

Documentation

A step-by-step HTML manual with screenshots is included: getting started, file structure, a list of every page, the anatomy of a page, editing menus, logo and favicon, colours and the dark theme, swapping fonts, replacing images with a table of every image and its exact size, editing text and cards, the footer, connecting forms, the maps, every JavaScript feature, responsive behaviour, SEO, publishing to your host, and the licence behind every asset.

Images

The homepage hero images and the small round avatars are included and licensed to you with the template. All other imagery is supplied as striped placeholders drawn at the exact size the layout expects, with that size and the file name printed on each one — drop your own photography in under the same name and nothing shifts. Every demo name, address, price and figure is fictional.

Not included

This is an HTML template: there is no back end, no database and no CMS. Map tiles, the Leaflet library and the three Google Fonts are the only things loaded from the network at run time.