This is an example of a view email layout, designed using CSS, HTML, and Bootstrap framework 4. The font style and user images are imported to the code with their URLs. 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 is given a background color of #eee. The form consists of the sidebar with inbox types and other options, view email section, and buttons to reply, forward, print, and delete. The media quarries have been used to increase the responsiveness of the form. The form is given with a set of buttons which are primary, success, and danger type buttons. The danger type buttons are given a background color of #E9573F. The users are also given the option to view the attached images and files.
This is an example of a grid view container with images and hover effects, designed using CSS, HTML, and Bootstrap framework 4. The container consists of three cards. The images are imported to the code with their URLs. The header title of the form is displayed using a font-size of 1.6667em. The body of the form is given the styles of font as 75%/150% "Lato", Arial, Helvetica, sans-serif, background-color as #fff, and font color as #838383. The content of the cards is displayed using the styles of font-size as 1.0833em, line-height as 1.6666, and margin-bottom as 15px. The price section of each card is displayed using a font color of #7db921, a font-size of 1.6667em, and a text-transform style is given as uppercase to automatically convert the text to uppercase. The 'Book' button is given the styles of display as inline-block, background as #d9d9d9, font-size as 0.8333em, line-height as 1.8333em, and text-align as center, which takes a background color of #98ce44, in a hover event.