<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <style> /* --- 1. CSS VARIABLES --- */ :root { --text-dark: #333333; --border-red: #e00000; --icon-grad-start: #d30000; --icon-grad-end: #e00; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', -apple-system, Arial, sans-serif; padding: 20px; } /* --- 2. SLIDER CONTAINER --- */ .cat-slider-container { position: relative; width: 100%; } /* --- 3. SCROLLABLE TRACK --- */ .cat-track { display: flex; gap: 5px; overflow-x: auto; padding: 10px 5px 15px; /* Center the items */ width: max-content; max-width: 100%; margin: 0 auto; /* Hide Scrollbars */ scrollbar-width: none; -ms-overflow-style: none; /* Drag Cursor Styles */ cursor: grab; user-select: none; } .cat-track.active { cursor: grabbing; transform: scale(1); } .cat-track::-webkit-scrollbar { display: none; } /* --- 4. CATEGORY ITEM --- */ .cat-item { flex: 0 0 auto; width: 100px; text-align: center; text-decoration: none; cursor: pointer; transition: transform 0.2s; -webkit-user-drag: none; } .cat-item:hover { transform: translateY(-5px); } /* Image Circle */ .cat-img-box { width: 90px; height: 90px; background: repeating-linear-gradient(45deg, #ffcdcd, transparent 100px); border-radius: 50%; margin: 0 auto 10px; position: relative; border: 7px solid #ffffff; box-shadow: 0 4px 6px rgb(0 0 0 / 75%); transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; padding: 20px; } .cat-item:hover .cat-img-box { background-color: #fff; box-shadow: 0 6px 12px rgba(224, 0, 0, 0.2); } /* --- ICON STYLING --- */ .cat-img-box svg { width: 100%; height: 100%; fill: url(#icon-gradient); transition: opacity 0.2s ease; pointer-events: none; } .cat-item:hover .cat-img-box svg { opacity: 0.8; } /* Label */ .cat-name { font-size: 1.1rem; color: var(--text-dark); font-weight: 600; line-height: 1.2; transition: color 0.2s; } .cat-item:hover .cat-name { color: var(--border-red); } @media (max-width: 768px) { .cat-track { gap: 5px; } } </style></head><body> <svg width=0 height=0 style=position: absolute;> <defs> <linearGradient id=icon-gradient x1=0 y1=0 x2=0 y2=1> <stop offset=0% style=stop-color: var(--icon-grad-start); stop-opacity: 1 ></stop> <stop offset=100% style=stop-color: var(--icon-grad-end); stop-opacity: 1 ></stop> </linearGradient> </defs> </svg> <div class=cat-slider-container> <div class=cat-track id=catTrack> <a href=# class=cat-item> <div class=cat-img-box> <svg viewBox=0 0 512 512><path d=M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.8 74.4 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z></path></svg> </div> <div class=cat-name>Pens & Writing</div> </a> <a href=# class=cat-item> <div class=cat-img-box> <svg viewBox=0 0 448 512><path d=M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM96 96h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32 160H96c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H128zm-32 64h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H96c-17.7 0-32-14.3-32-32s14.3-32 32-32z></path></svg> </div> <div class=cat-name>Notebooks & Paper</div> </a> <a href=# class=cat-item> <div class=cat-img-box> <svg viewBox=0 0 384 512><path d=M256 0h-128C92.7 0 64 28.7 64 64v384c0 35.3 28.7 64 64 64h128c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zM224 224l-64 80c-5.8 7.3-17.6 1.8-15.6-7.3l16-72.7h-32c-6.8 0-11.8-6.9-9.1-12.9l64-144c4.3-9.6 18.5-8.5 21.2 1.7l-16 87.3h32c6.8 0 11.8 6.9 9.1 12.9l-5.6 15v32z></path></svg> </div> <div class=cat-name>Batteries</div> </a> <a href=# class=cat-item> <div class=cat-img-box> <svg viewBox=0 0 512 512><path d=M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z></path></svg> </div> <div class=cat-name>Filing & Folders</div> </a> <a href=# class=cat-item> <div class=cat-img-box> <svg viewBox=0 0 512 512><path d=M32 64C14.3 64 0 78.3 0 96V416c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V352h256v64c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H32zM64 224V128h96v96H64zm160 0V128h96v96H224z></path></svg> </div> <div class=cat-name>Office Furniture</div> </a> <a href=# class=cat-item> <div class=cat-img-box> <svg viewBox=0 0 576 512><path d=M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64H240l-10.7 32H160c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H346.7L336 416H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM512 64V288H64V64H512z></path></svg> </div> <div class=cat-name>Computers & Tech</div> </a> <a href=# class=cat-item> <div class=cat-img-box> <svg viewBox=0 0 512 512><path d=M320 64h10.5c16.2 0 30.5 10.9 34.6 26.6l9.3 35.4C378 140 384 155.7 384 172.5v18.7c0 37.8-22.1 70.7-54 87.7V384c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V172.5c0-16.8 6-32.5 16.9-45.9L59 90.6C63 74.9 77.4 64 93.5 64H256V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64z></path></svg> </div> <div class=cat-name>Coffee & Creamers</div> </a> <a href=# class=cat-item> <div class=cat-img-box> <svg viewBox=0 0 512 512><path d=M464 288H48c-26.5 0-48 21.5-48 48v32c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-32c0-26.5-21.5-48-48-48zM224 432c-60.6 0-111.4-41.5-125.4-96h250.8c-14 54.5-64.8 96-125.4 96zM464 64H48C21.5 64 0 85.5 0 112v48h512v-48c0-26.5-21.5-48-48-48zM76.3 192h359.4L412 264H100l-23.7-72z></path></svg> </div> <div class=cat-name>Breakroom Snacks</div> </a> <a href=# class=cat-item> <div class=cat-img-box> <svg viewBox=0 0 512 512><path d=M0 32v128h512V32c0-17.7-14.3-32-32-32H32C14.3 0 0 14.3 0 32zm0 160v32c0 17.7 14.3 32 32 32h448c17.7 0 32-14.3 32-32v-32H0zm32 96h448v192c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V288z></path></svg> </div> <div class=cat-name>Cleaning Supplies</div> </a> <a href=# class=cat-item> <div class=cat-img-box> <svg viewBox=0 0 512 512><path d=M128 0C92.7 0 64 28.7 64 64v96h64V64h256v96h64V64c0-35.3-28.7-64-64-64H128zM64 224c-17.7 0-32 14.3-32 32s14.3 32 32 32h32V224H64zm384 0h32c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32c-17.7 0-32-14.3-32-32zM128 320H64v128c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V320H384v128H128V320z></path></svg> </div> <div class=cat-name>Printers & Scanners</div> </a> </div> </div> <script> const slider = document.getElementById('catTrack'); let isDown = false; let startX; let scrollLeft; slider.addEventListener('mousedown', (e) => { isDown = true; slider.classList.add('active'); startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft; }); slider.addEventListener('mouseleave', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mouseup', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mousemove', (e) => { if (!isDown) return; e.preventDefault(); const x = e.pageX - slider.offsetLeft; const walk = (x - startX) * 2; slider.scrollLeft = scrollLeft - walk; }); </script></body>
Recently Viewed Products
