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