Footer · Cobalto

Completo

HTML

<footer class="cb-footer">
  <div class="cb-wrap">
    <div class="cb-footer__grid">
      <div>
        <a href="#" class="cb-logo"><span class="cb-logo__mark" aria-hidden="true">A</span>Acme</a>
        <p class="cb-footer__text">Software construido con cuidado y mantenido a largo plazo.</p>
      </div>
      <div><h4 class="cb-footer__title">Empresa</h4><ul class="cb-footer__links"><li><a href="#">Nosotros</a></li><li><a href="#">Contacto</a></li></ul></div>
      <div><h4 class="cb-footer__title">Producto</h4><ul class="cb-footer__links"><li><a href="#">Precios</a></li><li><a href="#">Cambios</a></li></ul></div>
      <div><h4 class="cb-footer__title">Comunidad</h4><ul class="cb-footer__links"><li><a href="#">GitHub ↗</a></li><li><a href="#">YouTube ↗</a></li></ul></div>
    </div>
    <div class="cb-footer__huge" aria-hidden="true">Acme</div>
    <div class="cb-footer__bottom"><span class="cb-footer__credit">© 2026 Oscar Castellanos (<a href="https://trupermax.com">TruperMax</a>) · <a href="https://github.com/OscarCastellanos01/cobalto/blob/main/LICENSE">Licencia MIT</a></span><span>Versión 2.4</span></div>
  </div>
</footer>

Clases y modificadores

Clase	Descripción
`.cb-footer`	Padding del pie.
`.cb-footer__grid`	Columnas 1.6fr + 3. Dos columnas por debajo de 960px.
`.cb-footer__text`	Descripción bajo el logo.
`.cb-footer__title`, `.cb-footer__links`	Título y lista de cada columna.
`.cb-footer__huge`	Texto gigante con contorno, `clamp(64px, 17vw, 230px)`.
`.cb-footer__bottom`	Fila final con copyright.
`.cb-footer__credit`	Texto de autoría con enlaces subrayados.

Accesibilidad

El texto gigante es decorativo: usa aria-hidden="true".
Si el sitio tiene varios nav, dale a cada uno un aria-label distinto.