DEPO Demo album

Every page we tried for DEPO, one post each: what it is, how it was built, how it looks.

65 demos

Palisade Light Fence

Palisade magazine profile in the album UI. Light falls through a fence that leans with the pointer. Move across a cover to skim its pages, or search the credits by name or role.

Open the demo All demos

Full-page screenshot of Palisade Light Fence
Full page, 1440 px wide, as it scrolls. Click to enlarge.

Summary

Palisade magazine profile in the album UI. Light falls through a fence that leans with the pointer. Move across a cover to skim its pages, or search the credits by name or role. The numbers, credits and text are invented demo content.

Prompt

The brief this page was built from.

Build a public DEPO profile, "Palisade Light Fence", in the product UI of depo0/album.php: dark
ground, Poppins headings, Lato text, yellow primary actions, pill sub-navigation, rails of
rounded tiles, signed-in site header and footer. The animated background is unique to this
profile and is tied to a working tool. Background: Bars of light that follow the pointer. Tool:
pointer skim on covers and credits search that dims other issues. Honour reduced motion and work
from 360 px to 1920 px.

Look

  • Type: Poppins (headings), Lato (text), self-hosted site fonts.
  • Palette: site tokens #18171a, #27262b, #ffb500, #469a58, plus the profile's background colours.
  • Layout: sub-navigation, identity, the profile's tool in glass panels, rails of tiles and people.
  • Motion: one canvas background at low resolution, paused in a hidden tab, a still frame under reduced motion.

Built with

PartWhat
HTMLpublic/demo61/index.html
CSSpublic/demo61/css/demo61.css, profile.css, copies of the depo0 site CSS
JSpublic/demo61/js/demo61.js, bg.js (canvas loop), depo0 header and footer scripts; vanilla
Librariesnone
Fontspublic/demo61/fonts/
Images/_img/photos/, /_img/site/first-page/, public/demo61/img/ (icons, logos)

Borrowed

Header, footer, site CSS and album components from public/depo0. Otherwise nothing borrowed.

Config

None — static page.

Rating

–/ 10 No votes yet

Your score — one vote, it cannot be changed

Suits a site for…

What kind of website would this design fit? Agree with a tag by clicking it, or add your own — a tag can be several words.

No tags yet — be the first.

Comments 0

No comments yet — be the first.

No sign-up needed: your name is remembered on this device — or sign in.