Spaces:
Running
Running
File size: 4,066 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;font-family:sans-serif;background:#fff;color:#111;">
<nav style="background:#111;color:#fff;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;">
<span style="font-weight:700;font-size:20px;letter-spacing:-.5px;">SHOP<span style="color:#f59e0b;">.</span></span>
<div style="display:flex;gap:28px;font-size:14px;color:#ccc;">
<a href="#" style="color:#fff;text-decoration:none;font-weight:500;">New</a>
<a href="#" style="color:#ccc;text-decoration:none;">Men</a>
<a href="#" style="color:#ccc;text-decoration:none;">Women</a>
<a href="#" style="color:#ccc;text-decoration:none;">Sale</a>
</div>
<div style="display:flex;gap:16px;align-items:center;">
<span style="font-size:14px;color:#ccc;">🔍</span>
<span style="font-size:14px;color:#ccc;">🛒 3</span>
</div>
</nav>
<div style="display:flex;max-width:1200px;margin:0 auto;padding:32px 20px;gap:32px;">
<aside style="width:200px;flex-shrink:0;">
<h3 style="font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:#888;">Category</h3>
<div style="font-size:14px;line-height:2.4;border-bottom:1px solid #eee;margin-bottom:20px;padding-bottom:16px;">
<p style="margin:0;cursor:pointer;font-weight:600;color:#111;">All (128)</p>
<p style="margin:0;cursor:pointer;color:#555;">T-Shirts (34)</p>
<p style="margin:0;cursor:pointer;color:#555;">Hoodies (28)</p>
<p style="margin:0;cursor:pointer;color:#555;">Jackets (22)</p>
<p style="margin:0;cursor:pointer;color:#555;">Pants (44)</p>
</div>
<h3 style="font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:#888;">Price</h3>
<div style="font-size:14px;line-height:2.4;">
<p style="margin:0;cursor:pointer;color:#555;">Under $50</p>
<p style="margin:0;cursor:pointer;color:#555;">$50 – $100</p>
<p style="margin:0;cursor:pointer;font-weight:600;color:#111;">$100 – $200</p>
<p style="margin:0;cursor:pointer;color:#555;">Over $200</p>
</div>
</aside>
<div style="flex:1;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;">
<p style="margin:0;font-size:14px;color:#888;">128 products</p>
<select style="padding:8px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;">
<option>Best selling</option><option>Price: Low to High</option><option>Price: High to Low</option>
</select>
</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;">
<div><div style="background:#f5f5f5;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;">👕</div><p style="margin:0 0 4px;font-size:14px;font-weight:500;">Essential Tee</p><p style="margin:0;font-size:14px;color:#888;">$38</p></div>
<div><div style="background:#e8f4fd;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;"><span style="position:absolute;top:10px;left:10px;background:#ef4444;color:#fff;font-size:11px;padding:3px 8px;border-radius:4px;">SALE</span>🧥</div><p style="margin:0 0 4px;font-size:14px;font-weight:500;">Puffer Jacket</p><p style="margin:0;font-size:14px;"><span style="color:#ef4444;font-weight:600;">$89</span> <span style="color:#bbb;text-decoration:line-through;font-size:13px;">$149</span></p></div>
<div><div style="background:#fdf5e8;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;">👔</div><p style="margin:0 0 4px;font-size:14px;font-weight:500;">Oxford Shirt</p><p style="margin:0;font-size:14px;color:#888;">$75</p></div>
</div>
</div>
</div>
</body>
</html>
|