82 lines
1.9 KiB
HTML
82 lines
1.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Product List</title>
|
||
|
|
<style>
|
||
|
|
body { font-family: Arial; margin: 20px; }
|
||
|
|
.product { border: 1px solid #ddd; padding: 15px; margin: 10px 0; border-radius: 5px; }
|
||
|
|
.product.featured { background: #fffacd; border-left: 4px solid #ffd700; }
|
||
|
|
.price { font-size: 1.2em; color: #667eea; font-weight: bold; }
|
||
|
|
.status { padding: 5px 10px; border-radius: 3px; font-size: 0.9em; }
|
||
|
|
.status.in-stock { background: #90EE90; color: #2d5016; }
|
||
|
|
.status.low-stock { background: #FFB6C1; color: #8b1538; }
|
||
|
|
.status.out-of-stock { background: #DCDCDC; color: #555; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Product Catalog</h1>
|
||
|
|
<p>Total products: 4</p>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="product featured">
|
||
|
|
<h3>Laptop Pro</h3>
|
||
|
|
<p>High-performance laptop for professionals</p>
|
||
|
|
|
||
|
|
<div class="price">$1299</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<span class="status low-stock">⚠️ Low Stock (5 units)</span>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<p><strong>⭐ Featured Item</strong></p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="product ">
|
||
|
|
<h3>Wireless Mouse</h3>
|
||
|
|
<p>Ergonomic wireless mouse with long battery life</p>
|
||
|
|
|
||
|
|
<div class="price">$29</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<span class="status in-stock">✅ In Stock (25 units)</span>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="product ">
|
||
|
|
<h3>USB-C Hub</h3>
|
||
|
|
<p>7-in-1 USB-C hub with multiple ports</p>
|
||
|
|
|
||
|
|
<div class="price">$49</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<span class="status low-stock">⚠️ Low Stock (2 units)</span>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="product ">
|
||
|
|
<h3>Monitor Stand</h3>
|
||
|
|
<p>Adjustable monitor stand</p>
|
||
|
|
|
||
|
|
<div class="price">$79</div>
|
||
|
|
|
||
|
|
|
||
|
|
<span class="status out-of-stock">❌ Out of Stock</span>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|