Gradient Bootstrap Pricing Table
This is another example of a pricing table layout with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The Bootstrap styles package has been imported to the code with its URL. The form consists of four 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 card details, in an orderly manner. The title of each card is given a text-transform style as uppercase to automatically convert to uppercase. The price value is displayed with the styles of font-size as 64px, font-weight as 100, and line-height as 72px. The background color of the active card is set as #179880. In a hover event, the other three cards take the background color of #179880 with a transition effect of all 0.4s. The 'Buy Now' button is created as a success type button and given a background color as all 0.4s, which gets changed to #E0FFF6 in a hover event.