HTML: Instagram

Instagram — одна из популярнейших социальных сетей для обмена фотографий. В этом испытании вы реализуете один из экранов, который появляется при просмотре новых постов.

---

Испытание не предполагает использование только CSS Grid. Сейчас вы знаете много различных инструментов для позиционирования элементов. Используйте те, которые посчитаете нужными.

---

Всё приложение можно разделить на 4 секции:

• Шапка приложения с атрибутом data-section="header"
• Секция с историями с атрибутом data-section="stories"
• Секция с постом с атрибутом data-section="post"
• Футер приложения с атрибутом data-section="footer"

Шапка

Для заголовка приложения используется шрифт GrandHotel. Это максимально похожий на оригинал шрифт, который можно найти под свободной лицензией. Заголовок располагается по центру относительно всего приложения и имеет размер в 32 пикселя и нормальной насыщенностью.

• Отступ между иконками: 15px
• Размер иконок: 25x25. Используйте доступные классы в файле стилей для создания иконок. Все иконки в вёрстке являются кнопками. Это наиболее верный вариант с точки зрения доступности, так как каждая кнопка выполняет определённое действие, а не является ссылкой. Для описания иконок используйте атрибут aria-label. Значение этого атрибута будет прочитано скринридерами.
• Фон шапки: #fafafa
• Внутренние отступы: 20 пикселей по вертикали и 15 пикселей по горизонтали.

Чтобы правильно расположить элементы:

• Разбейте секцию на 4 колонки
• Правые кнопки оберните в единый блок и расположите их в конце блока
• Заголовок занимает две колонки

Секция с историями

• Отступ между историями: 20px
• Внутренний отступ секции: 10px
• Сверху и снизу секции находится граница. Воспользуйтесь доступными атомарными классами.
• Каждый блок с историей является кнопкой и занимает 65 пикселей по ширине. Обеспечьте правильную работу с переполнением текста. Текст имеет отступ сверху в 5 пикселей и размер шрифта в 12 пикселей. Насыщенность шрифта: 500.
• Внутренний отступ изображения: 5px
• Цвет границы: #e0e0e0.

Имена и аватары:

• Ваша история — avatar_1
• alex — avatar_2
• jediAcademy — avatar_3
• PythonCool — avatar_4

Все изображения находятся в директории assets/images

Секция с постом

Секцию можно разделить на три логические части:

• Секция пользователя.
• Изображение.
• Футер с кнопками взаимодействия и текстом.

Секция имеет размер шрифта в 13 пикселей. Внутренние отступы: 15px по вертикали и 10 пикселей по горизонтали.

Секция пользователя

• Ширина аватара: 35px
• Граница: 1px с цветом #e0e0e0
• Отступ справа: 10px
• Кнопка «Больше действий» имеет ширину в 15 пикселей

Футер

• Граница снизу: 1px с цветом #c6c6c8
• Размер шрифта: 13px
• Внутренние отступы: 20 пикселей по вертикали и 15 пикселей по горизонтали
• Отступ между кнопками: 20px
• Отступ снизу от кнопок: 20px

Тексты:

• Нравится: 2 165
• hexlet_code А скоро мы хотим открыть направление фотографии. Записывайтесь

Отступ между текстами: стандартный.

Футер приложения

В футере располагается 5 кнопок с равными расстояниями между ними.

• Цвет секции: #fafafa
• Внутренние отступы: по 20px

Подсказки

• Для создания кнопок используйте тег <button>. Чтобы эти кнопки имели базовую доступность, добавьте атрибут aria-label с описанием действия.
• Обратите внимание на доступные классы в app.css. В нём содержатся все доступные шрифты и пути до иконок.
• Иконки располагаются в директории assets/icons. Сверьтесь с ними.
• Добавляйте заголовки в секции. Это поможет при прохождении валидации. Для скрытия ненужного визуального текста используйте класс sr-only