The Issue

Summary

DEPO's home page as a printed issue you leaf through. On wide screens one pinned section moves a track of full-width spreads sideways as you scroll down: the cover ("Your work, in print"), the contents, six feature spreads (one per DEPO value, each with two community portraits), the credits (the five roles), a double-width magazines spread and a back cover with Join DEPO. A bottom issue bar shows how far into the issue you are, the current page, and opens the contents. Made as one of eleven parallel home-page concepts (home10–home20) after the owner picked home3 as the bar.

Prompt

The brief this page was built from.

Build a new home page for DEPO, a community where photographers, models, stylists, make-up
artists and magazines meet, shoot together and get published. Keep the real DEPO site header and
footer. Use real content only: the sections With your eyes, Connect, Locals, Depo Magazine,
Awards, Blog; the five roles; the six values (Collaboration, Responsibility, Inclusivity,
Empowerment, Tolerance, Innovation); the magazines Lucid, Palisade, ALAÏS, Delorian, VOÍD, DUSK,
Kaleido, Persona.Code; the shared covers and portraits. The bar is the home3 page (demo5):
premium, photo-led, editorial, rich but tasteful motion. Vanilla JS, self-hosted assets,
360–1920 px without horizontal scroll, visible focus, reduced motion respected.

Concept — "The Issue": the home page reads like leafing through a DEPO issue. Signature scene: a
pinned section where vertical scroll moves the page sideways through magazine spreads (cover →
contents → feature spreads of community portraits with the six values as feature headlines →
magazines → back cover with Join DEPO), with parallax between photo and type inside each spread
and a progress bar of the issue. Palette: cool paper white with deep green ink fields and the
brand yellow used sparingly; an elegant high-contrast serif display (from Google Fonts, e.g.
Fraunces/Newsreader/Gloock — your choice) paired with a clean sans. On phones the horizontal
scene becomes a vertical sequence of spreads. Live thing: a contents list that jumps to any
spread.

Look

• Type: Fraunces (variable, optical size 144, weights 300–800, set light around 380) for the masthead, headlines and contents entries; Hanken Grotesk 400/500/700 for body and UI.
• Palette: cool paper #eef1ee, paper tone #e1e7e2, ink #0f1b14, soft ink #46544a, deep green fields #10301f / #173f2a (header, field pages, issue bar), text on field #eef1ee / #bccbbf, brand green #469a58 (link underlines, focus), brand yellow #ffb500 (main button, progress line, focus on fields).
• Layout: each spread is two pages side by side, photo page and type page, alternating paper, tone and green field. Cover: a full-bleed portrait with a huge serif DEPO masthead and "The speed of your vision", opposite "Your work, in print". Contents: page numbers, value names and the people in each feature. Feature spreads: value as headline, a large portrait, a second smaller one with credit. Credits: the five roles. Magazines: about twice as wide, title fixed at the left, eight covers hung at staggered heights. Back cover: Join DEPO. Folios at the page corners.
• Motion: at 900 px and wider the issue section is as tall as its track is wide; its stage is pinned and scroll moves the track sideways, eased with requestAnimationFrame. Blocks marked data-depth and photos move at their own speed (parallax inside each spread). Staggered entrances per spread, crossfades on hover, a "Scroll to turn the page" cue. On phones, with reduced motion or without JS the spreads stack vertically, with a light vertical photo parallax.
• Live thing: the contents. Pointing at an entry swaps the large picture beside it to that feature's portrait; clicking jumps to the spread. The issue bar (progress line, page and title, previous / next, Contents panel with Escape and outside-click to close) does the same from anywhere. Tabbing into an off-screen spread brings it into view.

Built with

Borrowed

• The real DEPO site header and footer markup, styled by the /demo7/css/* snapshot of the DEPO front (taken at commit 43a7a8b^), with the site's own /demo7/js/* scripts.
• The real DEPO copy (values, roles, magazines, people) from the shared builder data of the home10–20 session.
• Google Fonts (Fraunces, Hanken Grotesk); DEPO's magazine covers and community portraits.
• Skills: frontend-design and taste-skill (house rules and inspector), as the brief required.
• No third-party code.

Config

None — static page.