Знакомство с кошками

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

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

Задача. У каждой кошки должна быть своя картинка, прямо под именем. Картинки лежат на нашем сайте, по таким адресам:

• Рыжик: /learn/tailwind/cat-orange.svg
• Тень: /learn/tailwind/cat-black.svg
• Снежок: /learn/tailwind/cat-white.svg

Не все, кто заходит на страницу, видят картинки, поэтому опишите каждую из них несколькими словами.

На странице картинки маленькие. Посетитель, который хочет получше рассмотреть кошку, щёлкает по её картинке, и она открывается в полном размере в новой вкладке, а страница приюта остаётся открытой в первой.