Pricing Table with Hover Effects
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 price cards are given the styles of text-align as center and background as #e6e6e6. In a hover event, the cards take a margin-top effect of 10px to create the sinking effect. The header section of the card is given a background color as #ed687c. The title of the header is displayed with the styles of text-transform as uppercase to automatically convert the text to uppercase, font-size as 70px, and font-weight as bold. The price value is displayed with a font-size of 47px. The content rows take the background color of #b6b6b6, in a hover event.