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
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.
Fundido de entrada del pie de página 3D
Pie de página responsivo con elementos de diseño 3D y compatibilidad con el modo oscuro
Componente de pie de página
Un componente de pie de página responsivo simple diseñado en un estilo retro / vintage con soporte para temas oscuros, usando Tailwind CSS. Cuenta con un diseño básico adecuado para sitios web comerciales / corporativos.