Product Card HTML Template
Highlight product imagery, benefits, pricing, and a purchase CTA within a tidy card layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Solstice Lamp | Product Card</title>
<style>
body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg,#fdf2f8,#ede9fe); display: grid; place-items: center; min-height: 100vh; margin: 0; }
.card { background: white; border-radius: 1.5rem; padding: 1.75rem; width: min(380px, 90vw); box-shadow: 0 35px 60px rgba(124, 58, 237, 0.18); }
img { width: 100%; border-radius: 1rem; margin-bottom: 1.25rem; }
h1 { font-size: 1.8rem; margin-bottom: 0.5rem; }
p { color: #6b7280; margin-bottom: 1rem; }
.price { font-size: 1.5rem; font-weight: 700; color: #7c3aed; margin-bottom: 1rem; }
ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; color: #4b5563; }
button { width: 100%; background: #7c3aed; color: white; border: none; border-radius: 999px; padding: 0.9rem; font-weight: 600; cursor: pointer; }
</style>
</head>
<body>
<article class="card">
<img src="https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?auto=format&fit=crop&w=800&q=80" alt="Minimal wood table lamp" />
<h1>Solstice Table Lamp</h1>
<p>Hand-blown glass lamp with warm LED core and touch dimmer for evening rituals.</p>
<div class="price">$189</div>
<ul>
<li>• Natural oak base</li>
<li>• Rechargeable battery</li>
<li>• 3-level touch dimming</li>
</ul>
<button>Add to cart</button>
</article>
</body>
</html>