Split-screen layout
The page cut into two equal side-by-side halves, usually one visual and one block of text, each doing its own job.
See it
What it is
A split-screen layout cuts the page into two side-by-side halves of equal weight, each with its own job. The classic pairing is visual on one side, headline and call-to-action on the other, often with the two halves running the full height of the viewport.
It shines in three places: a hero that needs one strong image without burying text on top of it, a fork in the road where two audiences or two plans deserve equal billing ('for designers' next to 'for developers'), and sign-in screens where a form sits beside brand artwork. If you want the same idea repeated down the page with the sides swapping each row, that is an alternating layout, not this.
Gotcha: equal halves means equal emphasis, so a true 50/50 fights you whenever one side is actually more important. Shift to 60/40 and the hierarchy resolves itself. Also decide on purpose which half comes first when it stacks on mobile, because the default source order usually puts the image above the message.
Ask AI for it
Build a full-height split-screen hero: two equal columns via CSS Grid (grid-template-columns: 1fr 1fr, min-height 100dvh, no gap). Left half is an image or solid color panel filling its side with object-fit: cover. Right half is vertically centered content with generous padding: eyebrow label, large headline, one supporting sentence, and a primary button. Below 768px, stack to one column with the text half first and the image capped at 45dvh.