Diseña paso a paso con TrummerWork.

<!-- Contenedor y variante de desplazamiento horizontal -->
<div class="slider slider-basico">
  <!-- Pista que el JavaScript mueve para cambiar de diapositiva -->
  <div class="slider-pista">
    <!-- Cada article es una diapositiva; aquí se combina con un fondo -->
    <article class="slider-diapositiva fondo-azul">
      <h2 class="titulo titulo-mediano texto-blanco">Primera diapositiva</h2>
    </article>
    <!-- Duplica este article para agregar otra diapositiva -->
    <article class="slider-diapositiva fondo-verde">
      <h2 class="titulo titulo-mediano texto-blanco">Segunda diapositiva</h2>
    </article>
  </div>
  <!-- Control opcional para retroceder -->
  <button class="slider-anterior" type="button"
          aria-label="Diapositiva anterior">‹</button>
  <!-- Control opcional para avanzar -->
  <button class="slider-siguiente" type="button"
          aria-label="Siguiente diapositiva">›</button>
</div>Copiar

<!-- Variante que genera puntos de navegación automáticamente -->
<div class="slider slider-con-indicadores">
  <!-- Pista con todas las diapositivas -->
  <div class="slider-pista">
    <!-- Primera diapositiva -->
    <article class="slider-diapositiva fondo-primario">
      <h2 class="titulo titulo-mediano texto-blanco">Primera diapositiva</h2>
    </article>
    <!-- Segunda diapositiva -->
    <article class="slider-diapositiva fondo-morado">
      <h2 class="titulo titulo-mediano texto-blanco">Segunda diapositiva</h2>
    </article>
  </div>
  <!-- Controles anterior y siguiente -->
  <button class="slider-anterior" type="button"
          aria-label="Diapositiva anterior">‹</button>
  <button class="slider-siguiente" type="button"
          aria-label="Siguiente diapositiva">›</button>
  <!-- El script inserta aquí un punto por diapositiva -->
  <div class="slider-indicadores"></div>
</div>Copiar

<!-- Variante que cambia las diapositivas con opacidad -->
<div class="slider slider-fundido">
  <!-- La pista contiene las diapositivas apiladas -->
  <div class="slider-pista">
    <!-- Diapositiva inicial -->
    <article class="slider-diapositiva fondo-naval">
      <h2 class="titulo titulo-mediano texto-blanco">Primera diapositiva</h2>
    </article>
    <!-- Diapositiva siguiente -->
    <article class="slider-diapositiva fondo-rojo">
      <h2 class="titulo titulo-mediano texto-blanco">Segunda diapositiva</h2>
    </article>
  </div>
  <!-- Controles opcionales para cambiar manualmente -->
  <button class="slider-anterior" type="button"
          aria-label="Diapositiva anterior">‹</button>
  <button class="slider-siguiente" type="button"
          aria-label="Siguiente diapositiva">›</button>
</div>Copiar

<!-- Variante de zoom: necesita imágenes en las diapositivas -->
<div class="slider slider-zoom">
  <!-- Pista que desplaza las diapositivas -->
  <div class="slider-pista">
    <!-- Imagen con texto alternativo descriptivo -->
    <article class="slider-diapositiva">
      <img src="foto-1.jpg" alt="Descripción de la primera imagen">
    </article>
    <!-- Duplica esta estructura para cada imagen adicional -->
    <article class="slider-diapositiva">
      <img src="foto-2.jpg" alt="Descripción de la segunda imagen">
    </article>
  </div>
  <!-- Controles para avanzar o retroceder -->
  <button class="slider-anterior" type="button"
          aria-label="Diapositiva anterior">‹</button>
  <button class="slider-siguiente" type="button"
          aria-label="Siguiente diapositiva">›</button>
</div>Copiar

<!-- Hero combina indicadores con el formato grande de portada -->
<section class="slider slider-con-indicadores slider-hero"
         aria-label="Presentación principal">
  <!-- Pista que agrupa las escenas de la portada -->
  <div class="slider-pista">
    <!-- Escena: imagen de fondo y texto sobrepuesto -->
    <article class="slider-diapositiva">
      <img src="foto-portada-1.jpg" alt="Descripción de la primera escena">
      <!-- Elige una apariencia y una posición para el texto -->
      <div class="slider-texto slider-texto-oscuro slider-texto-izquierda-abajo">
        <p class="texto-mayusculas texto-blanco">Frase introductoria</p>
        <h1 class="titulo-largo texto-blanco">Título de portada</h1>
        <p class="texto-grande texto-blanco">Descripción breve del proyecto.</p>
        <a class="boton boton-primario texto-blanco" href="#contenido">
          Conocer más
        </a>
      </div>
    </article>
    <!-- Otra escena puede usar una apariencia y posición diferentes -->
    <article class="slider-diapositiva">
      <img src="foto-portada-2.jpg" alt="Descripción de la segunda escena">
      <div class="slider-texto slider-texto-vidrio slider-texto-centro">
        <h2 class="titulo-grande texto-blanco">Otra idea importante</h2>
        <p class="texto-grande texto-blanco">Otro mensaje breve.</p>
        <a class="boton fondo-verde texto-blanco" href="#contenido">
          Ver detalles
        </a>
      </div>
    </article>
  </div>
  <!-- Controles para navegar entre escenas -->
  <button class="slider-anterior" type="button"
          aria-label="Diapositiva anterior">‹</button>
  <button class="slider-siguiente" type="button"
          aria-label="Siguiente diapositiva">›</button>
  <!-- El script crea los puntos de navegación -->
  <div class="slider-indicadores"></div>
</section>Copiar

<!-- La diapositiva posiciona la imagen y la capa de texto -->
<article class="slider-diapositiva">
  <!-- Imagen de fondo con descripción accesible -->
  <img src="foto.jpg" alt="Descripción de la escena">
  <!-- Combina slider-texto + una apariencia + una posición -->
  <div class="slider-texto slider-texto-oscuro slider-texto-izquierda-abajo">
    <!-- Título y descripción del contenido -->
    <h2 class="texto-blanco">Título sobre la imagen</h2>
    <p class="texto-blanco">Una descripción breve y legible.</p>
    <!-- Acción opcional de la diapositiva -->
    <a class="boton boton-primario texto-blanco" href="#contenido">
      Conocer más
    </a>
  </div>
</article>

<!-- Apariencias: slider-texto-oscuro, slider-texto-claro,
     slider-texto-blanco o slider-texto-vidrio.
     Posiciones: slider-texto-centro, slider-texto-izquierda-arriba,
     slider-texto-izquierda-abajo, slider-texto-derecha-arriba
     o slider-texto-derecha-abajo. -->Copiar

<!-- Carrusel compacto; usa una lista en vez de slider-pista -->
<div class="slider-compacto">
  <!-- Capa opcional de título y descripción sobre las imágenes -->
  <div class="slider-compacto-texto">
    <h2>Galería de proyectos</h2>
    <p>Una descripción breve de la galería.</p>
  </div>
  <!-- El elemento activo inicia con la clase active -->
  <ul>
    <li class="active">
      <img src="foto-1.jpg" alt="Descripción de la primera imagen">
    </li>
    <li>
      <img src="foto-2.jpg" alt="Descripción de la segunda imagen">
    </li>
    <li>
      <img src="foto-3.jpg" alt="Descripción de la tercera imagen">
    </li>
  </ul>
  <!-- Botones de navegación propios del slider compacto -->
  <button class="slider-compacto-anterior" type="button"
          aria-label="Imagen anterior">‹</button>
  <button class="slider-compacto-siguiente" type="button"
          aria-label="Siguiente imagen">›</button>
</div>Copiar

<!-- Pie de página; el framework aplica fondo y color -->
<footer class="footer">
  <!-- Centra el contenido y limita su ancho -->
  <div class="footer-contenido">
    <!-- Zona superior con marca y columnas de navegación -->
    <div class="footer-superior">
      <!-- Identidad del sitio y descripción breve -->
      <section class="footer-marca">
        <h2>Mi sitio</h2>
        <p>Una descripción corta de tu proyecto.</p>
      </section>
      <!-- Primera columna de enlaces -->
      <nav class="footer-columna" aria-label="Enlaces principales">
        <h2>Explorar</h2>
        <a href="#inicio">Inicio</a>
        <a href="#servicios">Servicios</a>
      </nav>
      <!-- Agrega más nav.footer-columna si necesitas más grupos -->
      <nav class="footer-columna" aria-label="Ayuda y recursos">
        <h2>Recursos</h2>
        <a href="#ayuda">Ayuda</a>
        <a href="#contacto">Contacto</a>
      </nav>
    </div>
    <!-- Franja inferior para copyright y enlaces secundarios -->
    <div class="footer-inferior">
      <p>© 2026 Mi sitio. Todos los derechos reservados.</p>
      <a href="#privacidad">Privacidad</a>
    </div>
  </div>
</footer>Copiar

<!-- La clase se agrega al elemento que quieres animar -->
<h2 class="desvanecer-entrada">Aparece suavemente</h2>

<!-- Desaparece suavemente -->
<div class="desvanecer-salida">Mensaje temporal</div>

<!-- Entra desde abajo -->
<article class="tarjetas deslizar-arriba">Contenido</article>

<!-- Entra desde arriba -->
<section class="deslizar-abajo">Contenido</section>

<!-- Entra desde la derecha -->
<div class="deslizar-izquierda">Contenido</div>

<!-- Entra desde la izquierda -->
<div class="deslizar-derecha">Contenido</div>

<!-- Aparece aumentando de tamaño -->
<div class="zoom-in">Contenido ampliado</div>

<!-- Desaparece reduciendo su tamaño -->
<div class="zoom-out">Contenido que se cierra</div>

<!-- Aparece con un rebote breve -->
<div class="bounce-in">Nuevo elemento</div>Copiar