Navegación footernavigationlayout
Glass Footer
Pie de página sencillo con acabado de cristal esmerilado, logo y derechos reservados.
Vista Previa en Vivo
Uso
Copia y pega este código directamente en tu página de Astro:
astro
---
import { GlassFooter } from 'astro-component-kit';
---
<SimpleFooterGlass>Content</SimpleFooterGlass>Instalación Manual
Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/GlassFooter.astro:
astro
---
---
<footer class="glass-foot">
<div class="foot-grid">
<div class="foot-brand">Astro Components<p>Premium components for the next web.</p></div>
<div class="foot-links">
<div><h5>Project</h5><a href="#">Github</a><a href="#">License</a></div>
<div><h5>Support</h5><a href="#">Issues</a><a href="#">Discord</a></div>
</div>
</div>
</footer>
<style>
.glass-foot { background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 4rem 1.5rem; }
.foot-grid { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3rem; }
.foot-brand { font-weight: 800; font-size: 1.5rem; color: #fff; }
.foot-brand p { font-size: 0.9rem; color: #64748b; font-weight: 400; margin-top: 0.5rem; max-width: 250px; }
.foot-links { display: flex; gap: 4rem; }
h5 { color: #fff; font-size: 0.85rem; margin-bottom: 1.25rem; }
a { display: block; text-decoration: none; color: #64748b; margin-bottom: 0.6rem; font-size: 0.85rem; }
a:hover { color: #818cf8; }
</style>Información Rápida
- Categoría
- Navegación
- Nombre de archivo
GlassFooter.astro- Dependencias
- Ninguna — Astro nativo + CSS puro
- Etiquetas
- footernavigationlayout