Galería de código

Una colección de menús, componentes y animaciones listos para copiar y pegar en tus proyectos. Cada pieza es un archivo HTML autocontenido: el HTML, el CSS y el JavaScript viven juntos, sin librerías externas, así que funciona tal cual en cualquier página.

Úsala como punto de partida para trabajos reales: una landing para un cliente, el panel de administración de tu app o tu portafolio. En vez de empezar de cero, eliges una pieza, la copias y la adaptas a la marca del proyecto cambiando unas pocas variables CSS.

Todo está hecho con buenas prácticas: HTML semántico, atributos aria donde hacen falta, foco visible para quien navega con teclado, diseño responsive y JavaScript vanilla mínimo y comentado en español.

Secciones

🧭 MenúsMás de 20 menús: barras de navegación, hamburguesa, off-canvas, sidebars, dropdowns, mega menús, tabs, breadcrumbs, paginación y más.🧩 Componentes UIBotones, tarjetas, formularios, modales, toasts, heros, tablas de precios, footers, carruseles, timelines y muchos más.✨ AnimacionesEfectos y animaciones CSS/JS para dar vida a tus interfaces: hover, entradas, loaders, scroll y más.

Cómo usar la galería

Cada pieza se muestra en un recuadro interactivo con varias pestañas:

Pestaña / botón	Para qué sirve
Vista previa	Pruebas el componente en vivo. Con 📱 💻 🖥️ ves cómo se adapta a móvil, tablet y escritorio. ↻ lo reinicia.
HTML / CSS / JS	El código separado por lenguaje, ideal si ya tienes tu propio archivo .css o .js.
Archivo completo	El HTML entero, listo para guardarlo como index.html y abrirlo en el navegador.
Copiar	Copia al portapapeles el código de la pestaña que estés viendo.
✏️ Editar en el Playground	Abre el código en el Playground para modificarlo y ver los cambios al instante.
↗ Abrir en pestaña nueva	Muestra la demo a pantalla completa.

Copiar a tu proyecto

1. Abre la pestaña Archivo completo y pulsa Copiar si quieres probarlo solo; o copia por separado HTML, CSS y JS si lo integras en un proyecto existente.
2. Pega el HTML donde quieras que aparezca el componente.
3. Pega el CSS en tu hoja de estilos (o dentro de un <style>).
4. Pega el JS al final del <body> (o en tu archivo .js, cargado con defer).

Personalizar colores y tamaños

Casi todas las piezas definen sus colores en variables CSS al inicio del estilo:

:root {
  --color-primario: #7c3aed; /* cambia este valor y todo el componente se adapta */
  --fondo: #ffffff;
  --texto: #0f172a;
  --radio: 12px;
}

Cambia esos valores por los de la marca de tu cliente y listo. Cada página explica, en Cómo personalizarlo, qué variables y clases tocar.

Buena práctica

Si combinas varias piezas en la misma página, revisa que no repitan nombres de clases o de variables en :root. Puedes agruparlas en una sola paleta de variables compartida para que todo tu sitio tenga un estilo coherente.

Error común

Copiar solo el HTML y olvidar el CSS o el JS. Si el componente se ve "roto" o no responde a los clics, revisa que hayas pegado las tres partes.