Componente di navigazione del piè di pagina
Componente di navigazione a piè di pagina con design del neumorfismo, combinazione di colori monocromatici, complessità complessa e scopo dei social media. Design reattivo con supporto per temi scuri.
Codice HTML
<footer class="bg-gray-200 dark:bg-gray-800 py-8 px-4">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">About Us</h3>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et est in justo feugiat consectetur.</p>
</div>
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Services</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
</ul>
</div>
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Follow Us</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="mt-8 text-center text-gray-600 dark:text-gray-300">
© 2023 Your Company. All rights reserved.
</div>
<style>
.neumorphic-card {
background: #e0e0e0;
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .neumorphic-card {
background: #333333;
box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
}
</style>
</footer>Componenti correlati
Glassmorphism Grayscale Healthcare Footer
Un componente di navigazione a piè di pagina reattivo in stile glassmorphism per applicazioni mediche/sanitarie, che utilizza una combinazione di colori in scala di grigi con supporto della modalità scura. È dotato di elementi traslucidi simili al vetro smerigliato e collegamenti interattivi.
Componente di navigazione a piè di pagina - Monospace/Stile sviluppatore
Un componente di navigazione a piè di pagina complesso e reattivo progettato per siti Web di agricoltura/allevamento, caratterizzato da un'estetica monospace/sviluppatore con una combinazione di colori arcobaleno sfumato e supporto per la modalità scura.
NeonBaglioPiè di paginaNavigazione
Un componente di navigazione a piè di pagina reattivo con effetti neon/bagliore, progettato per piattaforme musicali/audio. Presenta una combinazione di colori in bianco e nero con un vivace colore d'accento, supporto per la modalità oscura e HTML semantico.