Adoption Steps and the Form

Two sections are left: How to Adopt (id="adopt"), with three steps in an ordered list ol, and Contact (id="contact"), with the address and a form.

• The same classes again. Both sections need the same width and padding as Our Cats. You can copy its classes, or write them just once as your own class, for example .section in @layer components with @apply, as in the previous lesson.
• Steps side by side. On phones, the steps are one below another, and from md: up next to each other: with a grid, grid gap-6 md:grid-cols-3, or with flexbox, flex flex-col gap-6 md:flex-row.
• Round numbers. Preflight has removed the numbers of the list, so each step has its number in a span. A circle is a square with fully rounded corners (size-10 rounded-full), and flex items-center justify-center puts the number in its middle.
• Form fields. Preflight has also removed the borders and the padding of the fields, so you can hardly see them. Give them a border, padding and rounded corners. Each label is in a div with its field: flex flex-col gap-1 on the div puts the label above the field.
• Focus. Visitors who move through the form with the Tab key need to see which field they're in. Give the fields and the button a clear focus style, for example focus:outline-2 focus:outline-brand-500. Never just remove the outline (outline-hidden) without replacing it with something else.

On wide screens, the address and the form can be side by side: the div that holds them can be a grid, too.