This is an example of a horizontal timeline view with animated icons, designed using CSS and HTML. The body of the timeline is given a font-family of 'PT Sans', sans-serif. The timeline years have been given an initial style set of height and width as 20px and position as absolute. The inner content of the label is given a color of #fff7e2 and a padding of 20px 10px 10px. The icons are given an animation of transform: rotateY(360deg), in a hover event. Each timeline label has been assigned a color of #EA2027, #1B1464, #EE5A24, and #009432, respectively. The title of the label is given a style set of font size as 25px, font-weight as 600, and margin as 0 0 15px 0. The label description has been given a style set of font size as 15px, color as #333, and letter spacing as 1px. The icons have been imported to the form with the CSS framework Font Awesome.

This is another template of a timeline view designed using HTML and CSS. The icons of the timeline labels have been positioned to get the timeline tree look. The body of the timeline is designed with CSS with its values set as font-family to ‘Nunito Sans', sans-serif, position to relative, and color to #fff. The text is aligned to the right side. The icons are given a height and width of 90px, the color of #fff, a font size of 40px, text-align as center, border-radius as 50% to make the icon a circle, and position as absolute. Each timeline label has been assigned a color of #E91E63, #2196F3, #009688, and #FF5722, respectively. The title of the label is given a style set of background color as #fff, font size as 20px, font-weight as 800, and text transform as uppercase to convert the text to uppercase always. The label description has been given a style set of font size as 15px. The font size of the main timeline title is set as 18px. The icons have been imported to the form with the CSS framework Font Awesome.

This is another template of a timeline view in a list view, designed with HTML and CSS. The body of the timeline is designed with CSS with its values set as font-family to ‘Nunito Sans', sans-serif, position to relative, color to #fff, min-height to 150px, display as block, and a padding of 20px 20px 20px 150px. . Each timeline label has been assigned a linear gradient color combination of #6C4ADC and #9C36BA, #E81C7E and #9C36BA, #E81C7E and #EE5167, #FA964A and #EE5167, respectively. The title of the label is given a style set of font size as 22px, font-weight as 800, and text transform as uppercase to convert the text to uppercase. The label description has been given a style set of font size as 15px and color of #666. The font size of the main timeline title is set as 18px. The icons have been imported to the form with the CSS framework Font Awesome.

This is another example of a timeline view but without a timeline bar, designed with HTML and CSS. The body of the timeline is designed with CSS with its values set as font-family to ‘Roboto', sans-serif, background color to #fff and position to relative. Each timeline label has been assigned a linear gradient color combination of #d62053 and #AF2850, #fc8d44 and #fc7114, #1071b2 and #0A5C96, #3fb1ea and #3DA6DC, respectively. The title of the label is given a style set of font size as 22px, font-weight as 700, and text-transform as uppercase to convert the text to uppercase. The label description has been given a style set of font size as 14px and line spacing as 1px. The font size of the main timeline title is set as 18px. The icons have been imported to the form with the CSS framework Font Awesome.

This is another template of a timeline view designed with HTML and CSS. The body of the timeline is designed with CSS with its values set as font-family to Roboto', sans-serif, and padding to 20px 0. The timeline tree has been assigned a color of #333, height as 100%, width as 15px, border-radius as 10px and position as absolute. The background colors of the timeline labels are set as #0985f9, #68B73A, #ff5500, and #8710d9 respectively. The font size of the main timeline title is set as 18px whereas the font size of the label title is set as 20px and description to 14px. The label title is given a style of Text transform as Uppercase to convert the text to uppercase always. The icons have been imported to the form with the CSS framework Font Awesome.

This is a template of a timeline view designed with HTML and CSS. The body of the timeline is designed with CSS with its values set as background to #dbdbdb, font-family to ‘Roboto', sans-serif, height to 100%, width to 15px and position to absolute. The timeline tree has been assigned a background color of #e7e7e7. The background colors of the timeline labels are set as linear-gradient styles and assigned color combinations of #734D8E #B26BC6, #1c6f82 #4491A2, #4e5db2 #7582D1, and #525156 #686C75 respectively. The font size of the main timeline title is set as 18px whereas the font size of the label title is set as 20px and description to 14px. The label title is given a style of Text transform as Uppercase to convert the text to uppercase always. The icons have been imported to the form with the CSS framework Font Awesome.