Close

Profile Card

This is an example of a simple bootstrap user profile card with hover effects, designed using HTML, CSS, and bootstrap framework 4. The profile image is imported to the code with its URL. The background color, card color, text color 1, and text color 2 are predefined as variables and set as @bgc:#CFD8DC, @cc:#f1f2fa, @tc1:#1A237E, and @tc2:#3F51B5, respectively. The container is given the styles of height as 100vh, background-color as @bgc, and font-family as 'Quicksand', sans-serif. The profile card is given the styles of display as flex, flex-direction as column, justify-content as space-between, width as 400px, height as 450px, background-color as @cc, border-radius as 7px, box-shadow as 0px 0px 6px 0px rgba(0,0,0,0.3), and color as @tc1. The profile image has the styles of height as 120px, border-radius as 100%, and box-shadow as 0px 0px 6px 0px rgba(0,0,0,0.75). The name title is given a font-size as 30px, whereas the job title is given a font-size as 20px, and font color as @tc2. The cursor style for buttons is set as pointer to get the hand cursor effect and the font size is set as 17px, which changes to 10px in a hover event. Source: https://codepen.io/5nai3r/pen/KLGjbE

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.