Portfolio-Minimaliste-Triadique-Complexe-Footer
Un pied de page complexe de style minimaliste pour un site Web de portfolio, utilisant une palette de couleurs triadique. Comprend des liens de navigation, des icônes de médias sociaux, des droits d’auteur et un appel à l’action pour le contact, avec une réactivité totale et une prise en charge du mode sombre.
HTML Code
<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>Composants associés
Pied de page minimaliste des médias sociaux
Un composant de pied de page minimaliste avec des couleurs de tons de terre pour les interfaces de médias sociaux. Réactif avec prise en charge du thème sombre.
Glassmorphism_Footer_Component
Un composant de pied de page réactif, de style glassmorphism, conçu pour les systèmes de réservation, avec une palette de couleurs complémentaire, des éléments interactifs et une prise en charge complète du mode sombre.
Composant de pied de page
Un composant de pied de page de style Brutalism avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.