It doesn’t need to have any interactions, and should cover the full width of a container. The text font and size doesn’t matter as much, as I can edit that on my own.
It seems like I can use the feature lists, but it doesn’t provide the diagram of the timeline (vertical rod, divided into segments by circles).
@rngu one approach you can take is using rows of two columns and flip-flopping the order of content in each column for each row.
Then stack the rows this way you can organize the content and make the middle line with an absolute positioned div block that spans the height of the parent container which is holding all of the rows
Allright @rngu ! So here’s how I made it using the Row widget (like @Waldo pointed out) and some divs. I will spell out all classes i used for this. You can of course use your own class names.
Drag in a Section (if want your whole timeline inside just one section, drag in a Div instead!). Name it Timeline Wrapper. Set background color.
Drag in a Container and call it Timeline Container. Set text alignment to “center”.
Drag in a H1 and give it a class. Style it with bottom border and bottom padding of 10-15px.
Drag in a Div inside Timeline Container and name it Timeline
Inside Timeline Container, drag in a Row Widget. Name it Timeline Row. Set it to position: relative.
Give each column a name of Timeline Left Column and Timeline Right Column. Set it to position: relative. Style the right column width a left border of 5px
In each column, drag in a Div and call them Timeline Left Box respectively Timeline Right Box. Set it to position: relative.
Inside Timeline Left Box and Timeline Right Box, drag in a div in each of them and call it Timeline Left Content and Timeline Right Content. Set each side that faces the timeline bar with a 30px margin. Set full padding to 20px and give them a background color. Set the Timeline Right Content with a top padding of 40% and the Timeline Left Content with a top padding of 20%.
Add a heading and a paragraph text inside the Timeline Right/Left Content.
Inside Timeline Left Box and Timeline Right Box, add a Div. Call it Left Triangle and Right Triangle respectively. They need to be above Timeline Right/Left Content in order. Rotate each div 45°. Set them to position absolute, give them the same background color as the Timeline Right/Left Content and align the so they make the appearance of triangle (they are placed underneath Timeline Left/Right Content and are just sticking out a bit).
Inside Timeline Right/Left Content, add a div in each of them and place it between the Heading and Paragraph. Name them separately; in this case it’s Timeline Mini Circle Left and Timeline Mini Circle Right. Give them a full padding of 10px, a 3px border, 50% border radius, display inline block and a background color same as the main Timeline Wrapper . Give it position: absolute. Align them accordingly to the triangles you created in step 10.
Go back to Timeline Wrapper. Add a text element and name it Timeline Year. Type in the year (“2012”). Set it to display inline block, 50% border radius and give it a full padding. You need to adjust the top/bottom padding so it creates a nice, even circle. Add a background color and finally set it to position absolute. Align it so its centered on the Timeline Bar. Voilá!. Done!
Now, this is built with two boxes that contains the heading and text, but in your example the second year (2014) contains four boxes. To replicate that you’ll just:
Duplicate Timeline Holder (then change the year to "2014 in that circle).
Duplicate the Timeline Left Box and Timeline Right Box inside the Timeline Left Column and Timeline Right Column respetively so that you have two _Timeline Left Bo_x and twoTimeline Right Box. Then you need to add a sub class (I call them Second Left Content and Second Right Content) to each of these to alter the top padding percentage. Decrease it to maybe 10% from the default 40%/20% you added earlier.
This is just optimized for desktop mode so you need to adjust all position: absolute percentage values on the tablet and phone versions so they align correctly.
I haven’t written out all percentage numbers for positioning etc. But you’ll find everything here:
You probably do all of this with Flexbox too if you want to go the more advanced route but that’s whole another story…
Feel free to ask question (or pick on me if I screwed up)
