Правильный размер

Остался последний штрих: размеры. На широком экране карточка сейчас растянута на всю страницу, а строки приготовления длинные, и за ними трудно следить. Нажмите кнопку 1280 px в панели Ширина просмотра.

• Карточка никогда не шире 448 px, а на широких экранах находится посередине страницы. На телефоне она помещается на экране: попробуйте 375 px.
• Стопка оладий лежит посередине квадрата 64 × 64 px цвета мёда с логотипа сайта с рецептами, #f8d78b. В палитре такого цвета нет. Квадрат находится на 16 px выше подписи.

Совет: в уроке об отступах и размерах вы помещали лапку посередине квадратного блока. С оладьями работает тот же приём.

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