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