Componenti Piè di pagina Acquerello/Piè di pagina artistico al neon

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.

Anteprima

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

Componenti correlati

Componente Piè di pagina - Prenotazione/Prenotazione - Caramelle in modalità scura

Un componente del piè di pagina complesso e reattivo progettato per i sistemi di prenotazione. Presenta un'interfaccia utente in modalità scura con colori vivaci caramelle/dolci, più collegamenti di navigazione, icone dei social media e un'iscrizione alla newsletter. Completamente reattivo e supporta la modalità oscura.

Aperto

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.

Aperto

Componente piè di pagina Glassmorphism

Un componente del piè di pagina reattivo con uno stile glassmorphism con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e supporta un tema scuro.

Aperto