Forge
A bold, structured HTML5 template for design studios, creative agencies and freelance portfolios.
About this theme
Forge is a full website template built for design studios and creative agencies. It includes an editorial full-width hero, a client logo strip, a project/case-study grid with real project photography, a numbered services list, a 4-step process section, an about/studio section with a pull-quote panel, testimonials, and a contact form. Built with plain HTML, CSS and vanilla JavaScript — no build step, no framework dependency. Fully responsive, with a built-in dark mode toggle (persisted per visitor) and smooth scroll-reveal animations. Deliberately restrained visual language — near-monochrome with a single bold accent color, no gradients, no decorative icon sets.
Platform compatibility
| Edition | Responsive | RTL | Translation-ready | Dark mode | Version |
|---|---|---|---|---|---|
| HTML5 | ✓ | — | — | ✓ | 1.1.0 |
Documentation
What's included
Forge ships as plain HTML, CSS and vanilla JavaScript — no build tools, no framework, no dependencies to install. Unzip and open `index.html` directly, or upload the files to any static host. **Sections included:** - Full-width editorial hero with a two-line headline and a single call-to-action - Client / partner logo strip - Work grid — 4 case-study cards with real project photography - Numbered services list (4 services, index-style layout — no icon set) - 4-step process section (numbered, not iconography) - About / studio section with a pull-quote panel - Testimonials - Contact form (front-end markup only — wire up your own form handler or endpoint) - Footer with social links **Built-in features:** - Dark mode toggle, persisted per visitor via `localStorage` - Scroll-reveal animations using `IntersectionObserver`, with a no-JS fallback that shows all content immediately - Fully responsive from 375px mobile through wide desktop - Mobile navigation drawer Color and type are controlled from CSS custom properties at the top of `assets/css/styles.css` — change the single accent color there to retheme the whole site.
Customization guide
**Accent color** — open `assets/css/styles.css` and edit the `--accent` custom property near the top of the file. Every button, link, underline and numbered index in the theme reads from this single variable, so one edit reskins the whole site. **Replacing case-study images** — the work grid uses real photography (`assets/img/work-*.jpg`), each rendered as an `<img class="media-fill">` absolutely positioned inside its `.work-thumb`. Swap the files in `assets/img/` (or update the `src` attributes in `index.html`) with your own project photography — the card layout and tag chip work unchanged regardless of what image fills the frame. **Editing content** — all copy lives directly in `index.html`; there is no templating layer or content file to sync. Section boundaries are marked with `<section id="...">` comments for quick navigation. **Contact form** — the form in the contact section is markup only. Point its `action` attribute at your own form-handling endpoint (e.g. Formspree, a serverless function, or your own backend) and add a `name` attribute to each field per that service's requirements. **Dark mode** — controlled by a `data-theme="dark"` attribute on `<html>`, toggled by `assets/js/main.js` and persisted to `localStorage`. All color values are defined twice in `styles.css`: once under `:root` and once under `[data-theme="dark"]`. **Fonts** — Space Grotesk is loaded from Google Fonts in the `<head>`. Swap the `<link>` tag and the `--font-display`/`--font-body` variables to change typefaces.
Reviews
No reviews yet — be the first to share your experience.
Related themes
