Top Deck
A maximal night market site.
Top Deck is a website for a recurring event (a night market, street food fair or summer series), in the Maximalism style: warm paper with five flat clashing solids (tangerine, magenta, cyan, butter) and plum ink for type, thick outlines and hard offset shadows on every sticker; heavy wide caps (Unbounded) with one fat script word per heading (Shrikhand) and a friendly sans for reading (Outfit). Headlines and stickers tilt, body copy never does. The sample event, Late Lot on the top deck of a car park, and every stall, act, price and date are invented sample content.
- For
- 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
When night falls on the deck: a pinned drawn scene of the car park roof where scrolling runs the evening from 17:00 to midnight, the sky steps from day to sunset to night, the sun sinks behind the skyline, windows and four hundred bulbs switch on, awnings roll open, a brass band marches up the ramp and the clock and programme stickers follow.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): LATE LOT stacked in two colours with a script "night market", four tilted date tiles (the next Friday marked from the visitor's clock), two big buttons, and a collage of photos in a circle and a scallop with stickers; a stall-name marquee; the night-falls scene; twelve stalls as a sticker wall with cut-out photo shapes (circle, scallop, arch, ticket, star), prices, tags, filters and save hearts; the line-up per Friday as fat coloured bands with hearts; a trader application with kind, pitch size, Fridays, a live pitch fee with the all-four discount, validation, sending and sent states; the car park levels with a lift and a short FAQ; a checker footer with the giant name. - My night (
plan.html): the acts and stalls saved with the hearts, per Friday, with counts on the tabs, remove, copy-to-clipboard and clear, and designed empty states. Saved in the visitor's browser only. - 404 (
404.html): "This bay is empty", a painted parking bay and a wobbling cone. - Light and night (dark) themes: follows the system, with a toggle that remembers the choice. Phone to desktop.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- My night
- 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.
