Acquerello/Piè di pagina artistico al neon
Un componente piè di pagina semplice e reattivo con un'estetica acquerello/artistica e una vivace combinazione di colori al neon, adatto per un sito Web di portfolio. Include il supporto per la modalità oscura.
Codice HTML
<footer class="relative bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 text-gray-800 py-8 px-4 sm:px-6 lg:px-8 overflow-hidden dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 dark:text-gray-200">
<!-- Artistic Overlays (Simulated watercolor effect with gradients) -->
<div class="absolute inset-0 z-0 opacity-40 mix-blend-multiply">
<div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-blue-400 rounded-full filter blur-3xl opacity-60 dark:bg-blue-600"></div>
<div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-pink-400 rounded-full filter blur-3xl opacity-60 dark:bg-pink-600"></div>
<div class="absolute top-1/4 right-0 w-1/3 h-1/3 bg-lime-300 rounded-full filter blur-3xl opacity-60 dark:bg-lime-500"></div>
</div>
<div class="relative z-10 max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-center md:text-left">
<div class="flex flex-col items-center md:items-start space-y-2">
<p class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-pink-600 to-lime-600 dark:from-blue-400 dark:via-pink-400 dark:to-lime-400">
[Your Name/Studio]
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
© <span id="current-year"></span> All rights reserved.
</p>
</div>
<nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2">
<a href="#" class="text-sm font-medium hover:text-blue-500 transition duration-300 dark:hover:text-blue-300">Home</a>
<a href="#" class="text-sm font-medium hover:text-pink-500 transition duration-300 dark:hover:text-pink-300">Portfolio</a>
<a href="#" class="text-sm font-medium hover:text-lime-500 transition duration-300 dark:hover:text-lime-300">About</a>
<a href="#" class="text-sm font-medium hover:text-purple-500 transition duration-300 dark:hover:text-purple-300">Contact</a>
</nav>
</div>
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>
</footer>
Componenti correlati
Luxury_Premium_Crypto_Footer
Un componente a piè di pagina elegante e reattivo per applicazioni di criptovaluta/blockchain, con un numero limitato di link, copyright e icone dei social media. Utilizza una combinazione di colori blu aziendale con supporto per la modalità scura.
Componente piè di pagina scheumorfico
Componente piè di pagina reattivo con design scheumorfico, combinazione di colori analoga (verdi, blu-verdi) e complessità moderata adatta per siti Web aziendali. Include collegamenti, un segnaposto del logo e un sottile effetto Skeuomorphic ottenuto con ombre e sfumature. Supporta le modalità chiara e scura.
Componente piè di pagina
Un componente reattivo del piè di pagina retrò/vintage per un blog con combinazione di colori triadica e supporto per temi scuri.