Komponenten Fußzeile Aquarell/Künstlerischer Neon-Footer

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.

Vorschau

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">
        &copy; <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

Industrial_Candy_Footer_Component

Eine reaktionsschnelle Fußzeilenkomponente für ein Forum/eine Community-Plattform, die sich durch eine "industrielle" Ästhetik mit "Bonbons/süßen" Farbakzenten auszeichnet. Enthält Navigationslinks, Social-Media-Symbole, Urheberrecht und eine Newsletter-Anmeldung mit vollständiger Unterstützung des Dunkelmodus.

Offen

Footer-Komponente

Eine Fußzeilenkomponente, die in einem skeuomorphen Stil mit einem triadischen Farbschema und moderater Komplexität entworfen wurde und für ein Blog-/Content-Layout geeignet ist.

Offen

Luxury_Pastel_Government_Footer

Eine elegante, reaktionsschnelle Fußzeilenkomponente für Websites von Behörden oder öffentlichen Diensten mit einem luxuriösen Design mit pastellfarbenem Farbschema und Unterstützung für den Dunkelmodus. Enthält Navigationslinks, Kontaktinformationen, soziale Medien und Urheberrecht.

Offen