CÓDIGO EN <head>
CÓDIGO antes de </body>
Plantillas educativas con vista simulada, cajas de código y enlaces a inspiración.
Grid de tarjetas responsivas. Al reducir vista se apilan en 2 y luego 1 columna.
Navbar responsive con botón hamburguesa y acción “Menu”. Basado en Bootstrap 5.
Hero de dos columnas con CTA y imagen. Construido con utilidades Tailwind.
Tres tarjetas con tilt al hover (según posición del cursor) y flip al click para mostrar el reverso. Soporta teclado (Enter/Espacio). Grid responsivo (1–2–3 columnas).
Tira de logos en movimiento continuo. Se pausa en hover y respeta "prefers-reduced-motion".
Cinta de texto continuo con duplicado para loop perfecto.
Dos filas de imágenes desplazándose en direcciones opuestas.
Sección tipo "feature": texto a un lado e imagen al otro. Sin Bootstrap, solo CSS responsivo.
Variante del feature clásico: ahora la imagen va a la izquierda. Layout responsive en CSS puro.
Tarjetas responsivas con imagen de fondo, título y footer, hechas con CSS.
Sidebar hecho con HTML, CSS y JavaScript. Incluye: overlay, cierre por click fuera, tecla ESC y bloqueo de scroll en móvil.
Cómo activar cada sección:
Cada enlace del sidebar es un <a> que puedes conectar a cualquier parte de tu página. Para que un enlace lleve a una sección específica del documento, asigna un id a la sección y enlázalo así:
<!-- En el sidebar --> <a href="#dashboard">📊 Dashboard</a> <!-- En el contenido principal --> <section id="dashboard"> <h2>Sección Dashboard</h2> <p>Contenido relacionado...</p> </section>
Al hacer clic, la página realizará scroll automático a esa sección. Si lo deseas, puedes mejorar la experiencia agregando scroll suave en CSS:
html { scroll-behavior: smooth; } Con esto, cada ítem del sidebar funcionará como un menú de navegación real en la misma página.
El cursor se sustituye por un emoji que sigue el movimiento del mouse.
Botón flotante que aparece al hacer scroll y regresa suavemente al inicio.
Revela bloques con transición cuando entran al viewport usando API nativa.
Botón para alternar entre modo claro/oscuro con persistencia en localStorage.
Acordeón que muestra y oculta su contenido al hacer clic. Usa nextElementSibling y
transiciones.
Sistema de pestañas sin recargar la página, basado en dataset y clases activas.
Números que suben automáticamente desde 0 hasta su valor final usando requestAnimationFrame.
Tooltip que sigue al cursor, con posición actualizada mediante mousemove.
Imagen que cambia en hover usando un atributo data-alt.
Un botón se “mueve” ligeramente hacia el cursor al acercarse.
Modal que abre y cierra con overlay. Cierre también haciendo click fuera.
Scroll suave hacia secciones internas usando scrollIntoView.
Efecto de parallax básico moviendo la posición del fondo con scroll.