Portafolio-Minimalista-Triádico-Complejo-Pie de página
Un pie de página complejo y de estilo minimalista para un sitio web de portafolio, que utiliza un esquema de color triádico. Incluye enlaces de navegación, iconos de redes sociales, derechos de autor y una llamada a la acción para el contacto, con capacidad de respuesta total y compatibilidad con el modo oscuro.
Código HTML
<footer class="bg-blue-50 dark:bg-gray-950 text-gray-800 dark:text-gray-100 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-8">
<div class="col-span-full lg:col-span-1 flex flex-col items-center md:items-start mb-6 md:mb-0">
<a href="#" class="text-2xl font-bold tracking-tight text-orange-600 dark:text-teal-400 mb-4">
Your Portfolio
</a>
<p class="text-center md:text-left text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
Showcasing creative work and innovative solutions.
</p>
</div>
<div class="col-span-full md:col-span-1 lg:col-span-1">
<h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4 text-center md:text-left">Quick Links</h3>
<ul class="space-y-3 text-center md:text-left">
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Home</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Projects</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Services</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">About Me</a></li>
</ul>
</div>
<div class="col-span-full md:col-span-1 lg:col-span-1">
<h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4 text-center md:text-left">Resources</h3>
<ul class="space-y-3 text-center md:text-left">
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Blog</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Case Studies</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Client Testimonials</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">FAQs</a></li>
</ul>
</div>
<div class="col-span-full md:col-span-1 lg:col-span-1">
<h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4 text-center md:text-left">Get in touch</h3>
<div class="text-center md:text-left space-y-3">
<p class="text-gray-700 dark:text-gray-300">123 Creative Studio, City, Country</p>
<p class="text-gray-700 dark:text-gray-300">[email protected]</p>
<p class="text-gray-700 dark:text-gray-300">+1 (555) 123-4567</p>
</div>
</div>
<div class="col-span-full md:col-span-4 lg:col-span-1 flex flex-col items-center lg:items-end justify-between">
<h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4">Socials</h3>
<div class="flex space-x-6 mb-8 lg:mb-0">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
<svg class="h-6 w-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.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.361 21.088 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Facebook</span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
<svg class="h-6 w-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.85.04 1.488.165 1.802.272.937.333 1.404 1.093 1.487 2.305.047.508.09 1.109.09 3.003v.404c0 2.441-.001 2.784-.048 3.797-.04.85-.165 1.487-.272 1.802-.333.937-1.093 1.404-2.305 1.488-.508.047-1.109.09-3.003.09h-.404c-2.441 0-2.784-.001-3.797-.048-.85-.04-1.487-.165-1.802-.272-.937-.333-1.404-1.093-1.488-2.305-.047-.508-.09-1.109-.09-3.003v-.404c0-2.43.001-2.784.048-3.797.04-.85.165-1.488.272-1.802.333-.937 1.093-1.404 2.305-1.488.508-.047 1.109-.09 3.003-.09h.404ZM12 2.163c-3.178 0-3.578.013-4.858.077-.975.051-1.666.241-2.185.421-.504.179-.902.439-1.302.839-.399.4-.659.798-.839 1.302-.18.519-.37 1.21-.421 2.185-.064 1.28-.076 1.679-.076 4.858 0 3.178.013 3.577.076 4.858.051.975.241 1.667.421 2.186.179.504.439.902.839 1.302.4.399.798.659 1.302.839.519.18 1.21.37 2.185.421 1.28.064 1.679.076 4.858.076 3.178 0 3.577-.013 4.858-.076.975-.051 1.668-.241 2.186-.421.504-.179.902-.439 1.302-.839.399-.4.659-.798.839-1.302.18-.519.37-1.21.421-2.186.064-1.28.076-1.678.076-4.858 0-3.178-.013-3.578-.076-4.858-.051-.975-.241-1.666-.421-2.185-.179-.504-.439-.902-.839-1.302-.4-.399-.798-.659-1.302-.839-.519-.18-1.21-.37-2.186-.421C15.577 2.176 15.178 2.163 12 2.163Zm0 3.024c3.484 0 6.31 2.825 6.31 6.31 0 3.484-2.826 6.31-6.31 6.31-3.484 0-6.31-2.826-6.31-6.31 0-3.485 2.826-6.31 6.31-6.31Zm0 1.938c-2.486 0-4.5 2.014-4.5 4.5 0 2.485 2.014 4.5 4.5 4.5 2.485 0 4.5-2.015 4.5-4.5 0-2.486-2.015-4.5-4.5-4.5Zm6.55-.992a1.08 1.08 0 1 0 0 2.16 1.08 1.08 0 0 0 0-2.16Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Instagram</span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c-.034.004-.067.006-.101.006C7.062 20.251 2 15.188 2 8.79C2 4.717 5.5.94 10.366 2.083c3.085.736 5.8 3.513 6.942 6.784L21.2 21.4c-.032.096-.064.192-.096.288L22 22.428V20h-4c-2.209 0-4-1.791-4-4V6h4V4H6v2H2c0 2.209 1.791 4 4 4h4v4h4v4h4Z" />
</svg>
<span class="sr-only">LinkedIn</span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.475 2 2 6.475 2 12c0 4.296 2.65 7.914 6.36 9.387.52.09.712-.224.712-.49v-1.72c-2.434.529-2.956-1.173-2.956-1.173-.424-1.077-1.034-1.36-1.034-1.36-.84-.576.064-.565.064-.565.93.065 1.417.95 1.417.95.824 1.41 2.156 1.004 2.684.767.085-.597.322-1.004.587-1.233-2.052-.232-4.212-1.026-4.212-4.577 0-1.008.358-1.83.945-2.472-.095-.232-.41-1.174.09-2.447 0 0 .77-.247 2.52.945.73-.204 1.5-.31 2.29-.31.79 0 1.56.106 2.29.31 1.75-1.192 2.52-.945 2.52-.945.5 1.273.187 2.215.093 2.447.587.642.945 1.464.945 2.472 0 3.56-2.164 4.343-4.223 4.57.34.293.645.867.645 1.758v2.59c0 .267.19.58.716.49C19.35 19.914 22 16.296 22 12c0-5.525-4.475-10-10-10Z" />
</svg>
<span class="sr-only">GitHub</span>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 mt-12 pt-8 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">© 2023 Your Portfolio. All rights reserved.</p>
</div>
</footer>Componentes relacionados
Componente de pie de página
Un componente de pie de página simple y receptivo con elementos de diseño 3D y tonos tierra, diseñado para un blog o sitio de contenido con soporte para temas oscuros.
Pie de página de blog retro
Un componente de pie de página retro/vintage para un blog con una combinación de colores monocromática, un diseño sencillo, un diseño responsivo y compatibilidad con temas oscuros.
Organic_Nature_Inspired_Real_Estate_Footer
Un componente de pie de página complejo, inspirado en la naturaleza y de colores complementarios para plataformas inmobiliarias, con líneas fluidas, formas naturales, múltiples elementos interactivos y capacidad de respuesta total con soporte para modo oscuro.