Close

User Profile Layout

This is an example of a bootstrap user profile card layout, designed using HTML, CSS, JavaScript and bootstrap framework 4. The images and fonts are imported to the code with their URLs. Media queries have been used to increase the responsiveness of the form, whereas JavaScript has been used to switch between the cards. The body of the form is given a style set of height as 100%, font-family as work sans, and overflow as hidden. The container is given a style set of display as flex, background as #FCE4EC, align-items as center, flex-flow as row, and transition as background .5s ease. The add button is given a height and width of 40px, background as #EC407A, border-radius as 50%, color as #fff, align-items as center, font-size as 24px, font-weight as 500, box-shadow as 0px 2px 10px 0px rgba(0, 0, 0, 0.4), transition as all .2s ease-out, and cursor as pointer to get the hand cursor effect. In a hover event, the button takes a background as #F06292, transform as scale(1.1), and transition as all .2s ease-out. Source: https://codepen.io/rahulsingha/pen/YzPeJJa

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.