Close

Profile Card

This is an example of a bootstrap profile card layout with hover effects, designed using HTML, CSS, and bootstrap framework 4. The images, icons, and fonts are imported to the code with their URLs. Media queries have been used to increase the responsiveness of the form. The body of the form is given a font family as 'Quicksand', sans-serif, and a background color as #324e63. A linear background image is set for the from background as linear-gradient(-20deg, #ff2846 0%, #6944ff 100%). The profile card has the styles of box-shadow: 0px 8px 60px -10px rgba(13,28,39,0.6), background as #fff, border radius as 12px, and position as relative. The image is given a height and a width of 150px, border-radius as 50%, to get the circular shape, and a box shadow as 0px 5px 50px 0px rgb(108, 68, 252), 0px 0px 0px 7px rgba(107, 74, 255, 0.5). The profile name has the styles of font-weight as 700, font-size as 24px, color as #6944ff, and margin-bottom as 15px, whereas the content is given the styles of font-size as 18px, font-weight as 500, color as #324e63, and margin-bottom as 15px. In a hover event, the blue button takes a box shadow effect of 0px 7px 30px rgba(19, 127, 212, 0.75), whereas the orange button takes 0px 7px 30px rgba(223, 45, 70, 0.75). Source: https://codepen.io/mkupfer/pen/oNgPJyq

Post Comment or Questions

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

Your email address will not be published.

Several Related Snippets

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