Close

Profile Card

This is an example of a bootstrap user profile card with hover effects, designed using HTML, CSS, and bootstrap framework 4. The images and fonts are imported to the code with their URLs. The colors are predefined as variables and set as $box-shadow as 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2), $blue-gray-700 as #455A64, $blue-gray-800 as #37474F, $blue-gray-50 as #ECEFF1, $blue-gray-100 as #CFD8DC, $green-400 as #66BB6A, $green-500 as #4CAF50, $blue-500 as #2196F3, and $light-border as 1px solid #ddd. The font family for the form is set as font-family: ABeeZee, sans-serif. The body of the form is given the styles of background as #ccc, padding as 20px, and color as $blue-gray-700. The profile picture is given a border-radius of 50% to get the circular shape. The location and email links take the color of $blue-500 in a hover event, whereas the followers an following buttons take the color $blue-gray-100. The follow button is given the cursor style as pointer to get the hand cursor effect, and the color $green-400, which changes to $green-500, in a hover event. Source: https://codepen.io/Crystaltiger17/pen/eYYxroV

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.