5 Minutes Product Card

Product Card Design Within 5 Mins.

source code available


Product card is widely used in ecommerce websites and applications. Similar to a regular CSS card used in any niche, product cards aim to capture the interest of viewers most especially that being catchy in a shopping platform attracts curious eyes and usually a possible sale.

Moreover, the proper use of visual hierarchy makes product cards more effective. The product image is usually bigger than the rest of the contents, followed by the product title and price to showcase the important parts of the UI as well as other key features of the product. Because of this, it saves user an extra click and few minutes of reading since a product card exhibits a brief yet important product information.

To implement a product card, you don’t have to start from scratch. Below is a selection of free product cards written using the latest specifications that you can play around with to design your own product cards.

Source Code

Copy and Paste On Code Editor



<!--Code by Ebadallah IT-->
<!--DOCTYPE html-->
<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Document</title>
</head>
<body>
    <style>
        .card{
            box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);
            max-width: 300px;
            margin: auto;
            text-align: center;
            font-family: Poppins;

        }
        .price{
            color:grey;
            font-size:22px;

        }
        .card button{
            border: none;
            outline: 0;
            padding: 12px;
            color: white;
            background-color: #000;
            text-align: center;
            cursor: pointer;
            width: 100%;
            font-family: Poppins;
            font-size: 17px;
        }
    </style>
    <div class="card">
        <img src="clock.jpg" width="100%" />
        <h1>Z+ Clock</h1>
        <p class="price">$100</p>
        <p><button>Add to cart</button></p>
    </div>
    
    <center><p>Created By Ebadallah IT</p></center>
</body>
</html>

Comments

Post a Comment