This is an example of a user profile layout with a dashboard, designed using HTML, CSS, and Bootstrap framework 4. The body of the form is given a background color of #f3f6f8. The images and icons are imported to the code with their URLs. The cover section is given a background color of #02c0ce. The form allows the users to view the user details, personal information, dashboard summary, inbox summary, work experience, and a project summary. The card box has the styles of border-radius as 3px, margin-bottom as 30px, background-color as #fff. The inbox items are given a border-bottom style of 1px solid #f3f6f8, to be activated on hover. The 'Reply' button is created as a success type button from HTML. The muted text is displayed using a font color of #98a6ad. The 'Orders', 'Product' 'Sold Products' summaries are displayed using a text-transform style as uppercase to automatically convert the text to uppercase.
This is an example of a task management dashboard interface, designed using HTML, CSS, and Bootstrap framework 4. The fonts and images are imported to the code with their URLs, whereas media queries have been used to make the form responsive. The colors are predefined as variables. The body is given a set of styles as justify-content as center, flex-direction as column, overflow as auto, width as 100%, height as 100vh, padding as 20px, font-family as 'DM Sans', sans-serif, and font-size as 12px. The cursor style for buttons is set as pointer to get the hand cursor effect. The left bar is given the styles of background-color #f5f8ff, width as 230px, and border-right as 1px solid #e3e7f7, whereas the right bar is given the styles of width as 320px, border-left as 1px solid #e3e7f7, display as flex, and flex-direction as column. The header is given the styles of font-size as 20px, color as #5d606b, and margin-left as 30px. The task box takes a transforming effect of scale(1.02), in a hover event.