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

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

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

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