Úvodní sekce a tlačítko

Teď hlavní obsah. Na široké obrazovce se řádky textu přes celé okno špatně čtou, a tak z main bude sloupec uprostřed stránky. Stejně jako v závěrečném projektu kurzu CSS dostane max-width, největší šířku: na velké obrazovce bude sloupec široký 960 pixelů a na telefonu se zúží podle obrazovky. margin: 0 auto ho dá doprostřed a polstrování 0 32px udrží text dál od krajů úzké obrazovky.

Úvodní sekce má upoutat pozornost: hodně místa nad i pod ní (padding: 64px 0), všechno uprostřed a velký nadpis. Pravidlo nadpisu je .hero h1, takže upraví jen nadpis v úvodní sekci. margin: 0 odstraní okraje nadpisu, takže místo kolem něj tvoří jen polstrování sekce.

A tlačítko. Odkaz je řádkový prvek a ty jsou jen tak velké jako jejich text. S display: inline-block zůstane odkaz v řádku, ale uvnitř se z něj stane box jako ze skutečného tlačítka (tlačítka jsou řádkové bloky už ve výchozím stavu, jak jste viděli v lekci Zobrazení a pozice). Pak dostane polstrování, zaoblené rohy, jantarové pozadí (#f59e0b), tmavý tučný text (#1e1b4b, barva záhlaví) a žádné podtržení.