User Profile Layout
This is another example of a user profile layout, designed using HTML, CSS, and Bootstrap framework 4. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the information, in an orderly manner. The body of the form is given a style set of font-family as 'Roboto', sans-serif, font-weight as 400, background-color as #f0f3f5, and margin-top as 40px. The user pic is given a height and a width of 100px, and a box-shadow style as 0px 3px 10px 0 rgba(0, 0, 0, 0.15). The user name is displayed with the styles of font-weight as 400, font-size as 20px, line-height as 20px, and font color as #000000. The social media buttons are created as primary, danger, info, and warning. The 'Follow' button is also created as a primary type button. The details sections are displayed with the styles of font color as #607d8b, and font-size as 13px. The user images in the friends' section, take an opacity value of 0.8, and transform style as scale(1.2), on hover.