This is an example of a bootstrap timeline layout designed using HTML, CSS, and Bootstrap layout 4. External links are imported to the code with their URLs. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the icons and timeline items in an orderly manner. The body of the form is given a style set of display as flex, justify-content as center, align-items as center, min-height as 100vh, and background color #1a1e23. The timeline is given a style set of display as grid to arrange the timeline in a grid layout, gap as 40px, max-width as 600px, font-size as 0.75rem, line-height as 1, font color as white, clip-path as inset(0 0 100% 0), animation as expand 5s forwards linear. The timeline list item is given a font color of #3498db, whereas the timeline line has a background color as white. Source: https://codepen.io/alphardex/pen/bGdNxea
This is an example of a timeline view in a list view, designed with CSS and HTML. The body is given a style set of color as #D3D7D8, font-family as Roboto', sans-serif, padding as 20px 100px, position as relative and overflow as hidden. The icons have been imported to the form with the CSS framework Font Awesome. The icons have been assigned a style set of background color as #e7e7e7, font size as 80px, text-align as center, line height and height as 130px and width as 160px. Each timeline year label has been assigned a border color of #FF9389, #FDCC4C, #ADEEC3, and #7AB8DD, which are also used as background colors combined with linear gradient colors, respectively. The timeline years icons also have the styles of color as #fff, font size as 70px, font-weight as 600, text-align as center, text-shadow as 2px 2px 5px #000, border-radius as 50% making them circles, height and width as 200px whereas label titles have the styles of color as #808080 and text-transform as capitalize to make the first letter of each word capital.
This is an example of a horizontal timeline view with animated icons, designed using 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:#000, color_1: #EA2027, color_2: #1F5295, color_3: #89b743, and color_4: #e02a6d. The body of the form is given a style set of font-family of 'Niramit', sans-serif, and display as block. 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 timeline year is given the styles of color as white, font size as 35px, and font-weight as 600, and text-align as center. The title of the label is given a style set of font size as 25px, and font-weight as 600 and the label description a style set of color as #333, and font size as 15px. A rotating animation is given to the icons by timeline-icon {transform: rotate (360deg).