Close

Responsive Profile

This is an example of a bootstrap profile card layout with hover effects, designed using HTML, CSS, and bootstrap framework 4. The images, CSS styles, and fonts are imported to the code with their URLs. Media queries have been used to increase the responsiveness of the form. The form is given a font-family of 'Roboto', sans-serif, whereas the container head is given a linear gradient color. The profile picture has the styles of border-radius as 100% to get the circular shape, border as solid, border-width as 4px, and border-color as white. The text-transform style for the name is set as uppercase to automatically convert the text to uppercase. The "message" button is given the styles of border as solid #ff2d55 1px, border-radius as 50px, background-color as #ff2d55, text-transform as uppercase, letter-spacing as 5px, cursor as pointer, font-size as 12px, and color as white, whereas the "follow" button has the same styles except background color as #ffffff, border as solid gray 1px, and color as RGB(49, 49, 49). In a hover event, message button takes the effects of background-color as #ffffff, and color as RGB(54, 54, 54), whereas the follow button takes background-color as #408afa, color as RGB(255, 255, 255), and border-color as #408afa. Source: https://codepen.io/panshak/pen/KKwBYap

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.