Hothouse
A maximalist music festival template.
Hothouse is a festival site in the Maximalism style: poster type at full width, four clashing flat brights (hot pink, acid lime, electric blue, signal orange) on cream or night black, star stickers, tickers, rotated photo cut-outs and a lineup set like a printed poster. The sample festival is invented: every act, stage, price and place is sample content. Photos and video are Pixabay demo media, turned into duotones.
- For
- Music festival / event
- 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
The poster slams together on load: HOT drops in, HOUSE slides across, the italic strap stamps on and three star stickers punch in, over a duotone stage-light video.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): ticker; the poster hero (giant HOT HOUSE, italic strap, stage-light video, star stickers, dates, two calls to action); a tilted act band; the lineup as a poster with Friday, Saturday and Sunday tabs; four stages in a bento of colour blocks; a collage of last year; ticket stubs with a tear line; good-to-know facts; a sign-up block with a working form state; a footer with a giant wordmark. - Lineup (
lineup.html): every act A to Z, filterable by day, with headliners in their day's colour and an empty state. - 404 (
404.html). - Light (cream) and dark (night) themes, phone to desktop.
- Signature motion: the poster slams together on load (HOT drops in, HOUSE slides across, the strap stamps on, the stickers punch in); stickers lean toward the pointer; tickers run (paused on hover); the new day's poster pops in; videos play only on screen.
- Reduced motion: no slam, no tickers, no video playback; everything in its final place.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Lineup
- 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.
