Holt documentation.

Introduction

Thank you for purchasing Holt, a modern real estate HTML template with six homepage layouts and nineteen inner pages. It is written in plain HTML5, one CSS file and one vanilla JavaScript file. There is no jQuery, no framework and no build step to run.

• 6 homepage layouts, 19 inner pages (25 pages in total)
• Three colour themes (cobalt, forest, ink) driven by CSS variables
• Live filters, sorting, map pins, mortgage calculator, valuation wizard, lightbox, favourites and accordions
• Fully responsive (320 – 1920 px), accessible and tested in current Chrome, Firefox, Safari and Edge

The demo photographs are not included in the download. Every image in the package is a labelled grey placeholder with the correct proportions, so you can swap in your own photography.

Package contents

Holt/
├─ template/               ← upload these files to your server
│  ├─ index.html           Home 1 (Signature)
│  ├─ home-2.html … home-6.html
│  ├─ listings.html, listings-list.html, listings-map.html
│  ├─ property.html, developments.html, development.html
│  ├─ agents.html, agent.html, about.html, careers.html
│  ├─ sell.html, mortgage.html, market.html
│  ├─ journal.html, journal-post.html, contact.html, faq.html
│  ├─ account.html, 404.html
│  └─ assets/
│     ├─ css/style.css     one stylesheet, 24 commented sections
│     ├─ js/main.js        one script, 15 commented modules
│     ├─ fonts/            self-hosted WOFF files
│     ├─ images/           placeholders, favicon, touch icon
│     └─ php/mail.php      optional contact-form handler
├─ documentation/          this file
├─ licenses/               font licences
├─ README.txt
└─ CHANGELOG.txt

Getting started

1. Copy the contents of template/ to your web server (or open index.html locally).
2. Replace the placeholders in assets/images/photos/ with your own images. Keep the file names or update the src attributes.
3. Edit the text directly in the HTML files. Every page is plain, readable markup.
4. Update the logo (.hd__logo in the header), contact details in the footer and the page <title> and meta description.

Serve the site over http(s) when possible. Some browsers restrict web fonts and localStorage on file://.

Pages

Colours and themes

All colours live in the :root block at the top of style.css (section 02):

--cb:#2338F5;   /* primary cobalt */
--lime:#D2FF5C; /* accent */
--bone:#F1EFE8; /* page background */
--ink:#070B24;  /* text / dark */
--forest:#0F2E22;

Change a value and every page updates. Add theme-forest or theme-ink to the <body> class to switch an entire page to a dark theme. Add hd-dark to the body when the page starts with a dark hero so the transparent header uses light text.

Typography

Three families are self-hosted in assets/fonts/: Inter / Inter Display for text and headlines, Caladea Italic for the serif accent inside <em>, and DejaVu Sans Mono for small labels. Change the three --f-* variables to use other fonts. Headline accents are made by wrapping a word in <em>.

Images and the duotone effect

Photographs are shown in a cobalt duotone and turn to full colour on hover, following the cursor. This is done with an SVG filter (#duo, and #duog for green) that is embedded at the top of each page, plus a second layer with the original colour image.

<a class="ph r-4x5" href="property.html">
  <img src="assets/images/photos/house.jpg" alt="…">
  <span class="c" style="background-image:url(assets/images/photos/house.jpg)"></span>
</a>

Use both the img and the .c background with the same file. To show an image in colour only, add ph--full. Ratios: r-1x1, r-4x5, r-3x4, r-4x3, r-3x2, r-16x9, r-21x9. Recommended photo width is 1600 px at JPEG quality 75–80.

Sentence search

On Home 1 the search is a sentence. Each .sel is a custom select with a data-name (the query-string key). Choosing options updates the “matching” button link, for example listings.html?type=House&area=Hillcrest&beds=3&max=1500000. listings.html reads those parameters on load and filters the results. To use a real back end, replace the query string with your own endpoint.

Listings, filters and sorting

Each result is an <article class="hm"> with data attributes: data-price, data-beds, data-type, data-area, data-size and data-tags (space-separated features). The filter bar, sidebar checkboxes, price slider, sort select and grid/list toggle all work on these attributes in the browser. Add a listing by copying a card and editing the values.

Maps

The maps are generated SVG contour maps with absolutely-positioned pins (.pin) placed by percentage (left / top). Hovering a pin or a list row with the same data-k highlights both and updates the preview card. To use a real map, replace the .map element with Leaflet, Mapbox or Google Maps and keep the surrounding layout.

JavaScript modules

assets/js/main.js is divided into numbered sections: header and mobile menu, scroll reveal and counters, parallax, image hover, sentence search, film carousel, hero slideshow, listings filter, favourites, tabs and accordion, lightbox, mortgage calculator, forms and wizard, map pins and small helpers. Useful attributes:

Forms

Forms validate in the browser and show a success message but do not send data. To send email, upload assets/php/mail.php to a PHP host, set the recipient address and replace the demo submit handler (the “forms” module in main.js) with a fetch() POST to it. You can also point the form action to a service such as Formspree.

Saved homes

The heart button on each card stores the home id in localStorage under holt-fav and updates the counter in the header. Connect it to your own accounts system if required.

Responsive behaviour

Breakpoints are 1280, 1100, 800 and 560 px (end of style.css). Below 1100 px the navigation becomes a full-screen menu. The template was checked for horizontal overflow at 320, 375, 600, 768, 1024, 1280 and 1920 px.

Accessibility and performance

• Skip link, landmarks, visible focus styles, labelled form controls and ARIA for tabs, dialogs and the carousel.
• prefers-reduced-motion disables animations.
• Images have explicit width and height and are lazy-loaded below the fold.
• Fonts are subset WOFF files with font-display: swap.

Browser support

Current versions of Chrome, Edge, Firefox and Safari. The header button colour on lime hero pages uses the CSS :has() selector, which degrades gracefully in older browsers.

Credits and licences

• Inter – SIL Open Font License 1.1
• Caladea – Apache License 2.0
• DejaVu Sans Mono – Bitstream Vera / DejaVu licence
• Icons, contour maps, charts and the logo are original SVG created for this template.
• Photographs in the live preview are licensed from Unsplash and are not included in the download. Placeholders are provided instead.

Licence texts are in the licenses/ folder.

Changelog

1.0.0 – Initial release: 6 homepages, 19 inner pages, three themes, filters, calculator, wizard, lightbox, favourites and documentation.