Palisade Register

Summary

Palisade magazine's public DEPO profile (@palisade.mag), closest to a printed title page. The idea is a register: restrained type and rules, with pictures appearing only when asked for. 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 "Palisade Register".

Goal: Palisade magazine's public DEPO profile (@palisade.mag), closest to a printed title page.
The idea is a register: restrained type and rules, with pictures appearing only when asked for.

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: Accessible tabs with arrow keys and a #hash, cover preview following the cursor over
the register, Follow toggle.

Design: Bodoni Moda (display), Lato (text). Palette: #f5f1e8 ivory, #17140f ink, #7e1420
oxblood, #5d564a soft. Layout: Masthead; sticky tab bar; lead with two covers; the active tab
panel (register, calls, team or about). Motion: Row indent on hover, fixed preview moved with
mousemove, tab underline scale, greyscale team colouring on hover.
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: Bodoni Moda (display), Lato (text) (Google Fonts).
• Palette: #f5f1e8 ivory, #17140f ink, #7e1420 oxblood, #5d564a soft.
• Layout: Masthead; sticky tab bar; lead with two covers; the active tab panel (register, calls, team or about).
• Motion: Row indent on hover, fixed preview moved with mousemove, tab underline scale, greyscale team colouring on hover.

Built with

Borrowed

Header, footer and site CSS copied from demo5. Otherwise nothing borrowed.

Config

None — static page.