Прайс-лист

Пора браться за ещё один проект! В этом мини-проекте вместе работают два последних урока, «Наведение, фокус и другие состояния» и «Адаптивный дизайн», а с ними всё, что вы изучили раньше. Как и в других мини-проектах, упражнения описывают результат, а классы выбираете вы.

Проект. Мур-кафе — это кафе, где гостям составляют компанию коты. За три упражнения вы доделаете его сайт: прайс-лист, который легко читать, форму бронирования столика, которая реагирует на действия посетителя, и раскладку для телефонов и для компьютеров. Цвета, тексты и раскладка для телефонов на странице уже готовы. Как и раньше, меняйте только классы, а не элементы.

Прайс-лист. В каждой строке прайс-листа (элемент li) слева стоит название напитка или десерта, а справа — его цена. Длинный список легче читать, если в нём есть полосы и линии:

• Строки чередуются: у каждой второй строки светлый фон, а у строк между ними фона нет.
• Тонкая линия отделяет каждую строку от следующей. Над первой строкой линии нет, под последней тоже.
• Чизкейк сегодня закончился: его строка бледная, с прозрачностью не больше 60%, а цена зачёркнута, но не название.

Совет: полосы и линии не должны зависеть от того, какая позиция стоит в какой строке. Когда кафе добавит десерт или перестанет продавать напиток, полосы всё равно должны чередоваться правильно, и менять классы не придётся. Вспомните варианты для положения элемента среди соседей.