Aquarell/Künstlerischer Neon-Footer
Eine einfache, reaktionsschnelle Fußzeilenkomponente mit Aquarell-/Kunstästhetik und einem lebendigen Neon-Farbschema, geeignet für eine Portfolio-Website. Enthält Unterstützung für den Dunkelmodus.
HTML-Code
<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>
Verwandte Komponenten
Bauhaus monochromatische Fußzeile für das Gesundheitswesen
Eine einfache, funktionale Fußzeilenkomponente für Anwendungen im Gesundheitswesen, inspiriert von den Designprinzipien des Bauhauses. Verfügt über ein monochromatisches Farbschema, ein responsives Layout und Unterstützung für den Dunkelmodus.
Footer-Komponente
Eine einfache, reaktionsschnelle Fußzeilenkomponente mit 3D-Designelementen und Erdtönen, die für einen Blog oder eine Content-Site mit Unterstützung für dunkle Themen entwickelt wurde.
Footer-Komponente
Einfache, saubere und vertrauenswürdige Fußzeilenkomponente, die für geschäftliche/professionelle Buchungs- und Reservierungssysteme geeignet ist, mit einem subtilen Regenbogen-Farbverlaufsrand und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.