Spaces:
Running
Running
File size: 2,929 Bytes
cf6c0e0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>E-commerce</title></head>
<body style="margin:0; background:#fff">
<nav style="background:#111; padding:14px 32px; align-items:center">
<span style="font-weight:700; letter-spacing:-.5px">SHOP<span style="color:#f59e0b">.</span></span>
<div style="display:flex; font-size:14px">
<a href="#" style="color:#fff; font-weight:500">New</a>
<a href="#" style="color:#ccc">Men</a>
<a href="#" style="color:#ccc">Women</a>
<a href="#" style="color:#ccc">Sale</a>
</div>
<div style="display:flex; align-items:center">
<span style="font-size:14px">🔍</span>
<span style="font-size:14px">🛒 3</span>
</div>
</nav>
<div style="display:flex; margin:0 auto; gap:32px">
<aside style="width:200px">
<h3 style="font-size:13px; text-transform:uppercase; margin:0 0 16px">Category</h3>
<div style="font-size:14px; border-bottom:1px solid #eee; padding-bottom:16px">
<p style="margin:0; font-weight:600">All (128)</p>
<p style="margin:0; color:#555">T-Shirts (34)</p>
<p style="margin:0; color:#555">Hoodies (28)</p>
<p style="margin:0; color:#555">Jackets (22)</p>
<p style="margin:0; color:#555">Pants (44)</p>
</div>
<h3 style="font-size:13px; text-transform:uppercase; margin:0 0 16px">Price</h3>
<div style="font-size:14px">
<p style="margin:0; color:#555">Under $50</p>
<p style="margin:0; color:#555">$50 – $100</p>
<p style="margin:0; font-weight:600">$100 – $200</p>
<p style="margin:0; color:#555">Over $200</p>
</div>
</aside>
<div style="flex:1">
<div style="display:flex; align-items:center">
<p style="margin:0; color:#888">128 products</p>
<select style="padding:8px 12px; border-radius:6px">
<option>Best selling</option><option>Price: Low to High</option><option>Price: High to Low</option>
</select>
</div>
<div style="display:grid; gap:20px">
<div><div style="background:#f5f5f5; aspect-ratio:3/4; display:flex; justify-content:center">👕</div><p style="margin:0 0 4px; font-weight:500">Essential Tee</p><p style="margin:0; color:#888">$38</p></div>
<div><div style="background:#e8f4fd; aspect-ratio:3/4; display:flex; justify-content:center; position:relative"><span style="position:absolute; left:10px; color:#fff; padding:3px 8px">SALE</span>🧥</div><p style="margin:0 0 4px; font-weight:500">Puffer Jacket</p><p style="margin:0"><span style="color:#ef4444">$89</span> <span style="color:#bbb; font-size:13px">$149</span></p></div>
<div><div style="background:#fdf5e8; aspect-ratio:3/4; display:flex; justify-content:center">👔</div><p style="margin:0 0 4px; font-weight:500">Oxford Shirt</p><p style="margin:0; color:#888">$75</p></div>
</div>
</div>
</div>
</body>
</html>
|