This is an example of a shopping bag checkout form with the order summary, 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 breadcrumb items in an orderly manner. The body of the form is given a background color of linear-gradient(110deg, #BBDEFB 60%, #42A5F5 60%). The breadcrumb items are given a font-size of 10px, and a text style as uppercase to automatically convert the text to uppercase. The input text fields take a border value of 1.5px solid #4bb8a9, in a focus event. The 'Purchase' button is given a style set of font-size as 1rem, font color as white, background-color as #4bb8a9, height as 2.8rem, and border-radius as 0.2rem, which takes a background color of #26A69A in a hover event. The 'Add Gift Code' button is given a background-color of #fff, font color of #4bb8a9, border-radius of 0.2rem, and border as 1px solid #4bb8a9, which turns its background color to #4bb8a9, and font color to #fff, in a hover event.
This is an example of a credit card payment form with order details, designed using HTML, CSS, and Bootstrap framework 4. The images are imported to the code with their URLs and media quarries are used to increase the responsiveness of the form. The body of the form is given the styles of background as #000, and font-family as Arial, Helvetica, sans-serif. The card container is given a border-radius of 20px. The Order Total text is given a font color as #6c757d85, whereas the order value is given a font color as #f11126. The cursor style for fields is set as pointer to get the hand cursor effect in a hover event. The input text fields are given a border-bottom style of 1px solid #a9abae3d. The input text takes a bold font style, in a focus event. The Place Order button is given the styles of border-radius as 40px, and width as 40%.