This is another example of a price plan layout, designed using CSS, HTML, and Bootstrap framework 4. The images and font styles are imported to the code with their URLs. The form consists of four different price cards. The card icon is given a style set of display as inline-block, font-size as 35px, width and height as 100px, font color as #ffffff, line-height as 76px, border as 12px solid #ffffff, border-radius as 50% to get the circle shape, box-shadow as 0 0 3px #cccccc, and transition as all .3s, The profile icons are given different background colors as #67a8e4, #f06292, and #009688. The price card title displayed with a font-size of 15px, and a text-transform style as uppercase to automatically convert the text to uppercase. The price cared details are displayed using a muted text. Four types of 'Signup' buttons are also given to the four cards as primary, dark, pink, and teal. Source: https://www.bootdey.com/snippets/view/bs4-beta-pricing#css

This is an example of a pricing card layout, designed using HTML, CSS, and Bootstrap framework 4. The form title is displayed with the styles of font color as #1d2025, position as relative, font-size as 24px. The form description displayed with the styles of font-family as "Montserrat", sans-serif, font color as #8b8e93, font-size as 14px, and font-weight as 300. The price card is given the styles of background color as #f5f5f6, and padding as 40px 35px. The price card is given a transform style as rotate(45deg). The price card title is displayed with a font-size of 26px, and a font-weight of 600. The price card button is given a style set of font-size as 11px, border-radius as 100px, and font color as #fff. The card button is created as a primary type button and take the background color of #0cc652, in a hover event. The price is displayed with a font-size of 16px, and a font-weight of 300. Source: https://www.bootdey.com/snippets/view/pricing-tables#css

This is an example of a colorful pricing table with hover animation, designed using HTML, CSS, and Bootstrap framework 4. The product images are imported to the code with their URLs. The body of the form is given the styles of background-color as #D1C4E9, and border-radius as 12px. The form is split into three product cards and given separate styles. The first card is given the styles of background-color as #eb5a51, width as 100%, and height as 450p. The second card is given the styles of background-color as #eabe5c, width as 100%, and height as 450px. The third card is given a background-color as #4863eb, width as 100%, and height as 450px. The product name is displayed using a font-size of 12px, and font color of #fff. The product size and prize is displayed using a font-size of 35px. The product image is given an animation style of umbrella 1.5s ease-in forwards, to create the scale-up hover effect. Source: https://bbbootstrap.com/snippets/bootstrap-colorful-pricing-table-animation-24141494

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 simple white pricing table, designed using CSS, HTML, and Bootstrap framework 4. The background color of the form is set as white. The background of the form is an image, which is imported to the code using its URL. The form consists of three price cards with header title, and content section which displays the price plan names, monthly charges, and a feature list. Each price card has two 'Purchase buttons, one at the top, and the other one at the bottom. The header title of the cards is created as muted text. The content of the cards is also displayed using muted text. The 'Purchase' buttons are created as info type buttons. The buttons are assigned a link to redirect to a different form, once a button is clicked. Source:https://bbbootstrap.com/snippets/bootstrap-bootstrap-4-white-pricing-tables-atlante-avila-64910265

This is another example of a pricing table with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The form consists of three price cards. 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 price cards, in an orderly manner. Media quarries have also been used to increase the responsiveness of the form. The form is given a background color of #000. The price cards are given a background color of #fff. Two of the cards are given the color of #f6f6f6 as the color of the header, whereas the card in the middle is given a header background color of #f74f57. The header title is displayed using the styles of font-family as "Raleway", sans-serif, font-size as 28px, font-weight as 400, letter-spacing as 2px, and text-transform as uppercase to automatically convert the text to uppercase. The price is displayed using the font style of "Lato", sans-serif, and font-size of 28px. The left and right side cards turn the color of their headers and 'Sign up' buttons to #f74f57, in a hover event. Source: https://bbbootstrap.com/snippets/pricing-table-hover-effect-69254954