A scroll-driven story page: a full-bleed illustrated hero that melts away as you scroll, dark and white sections with wiping illustrations, a working module slider and a nav that changes colour with the section under it.
## Goal Design a landing page for Fathom, a open-water dive training academy. Keep the tone calm, confident and adventurous. Use the style, layout, image and motion rules below exactly. Replace the sample content with content that fits the goal, keeping the same sections, the same number of items in each, and similar text lengths. ## Style Keep this exactly: it is what makes the design look the way it does. The page is a scroll-driven story built from big flat-vector illustrations, bold condensed headings and small, quiet text, alternating between deep night-blue sections and clean white ones. - Fonts, from Google Fonts: **Barlow Condensed** (600, 700) for the hero heading and the white section's uppercase heading only; **Inter** (400, 500, 600) for everything else. Section headings use Inter 600 with letter-spacing -0.025em and line-height 1.1. - Colors: night #061C27, deep sea #0A2F40, module cards #0B3043, the last dark section #082838, teal #2FC4C0, coral #E5533D (hover #C9412D), ink #12222B, muted text #5B6B73, white #FFFFFF. Eyebrow labels (11px, weight 500, normal case, never uppercase, letter-spacing 0.02em) are coral on white, white at 50% on dark, and amber #FFB36B in the last section. - Buttons are small and square (36px tall, 22px side padding, 2px radius, 11.5px weight 500). "White" buttons are white with night text (teal on hover); "coral" buttons are coral with white text; both lift 2px on hover. - A short 28 × 2px coral dash sits between each section heading and its paragraph (26px above, 22px below). - Body text is small and light: clamp(11.5px, 0.88vw, 14px), line-height 1.6, white at 72% on dark, muted on white, max-width 430px. - Illustrations are flat vector art with soft gradients and warm orange rim lighting in a dusk palette (see Images). They are cropped to cover their frames and never stretched. - Every focusable element shows a 2px coral focus outline with 3px offset. - The page is fluid and fills the full width of the screen: side padding clamp(20px, 3.4vw, 64px), no max-width on sections. ## Layout 1. **Nav**: fixed to the top, 72px tall, side padding as above, z-index above everything. Left: the brand name (15px, weight 600). Right: the links Courses (jumps to the modules section), Dive Planner (a placeholder #), Our Crew (jumps to the last section), Journal (a placeholder #) (11.5px, weight 500, clamp(22px, 3.2vw, 56px) apart, a thin underline that grows on hover), then a "Sign in" button (34px tall, 24px side padding, 1px border in the current text colour, 2px radius, fills with the text colour on hover). **The nav's text colour follows the section under it**: white over dark sections and the hero, ink (#12222B) over white sections, changing over 400ms. 2. **Hero**: full width, 100vh tall (at least 640px). The hero illustration fills it (cropped to cover, focused at 58% across and 62% down), with a soft dark gradient over its left half (90deg, rgb(6 28 39 / 0.5) to transparent at 55%) so the text stays readable. At the left (left padding, top 17%, max-width 560px): the heading "Deep Horizon" in Barlow Condensed 700, uppercase, two lines, clamp(60px, 9.4vw, 170px), line-height 0.9, white with a soft shadow; under it, 22px down, a paragraph (white at 82%, max-width 360px); and, 24px below the paragraph, a white "Start Training" button. 3. **Dark story section** (night background, at least 100vh): the illustration fills the left 62% of the section, full height, with a gradient on its right edge that fades into the night background (transparent at 55% to solid at 100%). The text sits in the right column (starting at about 57% across, vertically centered, max-width 560px): a small eyebrow, the heading (Inter 600, clamp(26px, 3.1vw, 50px)), the coral dash, a paragraph and a white "Read more" button. 4. **Modules section** (white, padding clamp(80px, 9vw, 150px) at the top, clamp(70px, 7vw, 120px) at the bottom): a header row with, on the left, a coral eyebrow and the uppercase heading in Barlow Condensed 700 (clamp(30px, 3.6vw, 58px), line-height 0.98, two lines), and on the right a small right-aligned paragraph (11px, muted, max-width 320px) with a short 28 × 2px coral line above it. Below it, a **module slider**: a viewport that starts at the left padding and runs to the right edge of the screen (so the next card is cut off by the screen edge), holding a horizontal track of three equal cards with a clamp(16px, 2vw, 32px) gap. Each card is clamp(320px, 57vw, 1150px) wide and clamp(320px, 29vw, 560px) tall, with a #0B3043 background and two columns (46% / rest): the illustration on the left, with a 6px teal strip along its bottom edge; and a panel on the right with padding clamp(18px, 2vw, 34px), holding the labels "Module" (left) and "01/03" (right) at 10.5px in white at 65%, then, pushed to the bottom, a title (Inter 600, clamp(20px, 1.9vw, 32px)), a short paragraph (white at 70%) and a small outlined "Next" button (30px tall, 1px white border at 70%, fills white on hover). The active card is fully opaque; the other cards are at 45% opacity. Under the slider, right-aligned, 26px below: three progress lines (each clamp(40px, 5vw, 80px) wide, 2px tall, #D5DADD, the active one coral) and, 28px later, two 44px square coral arrow buttons (left and right triangles, white), the one that can't go further at 35% opacity. 5. **Zenith section** (white, two columns): on the left, a framed portrait illustration with no border, radius or shadow (width clamp(240px, 24vw, 440px), aspect ratio 3 / 4.1, starting 7vw in from the left padding); on the right (max-width 520px, vertically centered) a coral eyebrow, the heading (Inter 600, clamp(24px, 2.5vw, 40px), ink), the dash, a muted paragraph and a coral "Read more" button. 6. **Crew section** (#082838, at least 100vh, two columns 46% / 54%): the text on the left (left padding, max-width 600px): an amber eyebrow, the heading (white, Inter 600, clamp(26px, 3vw, 46px)), the dash, a paragraph in white at 72% and a white "Read more" button; the portrait illustration fills the right 56% full height, with a gradient on its left edge fading into #082838. 7. **Footer**: a night bar with 22px vertical padding and 11px text in white at 55%: the academy name on the left, a copyright line on the right. Under 900px wide: the nav keeps only the brand and "Sign in". The hero text starts at 14% down, and the hero picture is focused at 80% across and 60% down (and zooms from 80% across, 55% down) so the sea stack and lighthouse stay in view on a tall screen. The dark story and crew sections stack with their illustration on top (78vw tall, fading into the section colour at the bottom) and the text below. The module header stacks, and each card is 84vw wide with the illustration on top (54vw tall, the teal strip under it) and the panel below (at least 230px), so the next card still peeks in. The zenith section stacks with a 68vw wide frame above the text. ## Motion Easing for everything: cubic-bezier(0.22, 1, 0.36, 1). - **Hero on scroll**: as you scroll through the first screen (progress p from 0 to 1 over the hero's height), the hero picture zooms from 1 to 1.16 (from its focus point at 62% across and 55% down), while the hero text fades to nothing (opacity 1 - 1.5p) and drifts up 70px, so the heading seems to melt into the picture. - **Hero on load**: the picture settles in from a blur (10px, transparent) over 2200ms. - **Reveals**: eyebrows, headings, dashes, paragraphs, buttons and the module slider fade in and rise 28px over 900ms when 18% visible, staggered 100ms apart. Each animates once. The big illustrations (dark story, zenith frame and crew) **wipe in from the left**: their picture is clipped to inset(0 100% 0 0) and opens to inset(0) over 1300ms. Put the clip on the inner picture, and watch the outer frame with the observer (a fully clipped element is never seen as visible). - **Parallax**: those three illustrations are 114% as tall as their frame (inset -7% 0 inside it) and drift vertically by (the picture's centre minus the screen centre) × -0.06 as you scroll. - **Nav tone**: while scrolling, find the section under the middle of the nav and switch the nav to that section's tone (each section carries data-tone="dark" or "light"). - **Slider**: the arrows, the progress lines, each "Next" button (it wraps from the last card back to the first), a horizontal swipe of more than 50px and a resize all move the track by one card width plus the gap, over 900ms. The active card fades to full opacity over 700ms, the inactive ones to 45%; the progress lines and arrow states update. - **Reduced motion**: with prefers-reduced-motion: reduce, show everything at once, with no wipes, zoom, parallax or fades. ## Sample content - Brand "Fathom" in the nav; links Courses, Dive Planner, Our Crew, Journal; button "Sign in". - Hero: heading "Deep Horizon". Paragraph "For many, open-water certification feels like an unreadable chart, full of tables, tides and limits to memorise. Place your trust in our experience, and we’ll help you navigate." Button "Start Training". - Dark story: eyebrow "Dive theory". Heading "Don’t lose your bearings in a sea of information." Paragraph "With over 20 years of experience between our team of instructors, we know the swells and the shortcuts, and we have the expertise to help you read the water. We help you stay calm, focus on what’s essential and train only on what matters. Think of us as your compass for the certification exam." Button "Read more". - Modules: eyebrow "Complete dive instruction". Heading "Our complete / course of modules". Right note "Our expertly structured and organised programme of modules means you only study the right information, taught in the right order." Cards: "01/03 Safety Systems" (Safety systems are the backbone of every dive plan. You will learn how redundancy, buddy checks and emergency signals are designed, and how each one protects you underwater.), "02/03 Navigation & Charts" (Navigation is how you find your way home. You will read charts, tides and currents, plot a route with a compass and learn how each choice affects your time and air.), "03/03 Gas & Pressure Planning" (Planning your gas is planning your safety. You will calculate consumption, reserves and turn pressures, and learn how depth changes every number on your gauge.). Each card has a "Next" button. - Zenith: eyebrow "Dive leadership". Heading "Turn your training into your personal best depth." Paragraph "With over 20 years of experience between our team of instructors, we have the expertise to help you avoid the most treacherous mistakes and stay calm under pressure. We help you organise the data, and train your focus only on what’s essential. Think of us as your compass for the certification exam." Button "Read more". - Crew: eyebrow "Dive leadership". Heading "Let our experienced crew guide your way to success." Paragraph "With over 20 years of experience between our team of instructors, we know the swells and the shortcuts, and we have the expertise to help you read the water. We help you organise the data and train your focus only on what’s essential, one dive at a time." Button "Read more". - Footer: "Fathom Dive Academy" and "© 2026 Fathom. Train calm. Dive deep." ## Images Every image slot below must show a real image, never an empty box or emoji. Each slot has an image prompt in **Image prompts** at the end of this prompt. 1. If you can generate images, generate one for each slot from its image prompt, all in the same illustration style. 2. Otherwise, load each slot's image from the file name given below (in an `images/` folder next to the page), so the user can generate the images from the image prompts and drop them in. Until they load, every slot shows a deep sea gradient (170deg, #12506A, #0A2F40 at 60%, #061C27), and the hero shows a dusk gradient (180deg, #1F6F86, #5C6FA8 at 45%, #0C3347 at 70%, #061C27). Slots: - Hero, `images/hero-seascape.jpg`; dark story, `images/cave-explorers.jpg`. - Module cards, in order: `images/module-safety.jpg`, `images/module-navigation.jpg`, `images/module-gas.jpg`. - Zenith frame, `images/summit-team.jpg`; crew section, `images/jetty-crew.jpg`. ## Output A single self-contained HTML file with CSS in a `<style>` tag and vanilla JavaScript in a `<script>` tag. The only external files allowed are the two Google Fonts and the images above; no libraries or frameworks. Designed for a 1440px-wide screen, filling the full width of any screen, and responsive down to 375px wide with no horizontal scrolling, with semantic HTML (header with a nav, a main landmark, sections with headings, articles for the module cards, real buttons). ## Image prompts Use these with any image generator. Shared style for all seven: flat vector editorial illustration with soft gradients, subtle grain and warm orange rim lighting on the figures, in a dusk palette of deep teal, navy and midnight blue with coral and amber highlights; faceless stylised people in dark jackets; no text, no logos. - **hero-seascape.jpg** (16:9): Wide dusk seascape: a tall rocky sea stack island in the distance with a small lighthouse, glowing coral-orange on its sunlit side, layered misty islands, a calm teal sea, and a sky of teal and violet-blue with soft clouds. In the foreground bottom-left, a group of five sailors and divers in dark jackets stand on a dark rocky headland among silhouetted pine trees, one looking through binoculars and one holding a coral-orange cloth, rim-lit in orange. Dark pine silhouettes frame the left and right edges. The upper left half of the frame is calm sky and water, left clear. - **cave-explorers.jpg** (4:3): A group of four explorers in dark jackets inside a dark sea cave at night, one holding up a glowing lantern and a glowing paper chart, another crouching by the water, warm amber light on their faces and clothes, a bioluminescent teal glow on the cave walls and water, deep navy shadows, a pair of tiny glowing eyes in the darkness. - **module-safety.jpg** (1:1): A professional in a dark jacket and sunglasses standing confidently, surrounded by glowing amber icons of a shield, a lifebuoy, a radio and a cloud connected by thin lines, on a deep navy and teal background. - **module-navigation.jpg** (1:1): A navigator in a dark jacket leaning over a large glowing nautical chart on a table with a brass compass and dividers, holographic coral-orange route lines rising from the chart, a dim cabin with a round porthole showing the sea at dusk. - **module-gas.jpg** (1:1): A woman diver in a dark wetsuit holding up a pressure gauge, a diving tank beside her, glowing teal numbers and dials floating around her, on a deep navy background with coral highlights. - **summit-team.jpg** (3:4): Three professionals in dark jackets standing and sitting on top of a coral-orange rocky summit, one raising a white paper in the air, the others looking out at the horizon, a dusk sky of deep violet-blue and teal with soft clouds behind them. - **jetty-crew.jpg** (3:4): Back view of a group of professionals in dark jackets, one in an orange sweater, walking together down a long wooden jetty toward a calm dusk sea and misty teal mountains, a dense pine forest in teal and deep blue on the far shore, a soft violet sky.
