Карточка с фото
Пора браться за новый проект! В этом мини-проекте пригодятся два последних урока: границы, тени и изображения, а также раскладка с помощью flexbox, grid и position. Как и в первом мини-проекте, упражнения описывают результат, а классы выбираете вы. Если в описании не указан точный размер или цвет, выберите свой.
Проект. Журнал о кошках проводит фотоконкурс, и читатели голосуют за лучшее фото. За три упражнения вы превратите фото в карточку, разместите галерею карточек и объявите победителя. Цвета и текст страницы уже готовы, так что можно сосредоточиться на карточках и раскладке. Как и раньше, меняйте только классы, а не элементы, и каждое упражнение начинается с готовой страницы из предыдущего.
В конце верх галереи будет выглядеть так:
Карточка с фото. В редакторе уже есть первая запись: article с фото и div с названием фото, именем автора и кнопкой голосования с числом голосов. Сделайте из неё карточку:
- Карточка белая, со светлой рамкой (не тёмного цвета текста), скруглёнными углами и тенью.
- Фото занимает всю ширину карточки и квадратное. Оно не сплющено: то, что не помещается в квадрат, обрезается.
- Верхние углы фото скруглены вместе с углами карточки, чтобы не выступать.
- Кнопка голосования овальная, как таблетка: её концы — полукруги.