Hi, I want to make a responsive vertical timeline like this:
My specific questions are:
- How do I make a vertical line? Which html element
- How should I do the layout for responsive design? Should I use a unordered list, flex system, or grid system?
- How do I attach circles to the vertical line? Which html element?
- How do I alternate which side the timeline cards appear on?
Here’s what I experimented with:
- using a absolute positioned span element and doing css transformations to make it veritcal
- using a flex box with flex-direction column and then applying :nth-child(odd/even) to align the cards left/right
- switching to a grid system and applying grid-start to make the left and right cards start in a different column
- attempted to position a span element styled as a circle on the vertical line (I couldn’t figure this out)
- attempted to position a span element styled as a triangle on the end of the card, like a smartphone text-message appears (I couldn’t figure this out).
Any advice on how to build a responsive vertical timeline would be greatly appreciated!