This is an example of a product detail window template, designed using CSS, HTML, and Bootstrap framework 4. The form consists of four product cards. The product images are imported to the code with their URLs. The background color of the form is set as #eee. The product card is given the styles of background-color as #fff, border-radius as 10px to make the corners rounded, width as 190px, and box-shadow as 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19). The upper discount section is given a background color as red and a font-size of 10px. The product name is displayed with a font-size of 13px, and font-weight as bold. The new prize is displayed with a font size of 13px and a font color of red, whereas the old price is displayed with a font size of 8px, and font color of gray. The radio buttons are given a 2px solid border style of their color, which turns to 3px solid, in focus and hover event. Source: https://bbbootstrap.com/snippets/bootstrap-product-detail-window-template-82185599

This is an example of a Contact Us form, designed using HTML, CSS, and Bootstrap framework 4. The font style is imported to the code with its URL. The body of the form is given a background color of navy blue, whereas the form container is given the background color blanchedalmond. The muted text is displayed with a font-family style as 'Ubuntu', sans-serif. The contact details tabs are given a cursor style as pointer to get the hand cursor effect on hover. The background color of the contact details tabs gets changed to #fff, in a hover event. The input text fields are given a border style of 1px solid #ddd. The fields take the border style of 2px solid RGB(105, 27, 179), and font color of RGB(105, 27, 179), in a hover event. The 'Send Message' button is given a background color of RGB(105, 27, 179), and font color of #fff. The media quarries have been used to increase the responsiveness of the form. Source: https://bbbootstrap.com/snippets/bootstrap-contact-us-form-contact-details-66798171

This is an example of a detailed page layout, designed using HTML, CSS, and Bootstrap framework 4. The body of the form is given a background color as #F0F8FF. The images are imported to the code with their URLs. This form provides a stylish profile layout for a user timeline. The information card is given the styles of background-color as #fff, border style as 1px solid #e5e9f2, border-radius as .2rem, and word-wrap as break-word to allow long words to be able to break and wrap onto the next line. The user image is given height and width as 128. The 'Like' button is created as a danger type button and the other buttons are created as primary buttons. The card header is given a background-color as #fff, and border-bottom as 1px solid #e5e9f2. Source: https://www.bootdey.com/snippets/view/bs4-profile-detail-page#css

This is an example of a simple product details page, designed using CSS, Html, and Bootstrap framework 4. The form consists of a sidebar with hover effects, a header, and a product description given in a paragraph. The product image which has been used as the background image is imported to the code with its URL. The details container is given a margin-top as 8%, and a margin-left as 10%. The background-size of the form is defined as cover. The header is displayed using a font-size of 60px, and a font-weight as bold to highlight the text. It is given a margin-top value of 5%. The product details paragraph is displayed using a font-size of 16px. The sidebar items take the font color of gray, in a hover event. Source: https://mdbootstrap.com/snippets/jquery/krzysztof-wilk/1241435#js-tab-view

This is an example of a pricing plan with credit card payment details, designed using CSS, HTML, and Bootstrap framework 4. The card images are imported to the code using their URLs. The form is given a background color of #e6ebf4. The information card is given a box-shadow of 5px 6px 6px 2px #e9ecef. The heading of the form is displayed using a font-size of 23px. The subtitle is displayed using the styles of font-size as 16px, font-weight as 500, and font color as #b1b6bd. The pricing section is given a border style of 2px solid #304FFE and the price is displayed using a font-size of 50px. The CVV and email input text fields are given a border style of 2px solid #eee, which turns to 2px solid #304FFE, in a focus event. The 'Payment' button is created as a primary type button and given a font-size of 20px. Source:https://bbbootstrap.com/snippets/bootstrap-pricing-plan-credit-card-payment-details-23640312

This is an example of a payment form with product details, designed using HTML, CSS, and Bootstrap framework 4. The background image is imported to the code with its URL. The body of the form is given a background color as #FFCCBC. The information card is given a margin-top and bottom of 40px. The body of the card is given a background color as #f7f1f1, whereas the input fields are given the styles of background-color as #f7f1f1, and font-size as 15px. The footer section of the card is given the styles of background-color as #00BCD4, and text color as white. The cursor style for the footer is set as pointer to get the hand cursor effect in a hover event, whereas the footer button takes the color of #0097A7, in a hover event. The input text fields also take a border-bottom style of 1px solid #c1bcbc, in a hover event. Source: https://bbbootstrap.com/snippets/payment-form-product-details-88919081