Tells Your Story

Summary

The very first prototype of a new DEPO home page, the one every later demo grew from. It is a plain photographer's landing page: one centred statement on near-black, one call to action that leads to sign-up, and a five-column wall of covers from DEPO magazines (Lucid, Palisade, ALAÏS, Delorian). The real site header and footer stay exactly as on the live site. The owner attached a screenshot of a reference design; the hero follows that reference (type pairing, copy, pill button), and the photo wall is DEPO's own content.

Prompt

The brief this page was built from.

Build a first prototype of a new DEPO home page as a photographer's landing page, after the
reference screenshot the owner supplied. Keep the real DEPO site header and footer exactly as
live.

- First screen, centred on near-black: a small serif line "Authentic. Timeless. Captivating." in
  Lazurski, a two-line headline in heavy Poppins (very large, tight tracking), a short lead and
  a pill button "Capture Your Moment" with a white arrow circle that leads to sign-up.
- Below it a full-width wall of 15 covers from DEPO magazines (Lucid, Palisade, ALAÏS, Delorian)
  in five columns (4 / 3 / 2 on smaller screens), fading into the site's #18171a above the
  footer.
- Self-hosted fonts, vanilla JS, 360–1920 px without horizontal scroll.

Look

Type: Lazurski (DEPO's own serif, /demo1/fonts/) for the line "Authentic. Timeless. Captivating."; Poppins 700 for the headline at up to 112 px with -0.045em tracking, Poppins 300 for the lead, Poppins 500 for the button. Lato from the site styles in the header and footer.
Palette: #0b0b0c page ground, #f5f5f4 headline, #c9c9cc serif line, #8c8c93 lead, #2a2a2d pill button with a white #fff circle and a #111 arrow; the wall fades into the site's #18171a above the footer.
Layout: header; a centred first screen (serif line, two-line headline, lead, pill button "Capture Your Moment" to sign-up); a full-width wall of 15 photos in 5 columns (4 / 3 / 2 on smaller screens) with a fixed height and a gradient fade at the bottom; footer.
Motion: the first screen rises in with a staggered CSS animation (90 ms steps); photos fade and settle from scale(1.04) as an IntersectionObserver sees them; on scroll the columns drift in opposite directions (odd up, even down, up to 90 px) through a rAF-throttled scroll handler; the button's arrow nudges right on hover. All of it is off under prefers-reduced-motion.

Built with

Part	What
HTML	public/demo1/index.html
CSS	public/demo1/css/demo1.css (shared with demo2 and demo3) + `/demo1/css/globals.css`, `site.css`, `site-chrome.css`, `header.css`, `site-header.css`, `header-menus.css`, `app.css`
JS	public/demo1/js/demo1.js — vanilla (column layout, reveal, drift); `/demo1/js/i18n.js`, `/demo1/js/site.js` for the header
Libraries	none
Fonts	Poppins, Lazurski and Lato, self-hosted in `/demo1/fonts/` (no Google Fonts)
Images	`/_img/photos/photo-01…15.jpg` — magazine covers from the DEPO gallery, resized to 800 px

Borrowed

The real DEPO site header and footer markup with the site-asset snapshot (/demo1/css/, /demo1/js/, /demo1/fonts/, /_img/site/) of the site CSS, fonts and images (front at commit 43a7a8b^).
The hero composition and its copy follow the reference screenshot the owner attached; its source was not recorded.
Photos: covers published by DEPO magazines, taken from the DEPO gallery.

Config

None — static page.

Notes

The footer language switcher does not work on a static page (it needs a CSRF token).
globals.css sets * { color: #fff }, so the arrow inside the white circle needs its own dark stroke (done in demo1.css).