This is a sample example of displaying the timeline with the use of HTML, CSS, and JavaScript. The timeline has been implemented with the use of div and the timeline view has been implemented with CSS styles. The wrapper class has the styles of background color as #42A5F5, width as 100%, min-height as 100vh, height as 100%, font as normal 16px/26px Open Sans Condensed, sans-serif, color as #fff, padding as 100px 20px 200px and box-sizing as border-box. The JavaScript function has been created to apply the scroll and check for the fade. The JavaScript function removeClass removes the current classes of style whereas addClass function appends the new classes of styles to the elements dynamically. Each timeline section has the styles of background color as #f4f4f4, color as #777, padding as 15px, margin as 60px 20px, width as 300px, position as relative, border-radius as 4px and transition as all 0.3s ease-in-out. Source: https://codepen.io/rprajapatii/pen/AXoWyd
This is a template of a registration form with animations designed using HTML, CSS, and JavaScript. The input type ‘text' has been used for the text fields. CSS element ‘background-color' is set to the value of #509 color code to implement the background color. The ‘animation' element in CSS has been used to apply animations on the input fields with its values set as rotate 5s ease-in-out 0.5s alternate, move 5s linear 2s. The other CSS styles that are used here would be outlined as none, background color as #509, font style as italic, color as #f0f, border as none and border-bottom as 1px solid #f0f. The values of the input field border-bottom are set as 4px solid #f00, font size as 20px, transition as .4s ease-out and transition-delay as 0.5s on a focus event. A JavaScript function has been created to display a confirmation message and prompt the user to confirm if all the input fields are filled correctly. Source : https://codepen.io/ivanshavliuga/pen/GzXVvY