Halden.
A free travel design. A dark, warm, cinematic landing page for a private jet charter, led by a light serif headline over a golden-hour cabin photograph.
Make it yours
Describe your business and copy the prompt into ChatGPT, Claude or Gemini. It returns your own site in the Halden design, as one HTML file.
Prompt
5,554 characters
# Build a website in the "Halden" design You are a senior web designer and front-end engineer. Build one responsive, accessible landing page as a single self-contained HTML file (inline CSS and JavaScript, no frameworks, no build step; Google Fonts is the only allowed external request). Follow the design specification below closely: layout, type, palette, section structure and motion. Replace the demo brand with the business described here. ## The business - Name: not given; invent a short, credible name and say so at the top of your reply - What it offers: not given; ask one short question, or infer from the name - Audience: not given; write for a smart, busy visitor - Tone of voice: Confident and plain-spoken - Sections: keep the design's own sequence (Hero, Fleet, The quiet hour, How a flight works, Airfield quote band, Request a quote, Footer) and rename each section for this business ## Design: Halden (travel) A dark, warm, cinematic landing page for a private jet charter, led by a light serif headline over a golden-hour cabin photograph. A full-bleed cabin window at golden hour carries the first screen, with a large light serif headline split across two lines, the second in italic amber. Below it, quiet editorial sections in warm near-black: a hairline fleet list, a photo and text pairing, a three-step process and a cinematic quote band. Theme: dark. Palette: background #0f0c09, text #f3ece2, secondary text #b9ad9c, accent #d9a35b. Typefaces: Cormorant Garamond + Manrope. Mood: warm, hushed, cinematic. Near-black brown page, cream text, one amber accent. Everything is left aligned on a wide margin (clamp 20px to 64px), content capped at 1360px. Palette: background #0f0c09, raised panel #17130e, text #f3ece2, muted #b9ad9c, accent amber #d9a35b, hairlines rgba(243,236,226,.16). Type: Cormorant Garamond for display at weight 300 (italic 300 for emphasis, italic amber), Manrope 400 to 600 for UI and body. Body 17px to 18px, line-height 1.65. H1 clamp(52px, 8.4vw, 140px) with line-height .94; H2 clamp(40px, 5.4vw, 84px). Small labels are uppercase Manrope 14px with .14 to .2em tracking, muted or amber. Hero: full viewport height, photo covers the frame (object-position 62% 50%). Three scrims: horizontal dark gradient from the left, a bottom gradient, and a short top gradient for the nav. Logo is a spaced uppercase serif wordmark top-left, nav on the right with a "Book a flight" outlined pill that fills amber on hover. A small meta note sits top-left with a 1px amber rule. The headline sits bottom-left in two lines: "Leave on your time" in cream, then "arrive unhurried" in amber italic, indented about 9vw. Below: one paragraph and a "Scroll" cue with a 56px hairline and a travelling amber tick. Fleet: heading left, short paragraph right. A ruled list of three rows in a 6-column grid (index, serif name at up to 44px, description, three figures in 40px light serif with small caps labels for range, seats, speed). Row hover slides the row 14px right and draws an amber underline across in 800ms. The quiet hour: raised panel background, two columns. Portrait photo 4:5 on the left (slow 1.6s zoom on hover), text and a three-row spec table on the right. How a flight works: three columns separated by hairlines, each with a large amber italic serif numeral, serif h3 and muted paragraph. Quote band: full-width portrait photo cropped with object-position 50% 62%, min-height 78vh, bottom-weighted dark gradient, serif italic quote up to 60px and a small citation. Quote form: two columns, text and facts left, underline-only fields right (borders turn amber on focus), amber pill submit. Submit is intercepted and shows an inline confirmation. Motion: one staggered hero entrance (each element rises and fades, 1.1 to 1.2s, cubic-bezier(.22,1,.36,1), 130ms stagger). Otherwise only hover responses. Reduced motion removes the entrance, cue and transitions. Responsive: under 1000px the fleet rows and two-column sections stack; under 820px the nav becomes a Menu button opening a full-screen overlay with large serif links (Esc closes), the hero note hides and the scrim turns bottom-heavy. ## Images The design uses full-bleed photography. Use placeholder <img> elements with descriptive alt text and file names under img/ (for example img/hero.jpg), sized with width and height attributes and object-fit: cover, and list every image you need at the end of the file in an HTML comment: file name, aspect ratio, and a one-line photo brief in the style of the design, so they can be shot or generated later. ## Requirements - Copy: real, specific sentences for this business. No lorem ipsum. Short headlines, concrete claims, one clear call to action repeated at the end. - Accessibility: WCAG AA contrast measured against the actual background (add a scrim under text on photos), body text at least 16px, visible keyboard focus, semantic landmarks, one h1, alt text, labelled form fields. - Responsive: designed at 1440, 1024 and 390 pixels wide with no horizontal scrolling; the navigation collapses to a working menu button on small screens. - Motion: one orchestrated hero entrance plus motion that answers the visitor; respect prefers-reduced-motion. - Forms do not submit anywhere: prevent the default and show an inline confirmation. ## Before you answer - Check the first screen at 1440x900 and 390x844 reads as a finished, premium page. - Check every text colour against its background. - Return the complete HTML file in one code block, then the image list, and nothing else.
The design
A full-bleed cabin window at golden hour carries the first screen, with a large light serif headline split across two lines, the second in italic amber. Below it, quiet editorial sections in warm near-black: a hairline fleet list, a photo and text pairing, a three-step process and a cinematic quote band.
Palette
- Background#0f0c09
- Text#f3ece2
- Secondary#b9ad9c
- Accent#d9a35b
Type: Cormorant Garamond + Manrope
Sections, in order
- 01Hero
- 02Fleet
- 03The quiet hour
- 04How a flight works
- 05Airfield quote band
- 06Request a quote
- 07Footer
The specification the prompt sends to the model:
Mood. warm, hushed, cinematic. Near-black brown page, cream text, one amber accent. Everything is left aligned on a wide margin (clamp 20px to 64px), content capped at 1360px.
Palette. background #0f0c09, raised panel #17130e, text #f3ece2, muted #b9ad9c, accent amber #d9a35b, hairlines rgba(243,236,226,.16).
Type. Cormorant Garamond for display at weight 300 (italic 300 for emphasis, italic amber), Manrope 400 to 600 for UI and body. Body 17px to 18px, line-height 1.65. H1 clamp(52px, 8.4vw, 140px) with line-height .94; H2 clamp(40px, 5.4vw, 84px). Small labels are uppercase Manrope 14px with .14 to .2em tracking, muted or amber.
Hero. full viewport height, photo covers the frame (object-position 62% 50%). Three scrims: horizontal dark gradient from the left, a bottom gradient, and a short top gradient for the nav. Logo is a spaced uppercase serif wordmark top-left, nav on the right with a "Book a flight" outlined pill that fills amber on hover. A small meta note sits top-left with a 1px amber rule. The headline sits bottom-left in two lines: "Leave on your time" in cream, then "arrive unhurried" in amber italic, indented about 9vw. Below: one paragraph and a "Scroll" cue with a 56px hairline and a travelling amber tick.
Fleet. heading left, short paragraph right. A ruled list of three rows in a 6-column grid (index, serif name at up to 44px, description, three figures in 40px light serif with small caps labels for range, seats, speed). Row hover slides the row 14px right and draws an amber underline across in 800ms.
The quiet hour. raised panel background, two columns. Portrait photo 4:5 on the left (slow 1.6s zoom on hover), text and a three-row spec table on the right.
How a flight works. three columns separated by hairlines, each with a large amber italic serif numeral, serif h3 and muted paragraph.
Quote band. full-width portrait photo cropped with object-position 50% 62%, min-height 78vh, bottom-weighted dark gradient, serif italic quote up to 60px and a small citation.
Quote form. two columns, text and facts left, underline-only fields right (borders turn amber on focus), amber pill submit. Submit is intercepted and shows an inline confirmation.
Motion. one staggered hero entrance (each element rises and fades, 1.1 to 1.2s, cubic-bezier(.22,1,.36,1), 130ms stagger). Otherwise only hover responses. Reduced motion removes the entrance, cue and transitions.
Responsive. under 1000px the fleet rows and two-column sections stack; under 820px the nav becomes a Menu button opening a full-screen overlay with large serif links (Esc closes), the hero note hides and the scrim turns bottom-heavy.