DEPO Demo album

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

65 demos

Saria Woven Thread

Stylist profile in the album UI. A woven cloth is the background and lifts under the pointer. Colour filters dye the cloth and filter the looks; numbered pins on each photo credit the pieces.

Open the demo All demos

Full-page screenshot of Saria Woven Thread
Full page, 1440 px wide, as it scrolls. Click to enlarge.

Summary

Stylist profile in the album UI. A woven cloth is the background and lifts under the pointer. Colour filters dye the cloth and filter the looks; numbered pins on each photo credit the pieces. The numbers, credits and text are invented demo content.

Prompt

The brief this page was built from.

Build a public DEPO profile, "Saria Woven Thread", 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: Woven threads dyed by the colour filter.
Tool: credit pins on each look and colour filter. 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/demo64/index.html
CSSpublic/demo64/css/demo64.css, profile.css, copies of the depo0 site CSS
JSpublic/demo64/js/demo64.js, bg.js (canvas loop), depo0 header and footer scripts; vanilla
Librariesnone
Fontspublic/demo64/fonts/
Images/_img/photos/, /_img/site/first-page/, public/demo64/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.