Build this UI: landing page hero
The top section of a landing page: headline, text, two buttons and an illustration.
intermediateHTML & CSS
The task
Style the hero section to match the demo:
- Two columns on wide screens: text on the left, the illustration on the right. One column on phones.
- A big headline that shrinks smoothly on small screens (
clamp()), with "faster" in the brand colour. - Two buttons: a filled primary one and an outlined secondary one.
- The illustration is a rounded box with a soft gradient.
What you'll build
The finished result. Try it out, then build it yourself below.
Demo · drag the bottom edge to make it taller