An architectural real estate and property exploration HTML5 template designed for luxury brokerages, independent real estate advisors, residential developers, and curated property portals.

Built with semantic HTML5, Tailwind CSS v4, and modular Vanilla JavaScript ES Modules, this template provides a multi-page property discovery, comparison, and inquiry experience that runs directly in modern web browsers without requiring a frontend framework or backend server.

Included Pages & Layouts

1. Home Flagship (index.html) — 10-section editorial landing page featuring a URL-synced search command bar, architectural typology bento grid, filterable signature portfolio, Residence of the Month feature spread, interactive micro-market telemetry switcher, acquisition intelligence bento, new development commissions, founding advisors showcase, collector acquisition ledger, and interactive FAQ.
2. Property Explorer (properties.html) — Split-screen discovery workspace pairing multi-criteria filtering (keyword, status, typology, neighborhood, maximum price, minimum bedrooms, and required amenities), custom keyboard-accessible dropdown menus, and sorting with a sticky interactive SVG parcel map and synchronized price pins.
3. Property Detail Dossier (property-detail.html) — Dynamic URL-driven property monograph (?id=est-101 through est-112) with a 5-plate editorial photo gallery, keyboard-accessible lightbox, interactive multi-level CAD floor plan viewer, real-time jumbo mortgage and carrying cost calculator, nearby landmarks index, and private viewing request form.
4. Saved Shortlist & Comparison (saved.html) — Persistent buyer shortlist backed by localStorage with private acquisition notes per property, side-by-side comparison matrix modal (compare up to 3 residences), and recorded demo tour and consultation receipts.
5. Advisors & Agency Monograph (agents.html) — Founding practice metrics, specialty filter bar, advisor directory cards, and interactive partner dossier modal.
6. Private Consultation & Valuation (contact.html) — Dynamic consultation intake form switching between Buyer Representation, Seller Property Valuation, and Studio Visit scheduling, alongside regional gallery cards.

Key Features & Technical Details

• Framework-Free Architecture — Authored in semantic HTML5, modern CSS (src/styles/main.css compiled to assets/css/styles.css), and native JavaScript ES Modules (assets/js/*.js).
• 4 Live Color Themes — Switch between Terracotta Cedar, Cypress Slate, Coastal Cobalt, and Obsidian Monochrome via CSS custom properties (data-accent attribute on <html>), with user preference saved in localStorage.
• Interactive Spatial Parcel Map — Custom zero-dependency SVG architectural map on the Property Explorer and Property Detail pages with price pin selection, hover synchronization between property cards and map markers, zoom controls, and an instant property preview card.
• Interactive Floor Plan & Financial Tools — Multi-level architectural blueprint tab switcher with room dimensions and a real-time monthly carrying cost calculator (Principal & Interest, Property Tax, Hazard Insurance, and HOA).
• Custom Accessible UI Controls — Custom styled <select> dropdown menus with keyboard navigation, native <dialog> modals with focus restoration, and responsive mobile navigation drawer.
• Bundled Visual Assets — Includes 22 curated high-resolution architectural, interior, and portrait photographs (.jpg) and 5 custom SVG CAD floor plans and brand marks stored locally in assets/images/.

Package Structure & Customization

Requirements, Browsers & Limitations

• Supported Browsers — Tested in current desktop and mobile versions of Chrome, Edge, Firefox, and Safari.
• Hosting & Development Requirements — Can be hosted on any static web server over HTTP/HTTPS. Node.js 22+ and pnpm are optional and only needed if recompiling src/styles/main.css or running the automated test suites.
• External Connections — Pages load Bricolage Grotesque, Manrope, and JetBrains Mono from Google Fonts; system font fallbacks are configured for offline environments.
• Static Demonstration Scope — Search, filtering, sorting, saving favorites, buyer notes, mortgage calculations, and inquiry receipts operate entirely in the browser using structured mock datasets and localStorage. Forms validate user input and display a local demonstration confirmation receipt; no backend server, database, or live email delivery service is included.