Create a Hexlet company logo using the power of CSS and the CSS Transform module. In this exercise, you will need to utilize your knowledge of two-dimensional transformations and their combination
The layout structure is already presented in the index.html file. You can change it if necessary. The logo itself can be divided into 6 parts:
- Rhombus
- The left side of the letter "H"
- Bevel of the left side of the letter "H"
- The right side of the letter "H"
- Bevel of the right side of the letter "H"
- The central horizontal part of the letter "H"
If you select all these parts with a stroke, they will look like this:
The image is a guide to what the solution to the problem might look like. However, you can find other solutions as well. Tests don't check exactly how you solved the problem. The final result matters.
Please note that the bevel at the top of the horizontal lines occurs by creating the same rhombus as at the top of the logo, only smaller. This is necessary in order to preserve the composition in terms of design.
Variables
Inside the app.css file, you will find many variables that will help you solve the problem. By their naming, you can understand the purpose, however, we will describe them here:
--bg-bodyis the base background color. The variable will help hide the bevel on the horizontal lines :)--logo-rhombus-side— size of the rhombus side. Initially, a rhombus is obtained from a square--logo-line-width- vertical line width and horizontal line height. This size will help in creating a small bevel diamond.--logo-line-height- vertical line height--logo-line-radius— vertical line bottom rounding value--logo-transform-rotate- diamond rotation value--logo-transform-skew- skew value of the rhombus along the x and y axes
For full access to the challenge you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.