Componente di navigazione del piè di pagina
Un semplice componente di navigazione a piè di pagina progettato in stile brutalista con una combinazione di colori triadica per le interfacce dei social media. Include collegamenti e immagini avatar, con supporto per la modalità oscura.
Codice HTML
<footer class="bg-gray-800 dark:bg-gray-900 text-white py-4">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="flex flex-col md:flex-row items-center">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2 md:mb-0 md:mr-4">
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Home</a></li>
<li><a href="#" class="hover:text-red-400 dark:hover:text-red-300">About</a></li>
<li><a href="#" class="hover:text-green-400 dark:hover:text-green-300">Contact</a></li>
</ul>
</div>
<div class="flex space-x-4 mt-4 md:mt-0">
<a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Facebook</a>
<a href="#" class="hover:text-red-400 dark:hover:text-red-300">Twitter</a>
<a href="#" class="hover:text-green-400 dark:hover:text-green-300">Instagram</a>
</div>
</div>
</footer>Componenti correlati
Componente di navigazione del piè di pagina
Un componente di navigazione a piè di pagina reattivo con uno stile glassmorphism con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura. Supporta la modalità oscura e include immagini segnaposto.
Componente di navigazione del piè di pagina
Un componente di navigazione a piè di pagina reattivo con un tema scuro, adatto per un sito web portfolio. Presenta una combinazione di colori monocromatici con diverse sfumature di un singolo colore, una complessità media con alcune funzionalità interattive e utilizza Tailwind CSS per lo stile, incluso il supporto della modalità oscura con il prefisso dark:.
Componente di navigazione del piè di pagina
Un semplice componente di navigazione a piè di pagina con i principi di Material Design e una combinazione di colori analoga per siti Web aziendali/aziendali. Supporta la modalità oscura ed è reattivo.