Timeline is a common technique for presenting information on the websites. It is both informative and eye-catching, allowing you to quickly convey important milestones to the user.
There are many different designs for creating a timeline, and you will implement one of them in this exercise.
Here's the final layout:
All the necessary layout is already provided in the file index.html. Write the styles for the classes you need. Create them without linking to specific tags. This will allow you to use not only the given structure, but also build timeline on other tags.
Basic style for timeline wrapper
- Paddings: 30px top, 0px right, 30px bottom, and 50px left
- Draw a vertical line from the wrapper. It should extend to 100% of the height of the wrapper. Line width: 2px, color:
#fff
Basic style for timeline element
- Bottom margin: 100px. The last element has no margins
Basic style for circle element
- Width and height: 20px
- Color:
#80fcff - Top from the timeline element: 15%
- The circle must be centered against a vertical line
To round the element use the border-radius property with a value 50%.
Tips
- Consider the
leftvalues of the vertical line and the circle. Derive it from the width of the elements and the paddings of the.timelinewrapper
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.