Close

Timeline UI

This is an example of displaying the timeline data in a card view designed with HTML and CSS. The image has been set with the use of the image element by adding the image URL of the source image. This image element has been wrapped with the profile pic class and the profile pic class has the styles of width as 30px, height as 30px, display as inline-block, float as right, position as relative and the image styles, width as 100% and border-radius as 50%. By setting the radius as 50% it displays the shape as a circle. The notification styles have the position as absolute, width as 5px, height as 5px, border-radius as 50%, top as 2px, right as 2px and background as $pink. The header has the styles of background as the image URL, background-size as cover, color as white and position as relative. The credits link has the style of left as 10px so it will be displayed on the left whereas the video link has the style of right as 10px which will be displayed on the right. Source: https://codepen.io/abisz/pen/qaEOEm

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.