Studio — Free Creative Agency Website Template
Studio is a free, single-page Bootstrap 5 template for creative and design studios, built on vanilla JavaScript with no jQuery and no build step. It leads with oversized editorial typography and a filterable portfolio grid so a small shop looks as sharp as the work it makes, and the whole cobalt-and-butter palette repaints from a single CSS file.
Key features
- Oversized-type hero with a color-blocked headline and scrolling discipline marquee
- Filterable work grid: All, Branding, Digital, Spatial, Editorial (vanilla JS)
- Hover reveals and image zoom on every portfolio tile
- Numbered services list plus an animated count-up numbers band
- Front-end-validated contact form with inline errors and a success state
- Repaintable palette via CSS custom properties in one style file
- Sticky blurred header, mobile off-canvas nav, and smooth-scroll
- Inline SVG icons, no icon font, self-hosted Bootstrap (CSP-safe)
- Accessible: skip link, focus-visible rings, aria labels, alt text
Best for
- Small design and branding studios
- Creative and digital agencies
- Freelance designers building a portfolio
- Photographers and editorial or spatial creatives
- Anyone wanting a one-page work showcase
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 — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is Studio really free to use commercially?
Yes. Studio is free for both personal and commercial use, so you can run it for client work, your own studio, or a side project at no cost. A credit link back to uiCookies is appreciated but not required.
Does it use jQuery or a build tool?
No. Everything, from the nav and work filter to the count-up stats, scroll reveals, and form validation, is written in plain vanilla JavaScript. The only vendor file is a self-hosted copy of the Bootstrap 5 bundle, so there is no npm install, no compile step, and no page-load spinner. You edit the HTML, CSS, and JS directly and refresh the browser.
Can I change the colours and fonts?
Easily, and without touching the layout. The entire palette lives in CSS custom properties at the top of css/style.css (–cobalt, –butter, –bone, –ink, and more), so changing a few values repaints the whole page. The Syne and Hanken Grotesk pairing is a single Google Fonts link in the head, which you can swap for any other pair.
How does the filterable work grid work, and can I add my own projects?
The grid is the centerpiece: category buttons (All, Branding, Digital, Spatial, Editorial) filter the tiles instantly with vanilla JavaScript, and each tile has a hover reveal and image zoom. To add your own work, copy an existing grid item in the HTML, point it at your image, and tag it with the matching category so the filter picks it up. No data files or CMS are involved.
How do I make the contact form actually send messages?
The form validates in the browser and shows inline errors plus a success state, but it does not post anywhere on its own. Point the form's action at your own endpoint or a form service such as Formspree, Basin, or Netlify Forms, then remove the demo success handler. Because it is a static front end, there is no built-in server or database.
Is it responsive and mobile-friendly?
Yes. The layout is fully responsive and reflows from large desktop screens down to phones. The main navigation collapses into a mobile off-canvas menu, and the oversized type and work grid scale down cleanly on smaller viewports.
Which browsers does it support?
Studio runs in all current versions of Chrome, Firefox, Safari, and Edge. It relies on modern standards like CSS custom properties and IntersectionObserver for the scroll reveals, and it respects prefers-reduced-motion so animations tone down for visitors who ask for that.
What's included, and is it optimized for performance?
You get one long-scroll page with the hero, filterable work grid, numbered services, count-up numbers band, manifesto/about block, a grayscale-to-color team row, a clients strip, an awards line, and the contact section. It stays lightweight by self-hosting Bootstrap, skipping jQuery and icon fonts in favor of inline SVG, and giving every image alt text. Supply your own optimized images (the demo photos are placeholders) to keep load times fast.
