Piè di pagina vibrante neumorfico
Un componente del piè di pagina semplice e reattivo, progettato con principi di design neumorfici e colori vivaci. Presenta un aspetto morbido ed estruso con ombre sottili pur mantenendo colori d'accento ad alta saturazione. Il piè di pagina include sezioni di base per la navigazione del sito, i collegamenti social e le informazioni sul copyright con supporto completo della modalità scura.
Codice HTML
<!-- Neumorphic Vibrant Footer -->
<footer class="w-full py-8 bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Main Footer Content -->
<div class="rounded-2xl bg-gray-200 dark:bg-gray-700 p-8 shadow-[8px_8px_16px_#d1d1d1,_-8px_-8px_16px_#ffffff] dark:shadow-[8px_8px_16px_#1a1a1a,_-8px_-8px_16px_#333333]">
<!-- Logo & Tagline -->
<div class="flex flex-col md:flex-row justify-between items-center mb-8">
<div class="mb-6 md:mb-0">
<h2 class="text-2xl font-bold text-fuchsia-600 dark:text-fuchsia-400">Blog Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-1">Insights & Stories</p>
</div>
<!-- Newsletter Signup -->
<div class="flex items-center space-x-2">
<input
type="email"
placeholder="Your email"
class="px-4 py-2 rounded-xl bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 shadow-inner"
>
<button class="px-4 py-2 rounded-xl bg-gradient-to-br from-fuchsia-500 to-purple-600 text-white font-medium shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:opacity-90 transition-opacity">
Subscribe
</button>
</div>
</div>
<!-- Navigation Links -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
<div>
<h3 class="font-semibold text-lg mb-3 text-cyan-600 dark:text-cyan-400">Content</h3>
<ul class="space-y-2 text-gray-600 dark:text-gray-300">
<li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Articles</a></li>
<li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Tutorials</a></li>
<li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Stories</a></li>
</ul>
</div>
<div>
<h3 class="font-semibold text-lg mb-3 text-emerald-600 dark:text-emerald-400">Company</h3>
<ul class="space-y-2 text-gray-600 dark:text-gray-300">
<li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">About</a></li>
<li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Team</a></li>
<li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Careers</a></li>
</ul>
</div>
<div>
<h3 class="font-semibold text-lg mb-3 text-amber-600 dark:text-amber-400">Support</h3>
<ul class="space-y-2 text-gray-600 dark:text-gray-300">
<li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Help Center</a></li>
<li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Contact</a></li>
<li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Privacy</a></li>
</ul>
</div>
<div>
<h3 class="font-semibold text-lg mb-3 text-blue-600 dark:text-blue-400">Connect</h3>
<div class="flex space-x-4">
<!-- Social Icons -->
<a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-fuchsia-500 dark:text-fuchsia-400 shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:bg-fuchsia-500 hover:text-white dark:hover:bg-fuchsia-500 dark:hover:text-white transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/>
</svg>
</a>
<a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-cyan-500 dark:text-cyan-400 shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:bg-cyan-500 hover:text-white dark:hover:bg-cyan-500 dark:hover:text-white transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-pink-500 dark:text-pink-400 shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:bg-pink-500 hover:text-white dark:hover:bg-pink-500 dark:hover:text-white transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</a>
</div>
</div>
</div>
<!-- Footer Bottom -->
<div class="pt-6 border-t border-gray-300 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
<p class="text-gray-600 dark:text-gray-300 text-sm">
© 2023 Blog Title. All rights reserved.
</p>
<div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400">
<a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Terms</a>
<a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Privacy</a>
<a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Cookies</a>
</div>
</div>
</div>
</div>
</footer>Componenti correlati
Piè di pagina del blog retrò
Un componente piè di pagina retrò/vintage per un blog con combinazione di colori monocromatici, layout semplice, design reattivo e supporto per temi scuri.
Piè di pagina Componente Piè di pagina
Un semplice componente del piè di pagina con un sottile design di scheumorfismo, che utilizza una combinazione di colori analoga. Include un avviso di copyright, alcuni link di navigazione e icone dei social media. Il design è reattivo e supporta la modalità oscura.
Luxury_Pastel_Government_Footer
Un componente piè di pagina elegante e reattivo per siti Web governativi o di servizio pubblico, caratterizzato da un design lussuoso con una combinazione di colori pastello e supporto per la modalità scura. Include link di navigazione, informazioni di contatto, social media e copyright.