Studio — Free Creative Agency Website Template
Studio leads with oversized, confident typography and a filterable portfolio grid, so a small design shop can look like the thing it makes. It ships as a single long-scroll page built on plain Bootstrap 5 and vanilla JavaScript — no jQuery, no build step, no page-load spinner — with a striking cobalt-and-butter palette you can repaint in one CSS file.
Features
- Oversized-type hero with an editorial color-blocked headline and a scrolling discipline marquee
- Filterable work grid (All / Branding / Digital / Spatial / Editorial) driven by vanilla JS, with hover reveals and image zoom
- Numbered services list with an interactive hover indent, plus an animated count-up numbers band
- Manifesto/about block, a grayscale-to-color team row, a clients strip and an awards line
- Contact section with a real front-end-validated form (inline errors + success state) ready to wire to any backend
- Sticky blurred header, mobile off-canvas nav, smooth-scroll, and IntersectionObserver scroll-reveal
- Accessible by default: skip link, semantic landmarks, focus-visible rings, aria labels, alt text on every image
- Respects prefers-reduced-motion and self-hosts Bootstrap; icons are hand-written inline SVG (no icon font, CSP-safe)
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Bold editorial creative-agency, cobalt & butter on warm paper
How to use it
Download the ZIP, unzip it, and open index.html — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Studio really free to use commercially?
Yes. Use it for client work, your own studio, or a side project — free for personal and commercial use. A credit link to uiCookies is appreciated but not required.
Does it use jQuery or any heavy libraries?
No. Everything — the nav, work filter, count-up stats, scroll reveals and form validation — is written in vanilla JavaScript. The only vendor file is a self-hosted copy of the Bootstrap 5 bundle.
How do I make the contact form send real messages?
The form validates in the browser and shows a success state, but it doesn't post anywhere yet. Point the form's action at your own endpoint or a form service (Formspree, Basin, Netlify Forms, etc.) and remove the demo success handler.
Can I change the colours and fonts?
Easily. The whole palette lives in CSS custom properties at the top of `css/style.css` (`–cobalt`, `–butter`, `–bone`, `–ink`…), and the Syne + Hanken Grotesk pairing is a single Google Fonts link in the head.
