Úvodní sekce a tlačítko

Teď úvodní stránka: v náhledu klikněte na Úvod. Nahoře je úvodní sekce s hlavním nadpisem a tlačítkem „Co hrajeme“. Ve cvičení Nejdřív mobil jste viděli, že 60pixelový nadpis je na mobil příliš velký. Proto má nadpis na mobilu text-4xl a od 768 px md:text-6xl a stejně se mění i polstrování sekce: py-12 md:py-20.

Odkaz „Co hrajeme“ má zase vypadat jako tlačítko. Odkaz je řádkový prvek, takže potřebuje inline-block, jinak by jeho polstrování neodsunulo text nad ním. A tlačítko potřebuje stavy z lekce Hover, focus a další stavy:

  • hover:bg-zlata/80: pod ukazatelem myši zlatá s neprůhledností 80 %, takže trochu prosvítá krémová a tlačítko zesvětlá. Barvy z vašeho motivu fungují s modifikátorem průhlednosti stejně jako barvy Tailwindu.
  • transition-colors udělá změnu plynulou.
  • focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-noc: tmavý obrys s malou mezerou pro ty, kdo se po stránce pohybují klávesou Tab.

Pokyny

  1. V index.html nahraďte třídu úvodní sekce hero třídami py-12 text-center md:py-20. Jejímu h1 dejte třídy font-display text-4xl font-bold text-noc md:text-6xl a odstavci mt-4 text-lg.

  2. Třídu button odkazu „Co hrajeme“ nahraďte třídami mt-8 inline-block rounded-full bg-zlata px-6 py-3 font-bold text-noc.

  3. Přidejte tlačítku stavy: transition-colors hover:bg-zlata/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-noc. Obrys uvidíte, když kliknete na prázdné místo v náhledu a několikrát stisknete Tab.

ZpětDalší