Spaces:
Running
Running
File size: 3,105 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="font-family:sans-serif; background:#fff; color:#111">
<nav style="background:#111; color:#fff">
<span style="font-weight:700; font-size:20px; letter-spacing:-.5px">SHOP<span style="color:#f59e0b">.</span></span>
<div style="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="gap:16px">
<span style="font-size:14px; color:#ccc">🔍</span>
<span style="font-size:14px; color:#ccc">🛒 3</span>
</div>
</nav>
<div style="max-width:1200px; gap:32px">
<aside style="">
<h3 style="font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#888">Category</h3>
<div style="font-size:14px; line-height:2.4; border-bottom:1px solid #eee">
<p style="cursor:pointer; font-weight:600; color:#111">All (128)</p>
<p style="cursor:pointer; color:#555">T-Shirts (34)</p>
<p style="cursor:pointer; color:#555">Hoodies (28)</p>
<p style="cursor:pointer; color:#555">Jackets (22)</p>
<p style="cursor:pointer; color:#555">Pants (44)</p>
</div>
<h3 style="font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#888">Price</h3>
<div style="font-size:14px; line-height:2.4">
<p style="cursor:pointer; color:#555">Under $50</p>
<p style="cursor:pointer; color:#555">$50 – $100</p>
<p style="cursor:pointer; font-weight:600; color:#111">$100 – $200</p>
<p style="cursor:pointer; color:#555">Over $200</p>
</div>
</aside>
<div style="">
<div style="">
<p style="font-size:14px; color:#888">128 products</p>
<select style="border:1px solid #e5e7eb; font-size:14px">
<option>Best selling</option><option>Price: Low to High</option><option>Price: High to Low</option>
</select>
</div>
<div style="gap:20px">
<div><div style="background:#f5f5f5; aspect-ratio:3/4; font-size:40px">👕</div><p style="font-size:14px; font-weight:500">Essential Tee</p><p style="font-size:14px; color:#888">$38</p></div>
<div><div style="background:#e8f4fd; aspect-ratio:3/4; font-size:40px"><span style="background:#ef4444; color:#fff; font-size:11px">SALE</span>🧥</div><p style="font-size:14px; font-weight:500">Puffer Jacket</p><p style="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; aspect-ratio:3/4; font-size:40px">👔</div><p style="font-size:14px; font-weight:500">Oxford Shirt</p><p style="font-size:14px; color:#888">$75</p></div>
</div>
</div>
</div>
</body>
</html>
|