Portfolio-Minimalista-Triadico-Complesso-Piè di pagina
Un piè di pagina complesso e in stile minimalista per un sito web di portfolio, che utilizza una combinazione di colori triadica. Include link di navigazione, icone dei social media, copyright e un invito all'azione per il contatto, con reattività completa e supporto per la modalità scura.
Codice 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>Componenti correlati
Piè di pagina minimalista per social media
Un componente minimalista del piè di pagina con una combinazione di colori dei toni della terra per le interfacce dei social media. Reattivo con supporto per il tema scuro.
Componente piè di pagina
Un componente Piè di pagina progettato in uno stile scheumorfico con una combinazione di colori triadica e complessità moderata, adatto per un layout Blog/Contenuto.
Componente piè di pagina
Un componente minimalista del piè di pagina con colori complementari, complessità moderata e integrazione con i social media. Presenta un design reattivo e il supporto per la modalità oscura.