Composant de navigation de pied de page de conception 3D
Un composant de navigation de pied de page de style 3D avec un design réactif et une prise en charge du mode sombre.
HTML Code
<footer class="bg-gray-100 dark:bg-gray-900 relative">
<div class="relative max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="relative z-10 grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="transform transition duration-500 hover:scale-105">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>
<ul role="list" class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Marketing</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Analytics</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Commerce</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Insights</a></li>
</ul>
</div>
<div class="transform transition duration-500 hover:scale-105">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
<ul role="list" class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Pricing</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Documentation</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Guides</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">API Status</a></li>
</ul>
</div>
<div class="transform transition duration-500 hover:scale-105">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
<ul role="list" class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">About</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Blog</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Jobs</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Press</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Partners</a></li>
</ul>
</div>
<div class="transform transition duration-500 hover:scale-105">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
<ul role="list" class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Claim</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Privacy</a></li>
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Terms</a></li>
</ul>
</div>
</div>
<div class="mt-8 border-t border-gray-300 dark:border-gray-700 pt-8 md:flex md:items-center md:justify-between">
<p class="text-base text-gray-500 dark:text-gray-400">© 2023 Your Company, Inc. All rights reserved.</p>
</div>
</div>
<div class="absolute top-0 left-0 w-full h-full overflow-hidden">
<div class="absolute bottom-0 right-0 transform translate-x-1/2 translate-y-1/2 w-64 h-64 rounded-full bg-blue-500 dark:bg-blue-700 opacity-20 blur-3xl"></div>
<div class="absolute top-0 left-0 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full bg-purple-500 dark:bg-purple-700 opacity-20 blur-3xl"></div>
</div>
</footer>
Composants associés
Composant de navigation artistique de pied de page à l’aquarelle
Il s’agit d’un composant de navigation de pied de page complexe et réactif conçu pour les sites Web à but non lucratif/caritatifs, avec un style artistique aquarelle avec des tons doux et sépia/brun et la prise en charge du mode sombre. Comprend plusieurs liens de navigation, des icônes de médias sociaux et une section sur les droits d’auteur.
Composant de navigation en pied de page
Composant de navigation de pied de page pour le commerce électronique avec Material Design - un composant simple avec prise en charge du mode réactif et sombre, avec une palette de couleurs complémentaire.
Rétro/Vintage E-commerce Footer
Composant de navigation de pied de page rétro / vintage avec des tons de terre, une mise en page simple, un design réactif et la prise en charge du thème sombre, pour le commerce électronique.