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.
HTML Code
<footer class="bg-gray-200 dark:bg-gray-800 py-10 px-5 neumorphism-light dark:neumorphism-dark">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-10">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">About Us</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Careers</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Press</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Products</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Features</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Pricing</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Integrations</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Status</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Resources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Documentation</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Support</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Guides</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">API Reference</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">123 Corporate Ave, Suite 456<br>Business City, BC 78901</p>
<p class="text-gray-600 dark:text-gray-400 mb-2">Email: [email protected]</p>
<p class="text-gray-600 dark:text-gray-400">Phone: (123) 456-7890</p>
</div>
</div>
<div class="mt-10 border-t border-gray-300 dark:border-gray-700 pt-8 text-center text-gray-600 dark:text-gray-400">
<p>© 2023 Your Company. All rights reserved.</p>
</div>
</footer>
<style>
.neumorphism-light {
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.neumorphism-dark {
box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 1a1a1a;
}
</style>Composants associés
Composant de navigation en pied de page
Un composant de navigation en pied de page réactif avec un style de design rétro/vintage, utilisant des couleurs vives et adapté aux interfaces de médias sociaux.
Composant de navigation en pied de page
Un composant de navigation de pied de page réactif avec un style glassmorphism avec des éléments translucides givrés ressemblant à du verre et des effets de flou. Il prend en charge le mode sombre et inclut des images de repère d’emplacement.
Composant de navigation en pied de page
Un composant simple de navigation en pied de page conçu dans un style brutaliste avec une palette de couleurs triadique pour les interfaces de médias sociaux. Il comprend des liens et des images d’avatar, avec prise en charge du mode sombre.