Kroky adopce a formulář

Zbývají dvě sekce: Jak adoptovat (id="adopce") se třemi kroky v číslovaném seznamu ol a Kontakt (id="kontakt") s adresou a formulářem.

Zase stejné třídy. Obě sekce potřebují stejnou šířku a polstrování jako Naše kočky. Třídy můžete zkopírovat, nebo je zapsat jen jednou jako vlastní třídu, třeba .sekce v @layer components s @apply, jako v minulé lekci.
Kroky vedle sebe. Na telefonech jsou kroky pod sebou a od md: výš vedle sebe: mřížkou grid gap-6 md:grid-cols-3, nebo flexboxem flex flex-col gap-6 md:flex-row.
Kulatá čísla. Preflight seznamu odebral čísla, a tak má každý krok své číslo ve span. Kruh je čtverec s úplně zaoblenými rohy (size-10 rounded-full) a flex items-center justify-center dá číslo doprostřed.
Formulářová pole. Preflight polím odebral i rámečky a polstrování, takže skoro nejsou vidět. Dejte jim rámeček, polstrování a zaoblené rohy. Každý popis (label) je se svým polem v jednom prvku div: třídy flex flex-col gap-1 na něm dají popis nad pole.
Fokus. Návštěvníci, kteří formulářem procházejí klávesou Tab, potřebují vidět, ve kterém poli právě jsou. Dejte polím i tlačítku výrazný styl pro fokus, třeba focus:outline-2 focus:outline-brand-500. Obrys nikdy jen neodstraňujte (outline-hidden), aniž byste ho něčím nahradili.

Na širokých obrazovkách mohou být adresa a formulář vedle sebe: mřížkou může být i div, který je obsahuje.

Pokyny

Dejte sekcím #adopce a #kontakt stejnou šířku, vycentrování a polstrování jako #kocky a jejich nadpisům stejný vzhled.

Uspořádejte tři kroky (prvky li) na telefonech pod sebe s mezerami a od md: výš vedle sebe, třeba třídami grid gap-6 md:grid-cols-3 na ol. Dejte i každému kroku vlastní box, třeba rounded-2xl bg-white p-6 shadow-md.

Udělejte z čísel kroků kulaté štítky s barvou pozadí a s číslem uprostřed, třeba flex size-10 items-center justify-center rounded-full bg-brand-500 font-bold text-white.

Upravte formulářová pole (oba prvky input a textarea): široká jako formulář, s rámečkem, polstrováním a stylem pro fokus, třeba w-full rounded-lg border border-stone-300 px-3 py-2 focus:outline-2 focus:outline-brand-500.

Upravte tlačítko Odeslat: barva pozadí, polstrování, ručička nad tlačítkem, styl po najetí myší a styl pro fokus, třeba cursor-pointer rounded-full bg-brand-500 px-6 py-3 font-semibold text-white hover:bg-brand-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500.

Začněte programovat zdarma

3/5