Текст

Пора заняться небольшим проектом! В этом мини-проекте вы самостоятельно оформите целую страницу, используя то, что узнали в первых трёх уроках: цвета, текст, отступы и размеры.

Упражнения здесь немного отличаются от прежних. Они описывают, как должна выглядеть страница, а не какие классы использовать. К результату обычно ведёт несколько путей, поэтому выбирайте те классы, которые понятны вам: проверки смотрят на результат в окне просмотра, а не на ваши классы. Если застрянете, вернитесь к уроку, где вы узнали то, что нужно.

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

В конце карточка будет выглядеть так:

Текст. В этом упражнении текст получает цвета и внешний вид:

• У страницы светлый фон с лёгким оттенком, например amber-50, а текст тёмно-серый, а не чёрный.
• Название крупное (не меньше 36 px), жирное, шрифтом с засечками и собственного цвета, например тёмно-оранжевого или янтарного.
• Строка над названием — маленькая подпись: не больше 14 px, заглавными буквами, с увеличенным расстоянием между буквами и светлее серого цвета, чем текст.
• Заголовки «Ингредиенты» и «Приготовление» крупнее текста (не меньше 20 px) и жирные.
• Перед ингредиентами стоят маркеры.

Совет: без классов у списка нет маркеров. Вспомните первый урок: Preflight их убрал, а чтобы маркеры было видно, они должны находиться внутри пунктов списка.