Split-Screen Hero Section

HTML · CSS

codeinfoweb.com/design-prompts/hero-split-screen

The prompt

Build a split-screen hero section for a ceramics brand called Meridian, using only HTML and CSS.

Typography:
- Bricolage Grotesque from Google Fonts for the headline, wordmark and stat figures, weight 800
- Inter Tight for body copy and navigation
- Headline at clamp(46px, 7.4vw, 92px), line-height 0.93, letter-spacing -0.045em

Palette:
- Warm sand ground #F5F1E8, ink #171310, terracotta accent #C2542E
- The visual half is a deep sea-green gradient #3C5A54 into #22332F with a warm radial wash in the top left

Layout:
- A slim top bar across the full width: wordmark with a superscript mark, four nav links, a cart link with a count badge
- Left half: a pill eyebrow with a pulsing dot, a three-line headline where one word is italic and terracotta with a soft underline bar, a lede capped at 44ch, two buttons, then a horizontal rule and three stats as a real dl
- Right half: full-bleed panel, no padding, containing only CSS shapes — two large blurred colour blobs, a slowly rotating thin ring with a dot on its edge, a ceramic bowl built from two nested radial-gradient circles with an inset shadow, a hairline horizon, and a frosted caption chip in the corner

Motion, all CSS:
- Copy elements fade and rise in sequence, 80ms apart
- The ring rotates once every 26 seconds, the bowl floats on a 7 second ease-in-out loop, the eyebrow dot pulses
- Nav links get an underline that scales in from the left on hover
- Buttons lift 2px on hover and the primary one shifts to terracotta

Rules:
- One HTML file, one CSS file, no JavaScript, no images at all
- CSS custom properties for every colour
- The hero is a two-column grid at min-height calc(100vh - 84px), stacking under 1000px with the visual below the copy at a fixed 380px, and the nav hidden
- Semantic HTML: real header, nav, h1 and dl, visible focus states
- A prefers-reduced-motion block that disables all animation and transition

Return the complete code, ready to open in a browser.

Edit anything above before copying. Change the first line to rename the build, or the style word to shift the look.

About the split-screen hero section prompt

A landing hero divided down the middle: oversized headline and call to action on one side, a full-bleed visual panel on the other.

What you get

A slim top bar with a wordmark, four nav links and a cart link carrying a count badge
A three-line headline at clamp(46px, 7.4vw, 92px) with one word set in italic accent and a soft underline bar
A pill eyebrow with a pulsing dot, and a lede capped at 44 characters per line
Two buttons, one solid and one outlined with an inline play icon
Three trust stats marked up as a real definition list
A full-bleed visual panel built only from CSS: blurred colour blobs, a rotating ring, a ceramic bowl made of nested radial gradients, and a frosted caption chip

Techniques it uses

Worth knowing whether you run the prompt or write the code yourself.

clamp() for fluid type

clamp(46px, 7.4vw, 92px) scales the headline continuously between a floor and a ceiling. No breakpoint jump, and no media query needed for the type itself.

A CSS-only product shape

The bowl is two nested circles built from radial-gradient with an inset box-shadow for depth. No image request, and it stays crisp at any size.

Underline that scales from the left

Nav links use a ::after bar with transform: scaleX(0) and transform-origin: left, scaling to 1 on hover. Cheaper to animate than a border, and it composites on the GPU.

Layered blur for atmosphere

Two large blurred circles at 48px blur sit behind everything, giving the panel depth without a gradient mesh or an image.

How to adapt it

Replace the CSS visual with a photo

The right panel is one block. Drop an img with object-fit: cover in place of the shapes and delete the blob, ring and bowl rules. The grid and stacking behaviour are untouched.

Change which word is emphasised

The italic accent is a single em inside the h1, styled by h1 em. Move the em to any other word and the underline bar moves with it.

Flip the sides

Swap the grid order on .copy and .visual. Because the visual has no padding and bleeds to the edge, it works identically on either side.

Loosen the headline

line-height is 0.93 and letter-spacing -0.045em, which is deliberately tight for display type. At smaller sizes raise both, or the descenders will collide.

Frequently asked questions

What does the prompt return?

One HTML file and one CSS file for a full-height hero split into a text half and a visual half, ready to open in a browser.

How does it behave on mobile?

The two halves stack, the visual moves under the text, and the headline drops to a smaller clamp size so it never overflows.

Can I swap the image for a video or a gradient?

Yes. The visual panel is one block. Ask the model for a looping video or a mesh gradient instead and the rest of the layout is unchanged.

Which AI tools does this prompt work with?

Claude, Cursor, Codex, v0, ChatGPT and Gemini all handle it. Paste it as one message and ask for complete files.

Why is there no image in the hero?

So the section has no external requests and cannot break. Every shape is CSS, which also means it recolours with a custom property instead of a new export.

How do I keep the headline from overflowing on small screens?

The clamp floor is 46px, which fits 360px wide with the three-line break. If you write a longer headline, lower the floor rather than adding a breakpoint.