Close

Profile card with title, position, text and icons

This is another example of a profile card layout with title, position, text, and icons, designed using CSS, HTML, and JavaScript. The fonts, icons, and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of font-family as 'Lato', Arial, sans-serif, position as relative, display as inline-block, overflow as hidden, margin as 10px, min-width as 250px, max-width as 310px, width as 100%, background-color as #ffffff, color as #2B2B2B, text-align as center, font-size as 16px, and box-shadow as 0 0 5px rgba(0, 0, 0, 0.15). The image has the styles of vertical-align as top, max-width as 100%, position as relative and border-radius as 50% to make it round shaped. The title has been given a font family of 'Oswald', text-transform as uppercase, font-size as 20px, font-weight as 400, line-height as 24px, and margin as 3px 0 whereas position is given the color #888 and letter-spacing of 1px. The icons are given a style set of font-size as 1.5em and color of #999 which changes to #555 in a hover event.

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.