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 billing template with a checkout button, designed using CSS, HTML, and Bootstrap framework 4. The user image and font styles are imported to the code using their URLs. The body of the form is given the styles of background-color as #d7dee5, display as grid, and place-items as center. The information card is given the styles of background-color as #ffffff, border-radius as 10px, font-family as 'Manrope', sans-serif, and line-height as 1rem. The user name is displayed with a font-size of 0.9rem and the billing item is displayed with a font color of #bcbbc0. The user image is given a height of 55sspx and a width of 55px. The price is displayed using a font color of purple. The 'Checkout' button is given a font color as white, and a background color as #6f57d3, which changes to #5843af, in a hover event.
This is an example of a service or product billing/checkout page, designed using HTML, CSS, and Bootstrap framework 4. The form consists of radio buttons, input text fields, and a primary type button. The card images are imported to the code with their URLs. The body of the form is given the styles of font as 300 18px/1.5 'Muli', sans-serif, font color as RGB(0, 0, 0), background as linear-gradient(138deg, #EC407A 60%, #7C4DFF 60%), and height as 100%. Media quarries have been used to increase the responsiveness of the form. The information card is given a background color as white. The information card is split into two cards, left and right, and given a border-top style pf 1px solid #ccc. Some elements of the form have been given a cursor style as pointer to get the hand cursor effect in a hover event.
This is an example of a simple checkout form, designed using HTML, CSS, and Bootstrap framework 4. The product image is imported to the code with its URL. The background of the form is given the styles of width as 100%, height as auto, min-height as 100vh, background-color as #cccccc, and background-size as 100% 100%. The product description section is given a background color of #f0edeb. The label names are displayed using a font color of #6c757d, whereas the heading 1 and 2 are displayed using the font sizes of 25px, and 20px, respectively. The payment details card is given a background color as #f0edeb. The purchase link is set as the footer of the form with background color as black and text color as white. The total price is displayed using the styles of font-weight as 700, and font-size as 30px.
This is an example of a dark themed shopping cart payment form, designed using CSS, HTML, and Bootstrap framework 4. The body of the form is given the styles of font-family as Arial, Helvetica, sans-serif, and background color as #343a40. The payment options images are imported to the code using the URLs. The payment card is given the styles of background as #000 to get the dark theme, font color as #fff, and width as 410px. The payment options are given the hover effects of text-decoration as underline and cursor as pointer to get the hand cursor effect. The Pay button is given a border-radius value of 30px. The input text fields are given a font color of #dae0e5 and a font size as 75%. The input fields take the values of transform as translate3d(0, -100%, 0), opacity as 1, top as 10px.