The Price List

Time for one more project! This checkpoint puts the last two lessons to work, states and responsive design, together with everything you learned before them. As in the other checkpoints, the exercises describe the result, and the classes are up to you.

The project. Purr Café is a café where cats keep the guests company. Over three exercises, you'll finish its website: a price list that's easy to read, a form for booking a table that reacts to the visitor, and a layout for phones and for computers. The page already has its colors, its text and a layout for phones. As before, change only the classes, not the elements.

The price list. Each row of the price list (an li element) has the name of a drink or a cake on the left and its price on the right. A long list is easier to read with stripes and lines:

• The rows take turns: every other row has a light background, and the rows between them have none.
• A thin line separates each row from the next one. There's no line above the first row and none below the last.
• The cheesecake is sold out today: its row is faded, to at most 60% opacity, and its price is crossed out, but not its name.

A tip: the stripes and the lines shouldn't depend on which item is in which row. When the café adds a cake or stops selling a drink, they should still take turns correctly, without changing any classes. Remember the variants for an element's position among its siblings.