This is an example of a simple payment card, designed using CSS, HTML, and Bootstrap framework 4. The card image is imported to the code with its URL. The body of the form is given a background color of #ffffff, whereas the payment card is given the styles of background-color as #fff, width as 300px, border-radius as 15px, 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 user name is displayed with the styles of font-size as 15px, and color as #403f3f. The total amount due text is displayed with the styles of font color as #137ff3, and font-size as 12px, whereas the due amount is displayed using the styles of font color as #007bff, font-weight as bold, and font-size as 18px. The 'Other amount' input text is given a font-size of 18px, and a font-weight style as bold. The 'Pay amount' button is created as a primary type button and given a style set of width as 150px, height as 60px, border-radius as 8px, and font-size as 17px. Source: https://bbbootstrap.com/snippets/bootstrap-payment-card-78609579
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 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 credit card checkout with formatted input, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The card image is imported to the code with its URL while the media quarries have been used to increase the responsiveness of the form. JavaScript methods have been used to validate the number format of the card number text field. The body of the form is given the styles of font color as #000, and background-color as #EF5350, whereas the payment card is given the styles of padding as 30px 25px 35px 50px, border-radius as 30px, box-shadow as 0px 4px 8px 0px #B71C1C,and margin-top and bottom as 50px. The input text fields are given a border-bottom style of 1px solid lightgrey, font color of #000, font-size of 16px, letter-spacing of 1px, and a font-weight of 500. In a focus event, they take a border-bottom style of 1px solid #EF5350. The 'Pay' button is given a border-radius of 50px, font-size of 18px, and a background color of #EF5350, and takes a box-shadow effect of 0 0 0 2px #EF5350, in hover and focus events. Source: https://bbbootstrap.com/snippets/credit-card-checkout-formatted-input-51353295