This is a template of a single product page on an e-commerce website, designed using HTML, CSS, and Bootstrap framework 4. The font styles and product images are imported to the code using their URLs. The body of the form is given the styles of font-family as 'Rubik', sans-serif, font-size as 14px, font-weight as 400, background color as #FFFFFF, and font color as #000000The product name is displayed with the styles of font-size as 20px, and font-weight as 400. The rating review line is given a font color of #5b5b5b. The product prize is given a font-size of 30px and a font-weight of 500, whereas the discount is given a font-size of 17px, and a font-weight of 300. The image list takes a box-shadow effect of 0px 1px 5px rgba(0, 0, 0, 0.3), in a hover event. The 'Add to cart' and 'Buy now' buttons are created as primary type buttons. Source:https://bbbootstrap.com/snippets/ecommerce-single-product-page-design-template-64204693

This is an example of a hotel booing modal, designed using HTML, CSS, and Bootstrap framework 4. The images are imported to the code with their URLs. The form consists of a modal button, which expands to the hotel booking form upon clicking on it. The body of the form is given a background color as #eee. 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 child elements of the dropdown menu, in an orderly manner. The price of a room is displayed using a highlighted font. The no of days is given a font color as green. The date is given the styles of line-height as 17px, and margin-bottom as 8px. The 'Complete booking;' button is created as a danger type button. Most of the form text is displayed using a font-size of 12px. Source:https://bbbootstrap.com/snippets/bootstrap-complete-hotel-booking-modal-template-48147397

This is an example of a credit card payment form with 4 different options, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The card images are imported to the code with their URLs and used to create the payment options as radio buttons. JavaScript methods have been used to implement the functionality of the radio buttons and validate the formatted input of the card number. The background color of the form is set as #C5CAE9. The heading of the form is displayed using a font-size of 40px. The input text fields are given the styles of border as 1px solid lightgrey, border-radius as 6px, width as 100%, font-family as arial, font color as #2C3E50, font-size as 14px, and letter-spacing as 1px. In a focus event, the text fields take the styles of box-shadow as 0px 0px 0px 1.5px skyblue, font-weight as bold, and border as 1px solid #304FFE. Input text field labels are given the styles of line-height as 48px, font-size as15px, and font color as gray, which changes to #304FFE, in a focus event. The 'Pay' button is given a background color of #304FFE, which changes to #3F51B5, on hover. The radio buttons take a box-shadow of 0px 0px 0px 1px rgba(0, 0, 155, 0.4), and a border effect of 2px solid blue, in the selected mode. Source:https://bbbootstrap.com/snippets/credit-card-payment-form-4-different-options-47317865

This is an example of a LinkedIn login page template, designed using CSS, HTML, and Bootstrap framework 4. The background image is imported to the code with its URL. The body of the form is given a color of #eee. The Welcome text is displayed using a font-size of 23px. The input text fields are given the styles of background color as #E3F2FD, margin-top as 10px, font-size as 9px, font-weight as bold, font color as #fff, padding-top and bottom as 15px, and caret-color as red to set the color of the insertion caret. The 'Forgot Password' text is given a font color of #42A5F5. The "login; button is given the styles of background color as #0277BD, font-size as 11px, and font-weight as bold. The 'Sign up' button is given the styles of background-color as #fff, font color as #0277BD, and font-size as 11px. The buttons are created as primary type buttons. The media quarries have also been used to increase the responsiveness of the form. Source: https://bbbootstrap.com/snippets/bootstrap-linkedin-login-page-72193613

This is an example of another payment form with card details, designed using CSS, HTML, and Bootstrap framework 4. The card images are imported to the code with their URLs. The body of the form is given a background color of #BA68C8. The form consists of two containers. The left one is given a background color of #263238 and a font color of white. Both containers are given a height of 600px. The headings in both containers are given a font-weight of 900. The subheading is given a font-size of 14px, whereas the subheading on the left side card is given a border of 1px solid white, while the subheading on the right-hand side is given a background-color as white, and font color as #263238. The input text fields are given a border-bottom style of 1px solid lightgray, whereas the input field text is displayed using the styles of font color as peachpuff, and font-size as 25px. Source: https://bbbootstrap.com/snippets/payment-form-icon-55737250

This is a template of a card payment form, designed using CSS, HTML, and Bootstrap framework 4. The card image and font styles are imported to the code using their URLs. The body of the form is given a background color of linear-gradient(to right, rgba(235, 224, 232, 1) 52%, rgba(254, 191, 1, 1) 53%, rgba(254, 191, 1, 1) 100%), and a font-family style of 'Roboto', sans-serif. The payment card has the styles of max-width as 450px, border-radius as 15px, margin as 150px 0 150px, padding as 35px, and padding-bottom as 20px. The card heading is displayed using a font color of #C1C1C1, font-size of 14px, and a font-weigh of 500. The cursor style for the card image is set as pointer to get the hand cursor effect on hover. The input text fields are given a border-bottom of 1.5px solid #E8E5D2, and a font-weight style as bold. The input text field labels are displayed using the styles of font-size as 12px, font-weight as 500, and font color as #edb537. The button is given a background color of #F3A002. Source: https://bbbootstrap.com/snippets/bootstrap-credit-card-payment-form-66489199

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. Source: https://bbbootstrap.com/snippets/shopping-bag-checkout-order-summary-94502209

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. Source: https://bbbootstrap.com/snippets/bootstrap-billing-template-checkout-button-17853351