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 en pied de page
Un composant de navigation de pied de page réactif et complexe de style Neumorphisme pour les sites Web d’entreprise utilisant un schéma de couleurs en niveaux de gris avec prise en charge du mode sombre. Pas de JavaScript.
Composant de navigation en pied de page
Composant de navigation en pied de page avec conception Neumorphism, palette de couleurs monochromatique, complexité complexe et objectif de médias sociaux. Conception réactive avec prise en charge du thème sombre.
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.