Close

Interactive profile card

This is an example of a bootstrap interactive user profile card layout, designed using HTML, CSS, JavaScript and bootstrap framework 4. The images and icons are imported to the code with their URLs. CSS @keyframes is used to implement the animations in CSS, whereas JavaScript draggable() function is used to implement the drag feature. The profile card is given a border-radius as 8px, and a box shadow as 0px 2px 6px rgba(0, 0, 0, 0.2), 0px 2px 6px rgba(0, 0, 0, 0.4), and also it is given a blur filter blur(8px), with the background color set as rgba(255, 255, 255, .60). The profile card is given a cursor style as grabbing, to be able to be dragged across the form. The profile picture is given a border-radius as 100px, and a filter as sepia (.25). The name title has the styles of color as rgba(38, 50, 56, 1), font-family as 'Roboto Condensed', sans-serif, font-size as 36px, font-weight as 700, whereas the designation is given a font-size as 16px, and font-weight as 400. Source: https://codepen.io/lukas-pawlaczyk/pen/KKwoQdG

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.

Several Related Snippets

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