类型：Site模板 · 收录：2026-11-05 01:12:20 · 源码：会员可见
# Prompt: ORRIS "Stay close, quietly" newsletter footer
Build a single-file, one-screen **newsletter and footer section** for a fictional scent and soap brand, **ORRIS**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The mood is quiet and cinematic:
- **Top band:** a wide blue-dusk photo of a woman with wet dark hair seen through rain-covered glass. A centred serif headline, a two-line note and an underlined email field sit over it.
- **Bottom row:** a clean off-white footer with three small link columns on the left, and a product photo on the right of a cream soap bar engraved "ORRIS" resting on wet dark stone.
## Media
- **Rain photo:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/ae0fdac6-39ca-436c-82e0-215f8edac74f.webp` (1916×821, ratio 2.33374).
- The woman's face is left of centre, with her eyes closed and head tilted up.
- Warm blurred city bokeh glows on the right, and rain rivulets run down the whole pane.
- In the photo, the nose tip sits at 13.9% of the height and the under-chin line at 33.9%.
- **Motion:** a muted 4s loop of the same shot: `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/5ebf0609-0ad5-466d-ab67-cf424c20d4d1.mp4` (1916×818).
- Heavy rain streams and races down the glass, the camera pushes in and drifts slightly right, she tilts her head, and the bokeh shimmers.
- The last second crossfades into the first, so it loops without a jump and never plays in reverse.
- It uses exactly the photo's geometry, fades in (0.9s) once it has data, and is hidden for reduced motion.
- **Soap photo:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/1aecb26b-960e-49ad-88cd-447cee105ac8.webp` (1530×1028). It covers its panel from the top-left at a 1.0597 zoom, with a faint cool grade.
- **Rule:** nothing in the photos is drawn or animated in code. Only the UI animates.
## One-screen architecture
- **Viewport:** the page is always exactly one viewport tall and wide (`100dvh`), with no scrolling.
- **Three layouts,** each drawn in its own unit, which is the smaller of the width fit and the height fit:
- **A, desktop and landscape** (aspect ≥ 6:5, height ≥ 600): a 2048×1447 artboard, with `--u = min(100vw/2048, 100dvh/1447)`, plus `--ux = 100vw/2048` for horizontal measurements.
- **B, short landscape** (height < 600): photo band on the left, a 372-unit footer column on the right (base 844×390).
- **C, portrait** (aspect < 6:5): stacked (base 390×844). The band fills whatever the 150-unit soap strip and the footer leave.
## Face-anchored photo
- **Cover:** the photo layer always covers the band (`--iw = max(100cqw, 100cqh × 2.33374)`), centred horizontally.
- **Vertical offset:** chosen with container query units so that:
1. it keeps a centred framing when possible
2. it lifts the photo so the chin clears the text zone (text top ≥ under-chin + 0.8cqh)
3. the nose never leaves the top edge (headroom 5.5cqh, at least 1cqh)
- **Same geometry for the video:** the video uses the identical left, top, width and height.
- **Grade:** a cool overlay `rgba(53,88,143,.10)` sits over the photo.
## Type and colour
- **Headline:** **Libre Caslon Display**, uppercase.
- **Everything else:** **Hanken Grotesk** 400.
- **Colours:** ink `#0B0B0B`, paper `#FDFDFD`, white text over the band, band fallback `#1B2A36`.
## Layout A (2048×1447 artboard)
- **Band text** (centred, at 50% − 201.5u, pushed down only when the face needs room):
- "STAY CLOSE, QUIETLY." at 49.66u
- two lines at 26u on a 40u line, 39u below: "We don’t send noise. Just slow letters — with scents, thoughts and something worth waiting for. You’ll be / the first to know about new aromas, restocks, and private rituals."
- **Signup form:** 726u wide, 115u below the text, 70u tall, with a 2u white bottom border.
- The placeholder "Email" is white at 26u.
- A 34×22u arrow button on the right slides 4px right on hover.
- On submit it validates the email and shows "Thank you — your first letter is on its way." or "Please enter a valid email address." beneath, in a polite live region.
- **Footer** (670u tall): two columns, 1047/2048 for the links and the rest for the soap photo.
- **Links panel:** padding 144u top, 192ux left, 89ux right. Three columns (285ux, 284ux, rest):
- Quick Links: Aromas · Rituals · Philosophy · Shop
- Resources: FAQ · Shipping & returns · Track my order
- Socials: Instagram · Facebook · Twitter
- Headings at 20.4u, links at 21u, 20.5u apart.
- **Legal row:** "Privacy policy" and "Terms & conditions" at 18.2u, 30u from the bottom.
- **Over the soap photo:** "contact@orris.example" and "All rights reserved © 2024 ORRIS." in white at 18.2u, 30u from the bottom, with a soft dark text shadow.
- Links fade to 55% on hover.
## Motion (UI)
- **Entrance:** one CSS sequence with backwards fill:
- the title wipes up out of a clip (0.9s from 0.12s)
- the note rises (0.48s), then the form (0.79s), and the field's underline draws left to right (0.86s)
- the three link columns rise, staggered from 1.12s
- the legal row and the contact line fade in last (to about 2s)
- **Reduced motion:** no transitions and no video.
## Acceptance check (1440×960)
- The rain-glass band fills the top with the woman's face clear of the centred text, and the rain visibly runs in the loop.
- The off-white links panel and the ORRIS soap on wet stone sit side by side below.
- **Content:** no real brands.