ในการสร้าง Product Card ด้วย CSS โค้ดมีดังนี้ −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .productCard { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 300px; margin: auto; text-align: center; font-family: arial; background-color: rgb(190, 224, 224); } .productDetails { color: rgb(26, 0, 51); font-weight: bold; font-size: 18px; } button { border: none; outline: 0; display: inline-block; padding: 8px; color: white; background-color: rgb(23, 31, 102); text-align: center; cursor: pointer; width: 100%; font-size: 18px; } button:hover, a:hover { opacity: 0.7; } </style> </head> <body> <h2 style="text-align:center">Product Card Example</h2> <div class="productCard"> <img src="https://images.pexels.com/photos/1152077/pexels-photo-1152077.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" style="width:100%"/> <h1>Leather Bag</h1> <p class="productDetails">Exotic Quality</p> <p>Price 50$</p> <p><button>Buy Now</button></p> </div> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
