Adoptionsschritte und das Formular

Zwei Abschnitte fehlen noch: So adoptierst du (id="adoption") mit drei Schritten in einer geordneten Liste ol und Kontakt (id="kontakt") mit der Adresse und einem Formular.

• Wieder dieselben Klassen. Beide Abschnitte brauchen dieselbe Breite und dasselbe Padding wie Unsere Katzen. Du kannst seine Klassen kopieren oder sie nur einmal als eigene Klasse schreiben, zum Beispiel .abschnitt in @layer components mit @apply, wie in der vorigen Lektion.
• Schritte nebeneinander. Auf Smartphones stehen die Schritte untereinander und ab md: nebeneinander: mit einem Grid, grid gap-6 md:grid-cols-3, oder mit Flexbox, flex flex-col gap-6 md:flex-row.
• Runde Zahlen. Preflight hat die Nummern der Liste entfernt, deshalb hat jeder Schritt seine Zahl in einem span. Ein Kreis ist ein Quadrat mit ganz runden Ecken (size-10 rounded-full), und flex items-center justify-center setzt die Zahl in seine Mitte.
• Formularfelder. Preflight hat auch die Rahmen und das Padding der Felder entfernt, deshalb sieht man sie kaum. Gib ihnen einen Rahmen, Padding und runde Ecken. Jedes Label steht mit seinem Feld in einem div: flex flex-col gap-1 am div setzt das Label über das Feld.
• Fokus. Besucher, die sich mit der Tabulatortaste durch das Formular bewegen, müssen sehen, in welchem Feld sie sind. Gib den Feldern und dem Button einen deutlichen Fokusstil, zum Beispiel focus:outline-2 focus:outline-marke-500. Entferne die Outline nie einfach (outline-hidden), ohne sie durch etwas anderes zu ersetzen.

Auf breiten Bildschirmen können die Adresse und das Formular nebeneinander stehen: Das div, das sie enthält, kann auch ein Grid sein.