Html: Instagram

CSS: Grid
23
Студента
60%
Завершения
Обновлено: 09 июня, 20:01

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

Instagram CSS


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


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

  • Шапка приложения.
  • Секция с историями.
  • Секция с постом.
  • Футер приложения.

Шапка

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

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

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

  • Отступ между историями: 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

Для полного доступа к испытанию нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
120
курсов
900
упражнения
2000+
часов теории
3200
тестов