Racket
A maximalist creative agency site.
Racket is a website for a loud creative studio, in the Maximalism style: five flat solids that clash on purpose (tomato, mint, butter, sky, bubblegum) on paper or on deep indigo with a dot pattern; a heavy grotesk (Bricolage Grotesque) and a black soft serif (Fraunces) shouting in the same line; stickers with thick ink outlines and hard shadows; panels with scalloped edges; overlapping layers. The sample studio, Hullabaloo, and every client, project and quote are invented sample content.
- For
- Creative agency
- Built with
- HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0 (no build step)
- Pages
- 3 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
A hero sticker sheet: headline words drop in, eight stickers slap down on top, and every sticker can be dragged, flung, shuffled or tidied home (anime.js draggables, keyboard too).
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): a hero that is a sticker sheet (headline words in five colours and two faces, eight stickers you can drag, fling, shuffle or tidy, keyboard moves too); selected work as a giant stacked index where hovering or focusing a client floods the section with its colour and shows its photo in a cut-out shape (arch, circle, scallop, ticket, blob, star); services as four tilted scalloped panels; client quotes as speech bubbles; a dark "Say hullo" form with colour chips for project type and budget, validation and a sent state; a checker strip and a giant outlined wordmark. - Case study (
case.html): tags, a big mixed headline, a wide photo, facts, the idea, colour swatches that copy their hex, shaped photos, and a link on. - 404 (
404.html). - Light (paper) and dark (indigo) themes, phone to desktop. On phones the stickers live under the headline and the work rows show their photos inline.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Case study
- 404
Stack
- HTML
- CSS
- ES modules
- Motion 14.6.0
- anime.js 4.5.0 (no build step)
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
