Создайте логотип компании «Hexlet» используя возможности CSS и модуля CSS Transform. В этом задании вам помогут знания двухмерных трансформаций и их комбинирование
Структура вёрстки уже представлена в файле index.html. Вы можете её поменять, если это необходимо. Сам логотип можно разделить на 6 частей:
- Ромб
- Левая часть буквы «H»
- Скос левой части буквы «H»
- Правая часть буквы «H»
- Скос правой части буквы «H»
- Центральная горизонтальная часть буквы «H»
Если выделить все эти части с помощью обводки, то они будут выглядеть так:
Изображение является ориентиром того, как может выглядеть решение задачи. При этом вы можете найти и другие решения. Тесты не проверяют то, как именно вы решили задачу. Важен финальный результат.
Обратите внимание, что скос вверху горизонтальных линий происходит посредством создания такого же ромба, как и сверху логотипа, только меньшего размера. Это необходимо для того, что бы сохранить композицию с точки зрения дизайна
Переменные
Внутри файла app.css вы найдёте множество переменных, которые помогут решить задачу. По их именованию можно понять назначение, но опишем их отдельно в рамках этого файла:
--bg-body— базовый фоновый цвет. Переменная поможет скрыть скос на горизонтальных линиях :)--logo-rhombus-side— размер стороны ромба. Изначально ромб получается из квадрата--logo-line-width— ширина вертикальной линии и высоты горизонтальной. Этот размер поможет в создании маленького ромба для скоса--logo-line-height— высота вертикальной линии--logo-line-radius— значение скругления вертикальной линии снизу--logo-transform-rotate— значение поворота ромба--logo-transform-skew— значение наклона ромба по оси x и y
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.