Close

Creative Pricing Table

This is another example of a stylist price card table with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The Bootstrap style package has been imported to the code with its URL. 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 card details, in an orderly manner. The body of the form is given a linear gradient background color as linear-gradient(to right, #E2E2E2, #C9D6FF). The header section of the three cards is given three background colors as #C64545, #2D5772, and #1AA85C. The 'Signup' button is given the styles of background color as #C64545, font color as #fff, and border-radius as 20px. In a hover event, the price cards take a transform of scale(1.05). The Price card is given two deco layers which divide the header section and content section. In a hover event, the first deco layer takes a transform effect of translate3d(15px, 0, 0), and the deco 2 layer takes a transform effect of translate3d(-15px, 0, 0), to create the hover effect. Source: https://bootsnipp.com/snippets/5M12R

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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

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