Footer
Esta es la estructura base de un pie de página. Se divide en 3 horizontes: navegación principal desplegada como mapa de sitio, logos institucionales y links de acceso a información legal, accesibilidad y contacto.
HTML
<!-- Site Footer -->
<footer class="site-footer">
<div class="container">
<!-- Footer Menu -->
<nav aria-label="Footer navigation">
<ul class="site-footer__menu">
<li class="menu-item">
<a href="#">Universidad</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Historia</a></li>
<li class="menu-item"><a href="#">Autoridades</a></li>
<li class="menu-item"><a href="#">Organización</a></li>
<li class="menu-item"><a href="#">Campus</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#">Admisión</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Pregrado</a></li>
<li class="menu-item"><a href="#">Postgrado</a></li>
<li class="menu-item"><a href="#">Educación Continua</a></li>
<li class="menu-item"><a href="#">Becas y Beneficios</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#">Investigación</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Centros de Investigación</a></li>
<li class="menu-item"><a href="#">Proyectos</a></li>
<li class="menu-item"><a href="#">Publicaciones</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#">Vinculación</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Extensión</a></li>
<li class="menu-item"><a href="#">Servicios</a></li>
<li class="menu-item"><a href="#">Alumni</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Separator -->
<hr>
<!-- Logos -->
<div class="site-footer__logos">
<a href="/">
<img src="/udec-frontend-library/dist/img/logo-udec-white.png" alt="Universidad de Concepción" style="width: 220px; height: auto;">
</a>
<a href="#" target="_blank" rel="noopener">
<img src="/udec-frontend-library/dist/img/logo-cna.png" alt="Acreditación CNA" style="width: 140px; height: auto;">
</a>
</div>
<!-- Colofon -->
<div class="site-footer__colofon">
<p class="mb-16">© 2025 Universidad de Concepción.</p>
<ul class="menu">
<li class="menu-item"><a href="#">Política de Privacidad</a></li>
<li class="menu-item"><a href="#">Términos de Uso</a></li>
<li class="menu-item"><a href="#">Accesibilidad</a></li>
<li class="menu-item"><a href="#">Contacto</a></li>
</ul>
</div>
</div>
</footer>