The Hero and the Button

Now the home page: click Home in the preview. At the top is the hero, the section with the headline and the button "See what's on". In the exercise Mobile First, you saw that a 60-pixel headline is too big for a phone. So the headline is text-4xl on a phone and md:text-6xl from 768 px up, and the hero's padding changes too: py-12 md:py-20.

The link "See what's on" should look like a button again. A link is an inline element, so it needs inline-block, or its padding wouldn't push away the text above it. And a button needs its states, from the lesson Hover, Focus and Other States:

• hover:bg-gold/80: under the mouse pointer, the gold at 80% opacity, so a little of the cream shows through and the button gets lighter. The colors of your theme work with the opacity modifier, just like Tailwind's own.
• transition-colors makes the change smooth.
• focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-night: a dark outline with a small gap for people who move through the page with the Tab key.