Záhlaví a zápatí

Záhlaví je na obou stránkách: logo a navigace. V projektu Web kina jste ho rozvrhli flexboxem, logo vlevo a odkazy vpravo. Na mobilu na to není místo. Podle zásady mobile first je záhlaví sloupec, navigace pod logem a obojí uprostřed, a od 768 px je to řada jako dřív:

<header class="flex flex-col items-center gap-2 bg-noc px-4 py-4 md:flex-row md:justify-between md:px-8">

To je dvojice flex-col md:flex-row ze cvičení Řada, nebo sloupec. items-center funguje v obou směrech: ve sloupci dá logo a navigaci doprostřed šířky, v řadě doprostřed výšky. md:justify-between je odsune ke krajům, ale jen v řadě.

Logo dostane písmo kina a zlatou barvu. Odkazy jsou bílé a pod ukazatelem myši zezlátnou. Starou třídu logo můžete smazat: žádné pravidlo ji už nestyluje.

Záhlaví i zápatí jsou na obou stránkách stejné, takže až je dokončíte na jedné stránce, zkopírujte je na druhou. Kontroly se dívají na obě.

Pokyny

  1. Na obou stránkách dejte header třídy z příkladu výše.

  2. Na obou stránkách nahraďte třídu loga logo třídami font-display text-2xl font-bold text-zlata, dejte nav třídy flex gap-6 a oběma odkazům v ní text-white hover:text-zlata.

  3. Na obou stránkách dejte footer pozadí, barvu textu, polstrování a mezeru nad ním, například mt-16 bg-noc px-4 py-6 text-center text-white md:px-8.

ZpětDalší