Spaces:
Running
Running
| <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> | |