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.
HTML Code
<footer class="bg-gray-200 dark:bg-gray-800 py-8 px-4">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">About Us</h3>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et est in justo feugiat consectetur.</p>
</div>
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Services</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
</ul>
</div>
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Follow Us</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="mt-8 text-center text-gray-600 dark:text-gray-300">
© 2023 Your Company. All rights reserved.
</div>
<style>
.neumorphic-card {
background: #e0e0e0;
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .neumorphic-card {
background: #333333;
box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
}
</style>
</footer>Composants associés
Brutalist_Pastel_News_Footer
Il s’agit d’un composant complexe de navigation de pied de page de style brutaliste pour les sites d’actualités et de journalisme, avec des couleurs pastel, un contraste élevé et des mises en page inhabituelles. Il est entièrement réactif et prend en charge le mode sombre.
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
Un composant de navigation de pied de page simple conçu dans le style Glassmorphism avec une palette de couleurs monochromatique. Il est réactif, prend en charge le mode sombre et convient aux sites Web de commerce électronique.