Retro_Jewel_Tone_Dashboard_Footer_Navigation
Un componente de navegación de pie de página receptivo para un tablero, inspirado en la estética retro / vintage con colores en tonos joya (esmeralda, zafiro, rubí) y soporte de modo oscuro. Incluye enlaces de navegación, iconos de redes sociales e información sobre derechos de autor.
Código HTML
<footer class="bg-gradient-to-r from-emerald-700 to-sapphire-800 text-white py-12 px-6 sm:px-8 lg:px-12 dark:from-emerald-950 dark:to-slate-900 border-t-4 border-emerald-500 dark:border-ruby-600 font-mono">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-10">
<div class="col-span-1">
<h3 class="text-2xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide uppercase">Retr<span class="text-emerald-300 dark:text-ruby-400">o</span>Dash</h3>
<p class="text-emerald-100 text-sm leading-relaxed mb-4">
Navigating the digital frontier with a nostalgic glance. Your trusted partner for insights from the past, presented for the future.
</p>
<div class="flex space-x-4">
<a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" 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.79c0-2.508 1.493-3.89 3.776-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.361 21.109 22 16.51 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.31c9 0 13.92-7.55 13.92-13.92 0-.21 0-.42-.01-.63A10.02 10.02 0 0024 4.31a9.8 9.8 0 01-2.82.77A4.9 4.9 0 0023.23 2.7c.92-2.73-1.66-4.57-4.42-4.57-2.61 0-4.66 1.77-5.5 4.1-.11.29-.11.59-.11.89C13.2 5 8.7 5.76 5.2 3.25c-3.1 5.3-7.53 10.05-13.62 10.05v-.01c.21 0 .42 0 .63-.01A4.9 4.9 0 003.35 18a9.8 9.8 0 01-6.88 1.94c-1.39.06-2.76-.09-4.1-.42 9 0 13.93-7.55 13.93-13.92 0-.21 0-.42-.01-.63A10.02 10.02 0 0024 4.31a9.8 9.8 0 01-2.82.77A4.9 4.9 0 0023.23 2.7c.92-2.73-1.66-4.57-4.42-4.57-2.61 0-4.66 1.77-5.5 4.1-.11.29-.11.59-.11.89C13.2 5 8.7 5.76 5.2 3.25c-3.1 5.3-7.53 10.05-13.62 10.05v-.01c.21 0 .42 0 .63-.01A4.9 4.9 0 003.35 18a9.8 9.8 0 01-6.88 1.94c-1.39.06-2.76-.09-4.1-.42z" />
</svg>
</a>
<a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.863 8.163 6.84 9.504.498.09.678-.216.678-.47v-1.68c-2.775.605-3.363-1.34-3.363-1.34-.455-1.157-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.006.07 1.532 1.026 1.532 1.026.892 1.53 2.34 1.085 2.91.83.09-.645.35-1.085.637-1.34-2.22-.253-4.555-1.11-4.555-4.912 0-1.087.388-1.974 1.029-2.672-.102-.253-.448-1.267.098-2.637 0 0 .84-.268 2.75 1.024A9.56 9.56 0 0112 6.844c.594 0 1.18.08 1.74.242 1.91-1.292 2.75-1.024 2.75-1.024.546 1.37.202 2.384.1 2.637.64.698 1.028 1.585 1.028 2.672 0 3.81-2.337 4.656-4.564 4.904.358.308.675.918.675 1.85V21c0 .254.18.56.678.47A9.995 9.995 0 0022 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<nav class="col-span-1 md:col-span-2 lg:col-span-1">
<h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Quick Links</h3>
<ul class="space-y-4">
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Dashboard Home</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Data Overview</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Analytics Reports</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">User Settings</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Support & Help</a></li>
</ul>
</nav>
<div class="col-span-1">
<h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Resources</h3>
<ul class="space-y-4">
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Documentation</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">API Reference</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Blog & Articles</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Privacy Policy</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Terms of Service</a></li>
</ul>
</div>
<div class="col-span-1">
<h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Contact Us</h3>
<address class="not-italic text-emerald-100 text-sm space-y-2">
<p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>123 Pixel Blvd, Data City, 90210</p>
<p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4v-4H5a2 2 0 01-2-2v-8z"></path></svg>[email protected]</p>
<p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.592-1.555a2 2 0 012.288-.04l2.583 1.55A1 1 0 0121 11.69a2 2 0 01-2 2h-.096l-3.328 1.997a2 2 0 01-.734 3.323l-3.328 1.997a2 2 0 00-2.264 0l-3.328-1.997a2 2 0 01-.734-3.323L3.096 13.69A2 2 0 013 11.69V5z"></path></svg>+1 (555) RETRO-88</p>
</address>
</div>
</div>
<div class="border-t border-emerald-500/50 dark:border-ruby-700/50 pt-8 mt-10 text-center text-emerald-200 dark:text-slate-400 text-sm">
<p>© 2023 RetroDash. All rights reserved. <span class="hidden sm:inline">Embrace the past, power your future.</span></p>
</div>
</footer>Componentes relacionados
Bauhaus_Retro_News_Footer
Componente de navegación de pie de página complejo y receptivo para sitios web de noticias/periodismo, con un diseño inspirado en la Bauhaus con formas geométricas y una paleta de colores retro/vintage, incluida la compatibilidad con el modo oscuro.
Componente de navegación de pie de página
Un componente de navegación de pie de página receptivo para paneles con soporte de temas oscuros, con microinteracciones en los desplazamientos de enlaces con colores triádicos y elementos complejos. Sin JavaScript, solo HTML con Tailwind CSS.
Componente de navegación de pie de página
Componente de navegación de pie de página para comercio electrónico con Material Design: un componente simple con soporte de modo responsivo y oscuro, con un esquema de color complementario.