Html: Логотип «Hexlet»

CSS: Transform (трансформация объектов) 1 сообщение
Обновлено: 04 мая, 12:07
15
Студентов
73%
Завершения

Создайте логотип компании «Hexlet» используя возможности CSS и модуля CSS Transform. В этом задании вам помогут знания двухмерных трансформаций и их комбинирование

Логотип Hexlet

Структура вёрстки уже представлена в файле index.html. Вы можете её поменять, если это необходимо. Сам логотип можно разделить на 6 частей:

  1. Ромб
  2. Левая часть буквы «H»
  3. Скос левой части буквы «H»
  4. Правая часть буквы «H»
  5. Скос правой части буквы «H»
  6. Центральная горизонтальная часть буквы «H»

Если выделить все эти части с помощью обводки, то они будут выглядеть так:

Структура логотипа Hexlet

Изображение является ориентиром того, как может выглядеть решение задачи. При этом вы можете найти и другие решения. Тесты не проверяют то, как именно вы решили задачу. Важен финальный результат.

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

Переменные

Внутри файла app.css вы найдёте множество переменных, которые помогут решить задачу. По их именованию можно понять назначение, но опишем их отдельно в рамках этого файла:

  • --bg-body — базовый фоновый цвет. Переменная поможет скрыть скос на горизонтальных линиях :)
  • --logo-rhombus-side — размер стороны ромба. Изначально ромб получается из квадрата
  • --logo-line-width — ширина вертикальной линии и высоты горизонтальной. Этот размер поможет в создании маленького ромба для скоса
  • --logo-line-height — высота вертикальной линии
  • --logo-line-radius — значение скругления вертикальной линии снизу
  • --logo-transform-rotate — значение поворота ромба
  • --logo-transform-skew — значение наклона ромба по оси x и y

Для полного доступа к испытанию нужен базовый план

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

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