Der Hero und der Knopf

Jetzt der Hauptinhalt. Auf einem breiten Bildschirm sind Textzeilen, die über das ganze Fenster laufen, schwer zu lesen, deshalb wird main zu einer Spalte in der Mitte der Seite. Wie im Abschlussprojekt des CSS-Kurses bekommt es eine max-width, eine maximale Breite: Auf einem großen Bildschirm ist die Spalte 960 Pixel breit, und auf einem Handy schrumpft sie auf die Breite des Bildschirms. margin: 0 auto setzt sie in die Mitte, und das Padding 0 32px hält den Text auf einem schmalen Bildschirm vom Rand fern.

Der Hero soll ins Auge fallen: viel Platz darüber und darunter (padding: 64px 0), alles in der Mitte und eine große Überschrift. Die Regel der Überschrift ist .hero h1, sie gestaltet also nur die Überschrift im Hero. margin: 0 entfernt die Außenabstände der Überschrift, sodass der Platz um sie herum nur das Padding des Heros ist.

Dann der Knopf. Ein Link ist ein Inline-Element, und solche Elemente sind nur so groß wie ihr Text. Mit display: inline-block bleibt der Link in seiner Zeile, wird innen aber zu einer Box wie ein echter Button (Buttons sind standardmäßig inline-block, wie du in der Lektion Display und Position gesehen hast). Dann bekommt er Padding, abgerundete Ecken, einen bernsteinfarbenen Hintergrund (#f59e0b), dunklen fetten Text (#1e1b4b, die Farbe des Headers) und keine Unterstreichung.