Make it your own.

Quick start

Extract the ZIP and open index.html. Choose a demo. The template works directly from files and from a static web server; there is no build command.

Each demo contains 16 unique pages. The extra service-detail.html file preserves a previous URL and duplicates the first service page.

File structure

forma-template/
  index.html
  agency/
  interiors/
  renovation/
  assets/
    style.css
    main.js
    favicon.svg
    agency-concept.png
    interior-concept.png
    kitchen-concept.png
  documentation/
  README.md
  ASSETS.md
  CHANGELOG.md

Edit content and navigation

Edit HTML files in a text editor. Replace fictional brand names, project studies, sample copy and all hello@example.com addresses. Keep HTML tags and attribute quotes intact. Navigation is repeated in each HTML file; update it consistently.

Project cards point to project-1.html through project-4.html. Journal cards point to article-1.html through article-3.html. Change those files to present your own work and writing.

Customize each theme

Global tokens are at :root in assets/style.css. Theme overrides use body.agency, body.interiors and body.renovation. Edit --accent, --ink, --paper, --surface and --heading within the selected theme.

body.agency {
  --accent: #244cef;
  --paper: #ffffff;
  --heading: Arial, sans-serif;
}

Maintain readable contrast after changing colors. Body text uses Arial; interiors headings use Georgia. Both are system fonts with fallbacks, requiring no external downloads.

Replace images

The included imagery is generated and fictional. Do not present it as real customer work. Image provenance and generation prompts are in ASSETS.md.

Use images you own or are authorized to redistribute. Update src, alt, width and height attributes. Hero images are cropped with object-fit: cover; adjust object-position if the subject needs different framing.

Change portfolio filters

On projects.html, each filter button has a data-filter value. Each project link has the matching data-category. Keep those values in sync. The all button shows every card.

<button class="filter" data-filter="residential"
  aria-pressed="false">Residential</button>
<a class="project-card" data-category="residential"
  href="project-1.html">...</a>

Connect the contact form

The form validates required fields and the email format in the browser. It does not transmit or save data. The JavaScript submit handler in assets/main.js prevents submission and displays a preview notice.

To send enquiries, connect a form service or your own server endpoint. Replace the submit handler, add loading/success/error states, protect the endpoint against abuse and replace the preview notice and button label. Keep secret API keys on a server. Update the email link separately.

Publish a single demo

Upload the entire template directory to a static web host and open /agency/index.html, /interiors/index.html or /renovation/index.html.

To put one demo at the root, copy its HTML files to the root and change every ../assets/ reference to assets/. Keep the shared assets folder. Remove the demo switcher from each HTML file if you are publishing only one demo. Replace the main overview page.

Interaction and accessibility notes

The template uses semantic landmarks, labelled fields, visible keyboard focus, skip links and native buttons. The mobile menu uses aria-expanded; Escape closes it and returns focus. Filter updates are announced through a live status area. Reduced-motion preferences disable smooth scrolling and hover movement.

These features do not establish complete accessibility conformance. Recheck keyboard access, contrast and screen reader behavior after customization.

Scope, license and support

This is a static HTML template. It includes no WordPress theme, backend, CMS, working email delivery or payment functionality. Content is edited in the source files.

Your purchase is governed by the applicable Codester license. See Codester license details.

Support is available through the purchased item’s Codester support section for 12 months from purchase. Enquiries are answered within 2 business days. It covers questions about documented features, clarification of this guide and investigation of reproducible bugs in the unmodified template.

Support excludes installation, hosting/server configuration, demo data installation, third-party software, custom design or development, content entry, translation, backend integrations and connecting the preview form to an email service.

Released updates are supplied through Codester. There is no fixed update schedule or additional-feature commitment.