Close

Pricing table with hover effect

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

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.