Thelmore - Architectural Real Estate Template

Thelmore is a real estate template for a small register of houses rather than a high street window full of them. It suits an agency that sells fewer properties and says more about each one: who designed it, when it was built, what has been altered since.

It is plain HTML, CSS and JavaScript. Open index.html and it works. No build step, no npm install, no framework.

22 pages

Eleven in English, and the same eleven in Arabic.

Home. Index with filters, sorting and search. Property with a gallery, floor plan, full specification and an ownership timeline. Map with fourteen houses on a drawn map. Compare, up to three houses at once. Office with four agents. Agent profile. Journal and article. Dashboard. 404.

The Arabic version is real

The ar/ folder holds complete documents, not a translated layer. The stylesheet uses logical properties throughout, so there is no margin-left anywhere in the pack and the layout mirrors properly.

Arabic typography is handled on its own terms. No letter-spacing, because Arabic letters join and tracking breaks the joins. No italics, because Arabic has none. Prices and references are isolated so the numerals read correctly inside Arabic text. The floor plan uses a numbered drawing with the room names in HTML, because text baked into an SVG cannot be translated.

Twenty original drawings

Every illustration was drawn for this template. There is no stock photography, nothing to license, and nothing that expires. The whole pack is 567 KB and the home page loads in about 32 KB gzipped.

What it does

Filters for type, country, period and price. Four sort orders. Free text search that matches house names, towns, architects, agents, years, areas, prices and references.

All of it goes into the URL, so a filtered view can be linked or bookmarked:

listings.html?deal=let&country=it&sort=price-desc

Search suggestions read the register on the page, so adding a property makes it suggestible with no second list to maintain.

There is no select element in the pack. Native ones cannot be styled the same way across browsers, so each one is an ARIA listbox with full keyboard support.

Built properly

One h1 per page and no heading level skipped. Every control has a name, every image has alt text. Keyboard support throughout with visible focus rings. prefers-reduced-motion turns off every transition. Form validation is written in the page's own language, because browser messages follow the operating system and would put English text in the middle of an Arabic page.

Tested at every breakpoint from 1440px down to 390px.

Documentation

An 11 KB README covering the design tokens, how to add a property, how to change the accent colour, and what each behaviour does.

What it is not

An HTML template, not WordPress. The forms have no back end, so point them at Formspree, Basin or your own endpoint. The dashboard is an interface, not a working system.

All content is demo content. Phone numbers and emails ship as obvious placeholders so nothing real goes out by accident.

Features

• 22 pages, 11 in English and 11 in Arabic with full RTL support
• 20 original SVG drawings, no stock photography and nothing to license
• No framework, no build step and no dependencies
• Filters for type, country, period and price, with four sort orders
• Free text search across names, towns, architects, agents, years and prices
• Filter state written to the URL, so a view can be linked or bookmarked
• Custom ARIA listbox in place of every select element, keyboard operable
• Drawn map with fourteen markers and a side panel
• Compare up to three houses side by side
• Dashboard interface with a hand-drawn SVG chart
• One h1 per page, no heading level skipped, alt text on every image
• prefers-reduced-motion respected throughout
• Form validation written in the page's own language
• Tested from 1440px down to 390px
• 11 KB README covering tokens, editing and behaviour

Requirements

Any modern browser: Chrome, Edge, Firefox or Safari, current or previous version. iOS Safari and Chrome on Android are supported.

A text editor to edit the HTML and CSS. Nothing else is needed. 

There is no build step, no package manager and no server requirement.

An internet connection is used only to load the Google Fonts stylesheet.

The fonts can be bundled locally if the site must work offline.

Instructions

1. Unzip the download. Open index.html in a browser. The template runs as it is, with no build step.

2. Read README.md. It covers the design tokens, how to add a property, how    to change the accent colour and what each behaviour does.

3. Replace the placeholder contact details before publishing. Search the    folder for 000 and for example.com to find all of them.

4. Change the accent by editing one value, --brass, at the top of    assets/css/thelmore.css.

5. To add a property, copy an

block in    listings.html. The data attributes drive the filters.

6. The forms have no back end. Point them at Formspree, Basin or your own    endpoint.

7. Replace the og:image and og:url values with your own domain before    going live.