Close

Profile Card

This is an example of a simple bootstrap profile card, designed using HTML, CSS, and bootstrap framework 4. The images, fonts, and icons are imported to the code with their URLs. The body of the form is given a style set of height as 100vh, display as grid, place-items as center, and background-image as linear-gradient (to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%). The profile card is given a transparent background color of hsla(240, 31%, 25%, 0.7). The card is given four borders as top, right, bottom, left and given border animations accordingly. The animations are slide-in-horizontal 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards, slide-in-vertical 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards, slide-in-horizontal-reverse 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards, and slide-in-vertical-reverse 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards, respectively. The card content is given the font-family style of Lato, sans-serif, and a transform effect of scale(0.6), and a transition effect of bump-in 0.5s 0.8s forwards. The image is given a border-radius of 50% to get the circular shape, whereas the user name is given a font-size of 26px, and animation of fill-text-white 1.2s 2s forwards. Source: https://codepen.io/iam2r/pen/ZEYMgLG

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.