Componenti Piè di pagina Luxury_Premium_Crypto_Footer

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.

Anteprima

Codice HTML

<footer class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-12 dark:from-gray-950 dark:to-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row items-center justify-between space-y-8 md:space-y-0">
      <!-- Logo / Brand Name -->
      <div class="flex-shrink-0">
        <a href="#" class="text-3xl font-bold tracking-tight text-white dark:text-blue-300 font-serif">
          Crypto<span class="text-blue-300 dark:text-blue-500">Ledger</span>
        </a>
      </div>

      <!-- Navigation Links -->
      <nav class="flex flex-wrap justify-center gap-x-8 gap-y-4 text-lg font-medium">
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Home</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Products</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">About Us</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Contact</a>
      </nav>

      <!-- Social Media Icons (simplified for a simple design) -->
      <div class="flex space-x-6">
        <a href="#" class="text-white hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.388 21.125 22 16.592 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-white hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.31c9 0 13.92-7.46 13.92-13.97 0-.21-.01-.42-.01-.63A10.02 10.02 0 0024 4.31a9.91 9.91 0 01-2.88.79 4.96 4.96 0 002.16-2.77 9.87 9.87 0 01-3.13 1.19A4.95 4.95 0 0012.06 6.3c-4.99 0-9.05 4.06-9.05 9.06 0 .71.07 1.4.21 2.06A14.07 14.07 0 001.3 6.94a4.95 4.95 0 001.54 6.57A4.9 4.9 0 011.83 12v.06a4.96 4.96 0 003.97 4.86 4.92 4.92 0 01-1.78.07 4.96 4.96 0 004.62 3.44c-3.79 2.98-8.54 4.54-13.79 4.54-1.12 0-2.22-.07-3.29-.18C3.06 22.13 7.82 20.31 8.29 20.31z"/>
          </svg>
        </a>
      </div>
    </div>

    <div class="mt-8 pt-8 border-t border-blue-600 dark:border-gray-700 text-center text-sm text-blue-100 dark:text-gray-400">
      &copy; 2023 CryptoLedger. All rights reserved.
    </div>
  </div>
</footer>

Componenti correlati

Dissolvenza in entrata del piè di pagina 3D

Piè di pagina reattivo con elementi di design 3D e supporto per la 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

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