This is an example of a horizontal timeline designed with the use of HTML, CSS, and JavaScript. The data will be displayed on a click event on the date as the user scrolls horizontally. JavaScript functions have been implemented for the click events. The body has the styles of font size as 1.6rem, font family as "Source Sans Pro", sans-serif, color as #383838 and background color as #f8f8f8. The horizontal timeline has the styles of opacity as 0, margin as 2em auto and transition as opacity 0.2s. The JavaScript function removeClass removes the current classes of style whereas addClass function appends the new classes of styles to the elements dynamically for the selected div element. The data in the h2 element has the styles of font-weight as bold, font size as 2.6erm, font family as "Playfair Display", serif, font-weight as 700 and line-height as 1.2. Source: https://codepen.io/ritz078/pen/LGRWjE

This is a template of a horizontal timeline designed with the use of HTML and CSS. The timeline has the styles of display as flex, align items as center and height as 500px whereas events have the style of position as relative. The event bubble has the styles of position as absolute, background color as rgba(158, 158, 158, 0.1), width as 139px, height as 60px, top as -70px, left as -15px, border radius as 5px and box shadow as inset 0 0 5px rgba(158, 158, 158, 0.64).. Day digit has the styles of font size as 27px, font family as "Arial Black", Gadget, sans-serif, margin left as 10px and color as #4C4A4A. Day class has the styles of font size as 11px, margin left as 5px, font weight as bold, and margin top as 10px, font family as Arial, Helvetica, sans-serif and color as #4C4A4A. Source: https://codepen.io/yourinium/pen/adMoyv