Навигация footernavigationlayout
Glass Footer
Простой стеклянный футер с логотипом, ссылками и копирайтом.
Живое превью
Использование
Скопируйте и вставьте этот код на вашу страницу Astro:
astro
---
import { GlassFooter } from 'astro-component-kit';
---
<SimpleFooterGlass>Content</SimpleFooterGlass>Ручная установка
Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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>Краткая информация
- Категория
- Навигация
- Имя файла
GlassFooter.astro- Зависимости
- Нет — чистый Astro + CSS
- Теги
- footernavigationlayout