Close

Timeline style 9

This is a template of a timeline view with its labels spread around the timeline tree, designed with CSS and HTML. The colors of the labels and form, have been declared as var variables in CSS so the same variable can be reused in several places easily. Those values are; white:#fff, black:#222, color_1: linear-gradient(to right,#E7007B,#E7007B,#BF1424,#BF1424), color_2: linear-gradient(to right, #F04302,#F04302,#FC8819,#FC8819), color_3: linear-gradient(to right, #99C840, #99C840, #DEE420, #DEE420),andcolor_4:linear-gradient(to right, #0994C1, #0994C1, #70B1A5, #70B1A5). The body of the form is given a style set of font family of 'Niramit', sans-serif, padding of 40px 0 20px, margin of 20px 0, and a position as relative. Each timeline label has been assigned a color of color_1, color_2, color_3, and color_4 to get a combination of linear gradient colors. The title of the label is given a style set of font size as 20px, font weight as 500, letter spacing as 1px, padding as 10px 20px, and text transform as uppercase to convert the text to uppercase whereas the timeline year is given the styles of font size as 30px, and font weight as 700. The icons have been imported to the form with the CSS framework Font Awesome.

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.