Retro_Earth_Tone_Portfolio_Footer
Un componente de navegación de pie de página receptivo y de temática retro para un sitio web de portafolio, con tonos tierra y compatibilidad con el modo oscuro. Diseñado pensando en la estética de los años 80/90, ofreciendo una sensación nostálgica.
Código HTML
<footer class="bg-amber-100 dark:bg-gray-900 text-amber-900 dark:text-gray-100 py-8 md:py-12 font-mono border-t-4 border-amber-900 dark:border-gray-700">
<div class="container mx-auto px-4 md:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
<div class="flex flex-col items-center md:items-start text-center md:text-left">
<a href="#" class="text-2xl font-bold uppercase tracking-wider mb-4 hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">
[Your Portfolio]
</a>
<p class="text-sm mb-4 max-w-xs">Crafting digital experiences since the '90s. Pixel-perfect code. Analog soul.</p>
<div class="flex space-x-4">
<a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 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.797c0-2.506 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.33V22c5.373-.623 9.573-4.721 9.573-9.879Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Facebook</span>
</a>
<a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 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.315 2c2.43 0 2.784.002 3.797.048.843.04 1.15.148 1.465.247a4.872 4.872 0 0 1 3.427 3.427c.099.315.207.622.247 1.465.047 1.013.049 1.371.049 3.797 0 2.43-.002 2.784-.048 3.797-.04.843-.148 1.15-.247 1.465a4.872 4.872 0 0 1-3.427 3.427c-.315.099-.622.207-1.465.247-1.013.047-1.371.049-3.797.049s-2.784-.002-3.797-.048c-.843-.04-1.15-.148-1.465-.247a4.872 4.872 0 0 1-3.427-3.427c-.099-.315-.207-.622-.247-1.465-.047-1.013-.049-1.371-.049-3.797s.002-2.784.048-3.797c.04-.843.148-1.15.247-1.465a4.872 4.872 0 0 1 3.427-3.427c.315-.099.622-.207 1.465-.247C9.567 2.002 9.92 2 12.315 2Zm0 0S5.474 2 5.031 2.008c-.844.04-1.282.174-1.637.387a3.36 3.36 0 0 0-1.921 1.921c-.213.355-.347.793-.387 1.637C2.002 6.969 2 7.413 2 12.001c0 4.588.002 5.031.008 5.875.04.844.174 1.282.387 1.637a3.36 3.36 0 0 0 1.921 1.921c.355.213.793.347 1.637.387C6.969 22.002 7.413 22 12.001 22c4.588 0 5.031-.002 5.875-.008.844-.04 1.282-.174 1.637-.387a3.36 3.36 0 0 0 1.921-1.921c.213-.355.347-.793.387-1.637.006-.844.008-1.282.008-5.875s-.002-5.031-.008-5.875c-.04-.844-.174-1.282-.387-1.637a3.36 3.36 0 0 0-1.921-1.921c-.355-.213-.793-.347-1.637-.387C17.031 2.002 16.588 2 12.001 2Zm0 5.875a6.126 6.126 0 1 0 0 12.252 6.126 6.126 0 0 0 0-12.252ZM12.001 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.848a1.69 1.69 0 1 0 0 3.38 1.69 1.69 0 0 0 0-3.38Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Instagram</span>
</a>
<a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 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.35c-4.69 0-8.5-3.81-8.5-8.5s3.81-8.5 8.5-8.5c2.3 0 4.41.92 5.89 2.45l-1.8 1.8c-1.07-.95-2.52-1.55-4.09-1.55-3.32 0-6 2.68-6 6s2.68 6 6 6c3.04 0 5.6-2.26 5.89-5.3h-5.89V10h9.5c.13.62.2 1.25.2 1.9 0 5.24-4.24 9.5-9.5 9.5Z"/>
<path d="M23 12h-9c0 5.24 4.24 9.5 9.5 9.5h-.5c-4.41 0-7.97-3.56-7.97-7.97 0-.65.07-1.28.2-1.9H23v2.85z"/>
</svg>
<span class="sr-only">Google</span>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Quick Links</h3>
<nav class="flex flex-col space-y-2">
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Home</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">About</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Portfolio</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Services</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Contact</a>
</nav>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Categories</h3>
<nav class="flex flex-col space-y-2">
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Web Design</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Branding</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">UI/UX</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Development</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Illustration</a>
</nav>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Get in Touch</h3>
<address class="not-italic text-sm space-y-2">
<p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-300" 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.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8.001 8.001 0 0120 12c0 2.21-1.206 4.16-3.097 5.29-1.425.864-3.153 1.34-5.028 1.34-3.957 0-7.25-3.047-7.25-6.81 C4.625 9.09 5.86 6.88 7.625 5.56L17.657 16.727zM6.343 7.273 C5.83 6.94 5.376 6.541 4.98 6.095m0 0a8.001 8.001 0 01-2.316 2.502L6.343 7.273z"></path></svg>123 Pixel Drive, Retroville, RV 90210</p>
<p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-300" 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.106 9.2A1 1 0 0011.233 10c1.354-.42 2.766-.671 4.29-1.284A1 1 0 0016 8.35v-1.7a2 2 0 012-2h3a2 2 0 012-2v16a2 2 0 01-2 2h-3a2 2 0 01-2-2v-1.7a1 1 0 00-.777-.962c-1.524-.613-2.936-.864-4.29-1.284a1 1 0 00-1.127.784l-.872 3.518A1 1 0 018.28 21H5a2 2 0 01-2-2V5z"></path></svg><a href="tel:+1234567890" class="hover:underline">+1 (234) 567-890</a></p>
<p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-300" 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 8l7.983 5.485c.346.238.749.362 1.167.362.418 0 .82-.124 1.167-.362L21 8M6.25 10a.75.75 0 100 1.5.75.75 0 000-1.5zM12 12c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zM21 8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2V8z"></path></svg><a href="mailto:[email protected]" class="hover:underline">[email protected]</a></p>
</address>
</div>
</div>
<div class="mt-10 pt-6 border-t-2 border-amber-800 dark:border-gray-700 text-center text-sm">
<p>© <span id="current-year"></span> [Your Portfolio]. All rights reserved. <span class="hidden md:inline">Designed with '80s passion.</span></p>
</div>
</div>
</footer>
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>Componentes relacionados
Componente de navegación de pie de página
Un componente de navegación de pie de página simple diseñado en estilo Glassmorphism con un esquema de color monocromático. Es responsivo, admite el modo oscuro y es adecuado para sitios web de comercio electrónico.
Skeuomorphic_Grayscale_Business_Footer
Un componente de navegación de pie de página en escala de grises esqueumórfico y receptivo para sitios web comerciales/corporativos, compatible con el modo oscuro.
Componente de navegación de pie de página
Un componente de navegación de pie de página simple diseñado con los principios de Material Design y un esquema de color análogo para sitios web comerciales/corporativos. Es compatible con el modo oscuro y responde.