←WebSprout logoWebSprout

Capstone: A Real Hero Section

Stack everything you have learned — photo, gradient overlay, sizing, positioning — into a hero section you would actually ship.

Step 1 of 3

The brief

You are building the top section of a homepage for an imaginary brand called Mboga Direct — a market-to-door grocery service. The hero must:

  1. Show a recognisable photo behind it (use Picsum with seed market).
  2. Have a dark translucent overlay so the white text stays readable.
  3. Show a heading and a tagline, centred horizontally.
  4. Be at least 320 pixels tall.

Use what you learned: layered background-image, background-size: cover, background-position: center, and an rgba() overlay. The next step is the editor.