This is a UI design template for a mobile phone, designed using CSS, HTML, and Bootstrap framework 4. The font style and icons are imported to the code with their URLs. The font style for the form is defined as 'Roboto', sans-serif. The name is displayed with the styles of font-size as 3rem, font-weight as 500, and font color as #728096. The date is displayed with a style set of font-size as 13px, font-weight as 400, text-align as center, and font color as white. The target button is given a height and width of 30px, and 70px, respectively. It is given a background color of #3b465e, which gets changed to #2e3951, on hover. The charts are displayed using three colors: lightseagreen, orange, and #3b465e. The 'Statistics' card is displayed using a style set of width as 320px, height as 100px, background-color as #2e3951, and border-radius as 10px. The cursor style for the card is set as pointer to get the hand cursor effect on hover. The cards take a background color of #3b465e and change the font color to gray, on hover.
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.