Luxury_Premium_Crypto_Footer
Un componente de pie de página elegante y receptivo para aplicaciones de criptomonedas/blockchain, con un número limitado de enlaces, derechos de autor e íconos de redes sociales. Utiliza un esquema de color azul corporativo con soporte para modo oscuro.
Código 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">
© 2023 CryptoLedger. All rights reserved.
</div>
</div>
</footer>
Componentes relacionados
Bauhaus Monocromático Healthcare Pie de página
Un componente de pie de página simple y funcional para aplicaciones sanitarias, inspirado en los principios de diseño de la Bauhaus. Cuenta con un esquema de color monocromático, diseño receptivo y compatibilidad con modo oscuro.
Acuarela/Pie de página de neón artístico
Un componente de pie de página simple y receptivo con una estética artística / acuarela y un esquema de color neón vibrante, adecuado para un sitio web de portafolio. Incluye soporte para modo oscuro.
Componente de pie de página
Un componente de pie de página diseñado en un estilo skeuomórfico con un esquema de color triádico y complejidad moderada, adecuado para un diseño de blog/contenido.