DUSK After Dark
DUSK magazine profile on DEPO, a dark poster page. The full-screen cover carries a giant wordmark, back issues run sideways under the wheel, and a red open-call panel counts down to its deadline.
Summary
DUSK magazine's public DEPO profile (@dusk.mag), in the mood of a night title. The idea is a poster wall: everything is big, black and red, and the open call is the loudest thing on the page. Profile data follows the shape of the site's profile page (front/src/Core/Demo/ProfileDemo.php); the numbers, credits and story text are invented demo content.
Prompt
The brief this page was built from.
Build one page of the DEPO demo album: the public DEPO profile "DUSK After Dark".
Goal: DUSK magazine's public DEPO profile (@dusk.mag), in the mood of a night title. The idea is
a poster wall: everything is big, black and red, and the open call is the loudest thing on the
page.
Content, using the fields of a DEPO profile: name, handle, location, role, about, links,
followers, following, photos
and for a magazine also issues, open calls (title, text, deadline, price) and team.
Function: Sideways issue track pinned on scroll with a progress bar, live countdown to the call
deadline, greyscale strip that colours on hover, Follow toggle.
Design: Anton (display), Archivo (text). Palette: #0a0908 black, #efe8dc bone, #e8341f red,
#a79f92 dim. Layout: Full-screen cover with wordmark and identity; pinned issue track; split
open call; eight-picture strip; team row. Motion: Wordmark letters rise on load; rAF-driven
translate on the rail; filter transition on the strip.
Keep the real DEPO site header and footer. Use only images from the shared set. Plain HTML, CSS
and vanilla JS, working from 360 px to 1920 px, with reduced motion honoured.Look
- Type: Anton (display), Archivo (text) (Google Fonts).
- Palette: #0a0908 black, #efe8dc bone, #e8341f red, #a79f92 dim.
- Layout: Full-screen cover with wordmark and identity; pinned issue track; split open call; eight-picture strip; team row.
- Motion: Wordmark letters rise on load; rAF-driven translate on the rail; filter transition on the strip.
Built with
| Part | What |
|---|---|
| HTML | public/demo54/index.html |
| CSS | public/demo54/css/demo54.css + the site CSS copies in the same folder |
| JS | public/demo54/js/demo54.js, vanilla; site scripts copied beside it |
| Libraries | none |
| Fonts | Google Fonts as above; site fonts in public/demo54/fonts/ |
| Images | DUSK covers and crops from /_img/photos/; avatars from /_img/photos/crops/avatars/. |
Borrowed
Header, footer and site CSS copied from demo5. Otherwise nothing borrowed.
Config
None — static page.
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.