Close

e-Commerce single product card template

This is an example of an E-Commerce single product card template, design using JavaScript, CSS, HTML styles, and Bootstrap framework 4. The form consists of a product card that gives three views of the product from different angles. The product images are imported to the code with their URLs. JavaScript getElementById method has been used to select the images. The discount section has the styles of text-align as center, height as 25px, line-height as 8px, border-radius as 4px, font-size as 13px, display as flex, align-items as center, justify-content as center, and color as #fff. The thumbnail product images are displayed using the styles of width and height as 50px, border as 1px solid #eee, padding as 5px, cursor style as pointer to get the hand cursor effect on hover, and border-radius as 4px. The thumbnails take a border effect of 1px solid #00000059, in a hover event over them. The 'Add to cart' button text is given a text-transform style as uppercase to automatically convert the text to uppercase. The button changes its background color to #343a40, in a hover event. Source:https://bbbootstrap.com/snippets/bootstrap-ecommerce-single-product-using-card-98035165

Post Comment or Questions

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

Your email address will not be published.

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.