Close

Minimalistic horizontal timline

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

Post Comment or Questions

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

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.