<!doctype html>
<html lang="es">
<head>
  <!-- Codificación y adaptación al ancho del dispositivo -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi primera página</title>

  <!-- Hoja de estilos del framework -->
  <link rel="stylesheet"
        href="https://trummerwork-project.web.app/style.css">
</head>
<body>
  <!-- Tu contenido comienza aquí -->
  <h1 class="titulo titulo-grande texto-primario">Hola, mundo</h1>
  <p class="texto texto-mediano">Mi primera página con TrummerWork.</p>

  <!-- Necesario para componentes interactivos -->
  <script src="https://trummerwork-project.web.app/script.js"></script>
</body>
</html>Copiar

<!-- h2 conserva la jerarquía de encabezados -->
<h2 class="titulo titulo-mediano texto-primario">
  Un mensaje que destaca
</h2>

<!-- Las clases se separan con espacios -->
<p class="texto texto-grande texto-secundario">
  Este párrafo combina tamaño y color.
</p>

<!-- Un enlace que parece botón sigue siendo navegación -->
<a class="boton boton-primario texto-blanco" href="#componentes">
  Continuar aprendiendo
</a>Copiar

<!-- Un h1 para el tema principal de la página -->
<h1 class="titulo titulo-largo texto-primario">Título principal</h1>

<!-- Encabezados secundarios mantienen el orden semántico -->
<h2 class="titulo titulo-mediano">Título de una sección</h2>
<h3 class="titulo titulo-pequeño">Título de un bloque</h3>

<!-- El texto puede combinar tamaño, familia y color -->
<p class="texto texto-grande texto-inter texto-secundario">
  Una idea <strong class="texto-negrita">importante</strong>.
</p>

<!-- Alineación y transformación son clases independientes -->
<p class="texto-centro texto-mayusculas">Aviso centrado</p>Copiar

<!-- El padre define el grid, las columnas y la separación -->
<section class="display-grid columna-3 espacio-entre-2">
  <!-- Cada hijo ocupa una celda de la cuadrícula -->
  <article class="tarjetas fondo-blanco">
    <div class="contenedor-cuerpo-tarjeta">
      <h2 class="titulo titulo-pequeño">Planifica</h2>
      <p>Divide una meta en acciones.</p>
    </div>
  </article>
  <!-- Repite el patrón para los otros bloques -->
  <article class="tarjetas fondo-blanco">
    <div class="contenedor-cuerpo-tarjeta">
      <h2 class="titulo titulo-pequeño">Construye</h2>
      <p>Combina las clases necesarias.</p>
    </div>
  </article>
  <article class="tarjetas fondo-blanco">
    <div class="contenedor-cuerpo-tarjeta">
      <h2 class="titulo titulo-pequeño">Revisa</h2>
      <p>Prueba en distintos anchos.</p>
    </div>
  </article>
</section>Copiar

<!-- El header permite que la navbar sticky se mantenga visible -->
<header class="navbar-contenedor-seguimiento">
  <nav class="navbar navbar-blue navbar-seguimiento"
       aria-label="Navegación principal">
    <!-- Marca o nombre del sitio -->
    <a class="navbar-brand" href="#inicio">Mi sitio</a>

    <!-- Control móvil asociado a la etiqueta mediante id y for -->
    <input type="checkbox" id="menu"
           class="navbar-toggle" aria-controls="enlaces">
    <label class="navbar-toggle-label" for="menu"
           aria-label="Abrir o cerrar navegación">
      <span class="navbar-toggle-icon"></span>
    </label>

    <!-- Enlaces que aparecen en la barra y el menú móvil -->
    <ul class="navbar-menu" id="enlaces">
      <li><a class="navbar-link" href="#producto">Producto</a></li>
      <li><a class="navbar-link" href="#contacto">Contacto</a></li>
    </ul>
  </nav>
</header>Copiar

<!-- El formulario agrupa etiquetas y campos relacionados -->
<form class="formulario-simple fondo-blanco">
  <!-- for debe coincidir con el id del campo -->
  <label class="labeltxt" for="correo">Correo</label>
  <input class="form-input" id="correo" type="email"
         autocomplete="email" placeholder="tu@ejemplo.com">

  <label class="labeltxt" for="mensaje">Mensaje</label>
  <textarea class="message-input" id="mensaje"
            placeholder="Escribe tu mensaje"></textarea>

  <!-- El servidor o servicio debe procesar el envío -->
  <button class="send-boton" type="submit">Enviar</button>
</form>Copiar

<!-- Aviso con título y mensaje -->
<aside class="aviso fondo-azul texto-blanco">
  <p class="titulo-aviso">Consejo de diseño</p>
  <p>Destaca una recomendación que el usuario debe notar.</p>
</aside>

<!-- Cita para una nota o fragmento breve -->
<blockquote class="cita cita-pequeña">
  Una idea destacada para recordar.
</blockquote>Copiar

<!-- Hero define la presentación; indicadores controlan la navegación -->
<section class="slider slider-con-indicadores slider-hero"
         aria-label="Presentación del proyecto">
  <!-- El script desplaza esta pista entre diapositivas -->
  <div class="slider-pista">
    <!-- Una diapositiva contiene imagen y texto -->
    <article class="slider-diapositiva">
      <img src="equipo.jpg" alt="Equipo colaborando en una mesa">
      <!-- Combina una apariencia y una posición para el texto -->
      <div class="slider-texto slider-texto-oscuro slider-texto-izquierda-abajo">
        <h1 class="titulo-largo texto-blanco">Empieza con una idea.</h1>
        <p class="texto-grande texto-blanco">Descripción breve.</p>
        <a class="boton boton-primario texto-blanco" href="#contenido">
          Conocer más
        </a>
      </div>
    </article>
    <!-- Duplica article para añadir otra diapositiva -->
    <article class="slider-diapositiva">
      <img src="proyecto.jpg" alt="Equipo revisando un proyecto">
      <div class="slider-texto slider-texto-vidrio slider-texto-centro">
        <h2 class="titulo-grande texto-blanco">Otra idea.</h2>
      </div>
    </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 añade un indicador por diapositiva -->
  <div class="slider-indicadores"></div>
</section>Copiar

<!-- Navbar: identidad y enlaces a secciones -->
<header class="navbar-contenedor-seguimiento">
  <nav class="navbar navbar-green navbar-seguimiento"
       aria-label="Navegación principal">
    <a class="navbar-brand" href="#inicio">VERDE</a>
    <ul class="navbar-menu">
      <li><a class="navbar-link" href="#beneficios">Beneficios</a></li>
      <li><a class="navbar-link" href="#contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

<!-- Main contiene el tema principal de la página -->
<main id="inicio">
  <!-- Hero: propuesta principal y llamada a la acción -->
  <section class="fondo-secundario texto-blanco padding-grande texto-centro">
    <p class="texto texto-mayusculas texto-blanco">Una idea para el futuro</p>
    <h1 class="titulo titulo-grande texto-blanco">Cultiva algo mejor.</h1>
    <p class="texto texto-grande texto-blanco">Descripción de tu proyecto.</p>
    <a class="boton fondo-blanco texto-primario" href="#beneficios">
      Descubrir beneficios
    </a>
  </section>

  <!-- Grid: presenta beneficios en tarjetas -->
  <section id="beneficios" class="contenedor display-grid columna-3 espacio-entre-2">
    <article class="tarjetas fondo-blanco">
      <div class="contenedor-cuerpo-tarjeta">
        <h2 class="titulo titulo-pequeño">Simple</h2>
        <p>Un beneficio concreto.</p>
      </div>
    </article>
    <!-- Duplica tarjetas para más beneficios -->
  </section>
</main>

<!-- Footer: marca, navegación y créditos -->
<footer class="footer">
  <div class="footer-contenido">
    <div class="footer-superior">
      <section class="footer-marca">
        <h2>VERDE</h2>
        <p>Descripción corta del proyecto.</p>
      </section>
      <nav class="footer-columna" aria-label="Enlaces">
        <h2>Explorar</h2>
        <a href="#beneficios">Beneficios</a>
      </nav>
    </div>
    <div class="footer-inferior">
      <p>© Mi proyecto</p>
      <a href="#inicio">Volver arriba</a>
    </div>
  </div>
</footer>Copiar