/ 06
FAQ
Real questions from real buyers of the standalone HTML template.
12 real questions, answered plainly. Click a question to expand it.
Do I need to install anything to use this template?
No. Unzip the download and double-click index.html — it opens straight in your browser. There's no Node.js, no npm, no build tool and no server software required just to preview or edit it. See Getting Started.
How do I change the colors?
Open assets/css/tokens.css and edit the custom properties near the top of the file (--amber is the accent color). Save and refresh — every page links the same file, so the change applies site-wide in one edit. See Customizing → Changing colors and fonts.
How do I change the fonts?
Same file, assets/css/tokens.css — edit the --font-heading, --font-body and --font-mono values. If you're switching to different font families entirely (not just changing which of the shipped three plays which role), you'll also swap the Google Fonts <link> tag in each page's head. See Customizing → Fonts.
How do I change the logo?
The logo is set directly in each page's HTML, inside the header markup near the top of the <body>. Find the site name/logo markup, replace the text or swap in an <img> pointing at your own logo file in assets/img/, then repeat on every page (or use your editor's find-and-replace-across-files feature, since the header repeats identically on all 16 pages).
Does the contact form send me an email automatically?
Not on its own. This is a static template with no server-side code, so the contact form has no built-in way to deliver mail. Wire it up to a form-handling service (Formspree, Netlify Forms, Basin, or similar) by setting its action attribute, or connect your own backend. See Page Reference → contact.html.
The demo images look different from my images after I swap them in. Why?
The layout is built around specific aspect ratios (job-file cards are 4:5, wide feature bands are 16:9 or 21:9). If your replacement photo has a very different aspect ratio, it can look stretched, cropped oddly, or leave awkward empty space depending on how the surrounding CSS handles it. Crop your source photo close to the target ratio before swapping it in. See Customizing → Swapping images.
Can I use this with a static site generator or a headless CMS?
Yes — that's a common use for this template. Since it's plain HTML/CSS with no build step or templating engine of its own, it's a clean starting point to wire into Eleventy, Astro, Hugo, a headless WordPress/Webflow setup, or any other tool: import the markup and CSS as your starting templates and connect your own data source.
Does this template include a CMS or admin area?
No. It's a static HTML/CSS/JS template with no back end, no database and no login area. If you want an editable admin experience (a dashboard where a non-technical person can update content without touching code), that's what the companion WordPress theme is for — see WordPress theme docs.
Which browsers does this template support?
All current versions of Chrome, Firefox, Safari and Edge. The CSS uses standard custom properties, flexbox and grid, all of which have been supported in every major browser for several years. No Internet Explorer support is provided or tested.
Do the animations work if I have motion turned down on my computer?
Yes. assets/js/main.js checks the prefers-reduced-motion operating-system setting and automatically disables scroll reveals, count-ups and the marquee for visitors who have that preference set — nothing you need to configure.
How do I add a new page that isn't one of the 16?
Duplicate the page file that's closest in structure to what you need (for example, copy about.html as a starting point for a new "Our Process" page), rename the copy, edit its content, and add a link to it from your navigation menu markup on every page (since there's no shared include system — see File Structure → The 16 page files).
Can I host this on GitHub Pages, Netlify or Vercel?
Yes. Upload the contents of the fieldcraft-html/ folder as-is — all three platforms serve plain static HTML/CSS/JS with no configuration required beyond pointing them at the folder. See Getting Started → Put it online.