Composant de pied de page skeuomorphe
Composant de pied de page réactif avec un design skeuomorphe, une palette de couleurs analogue (verts, bleus-verts) et une complexité modérée adaptée aux sites Web d’entreprise. Comprend des liens, un espace réservé pour le logo et un effet Skeuomorphic subtil obtenu avec des ombres et des dégradés. Prend en charge les modes clair et sombre.
HTML Code
<footer class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 py-12">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-between items-center">
<div class="w-full md:w-1/4 mb-6 md:mb-0">
<!-- Logo Placeholder with Skeuomorphic effect -->
<div class="w-24 h-24 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark flex items-center justify-center">
<svg class="w-12 h-12 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21v-2a4 4 0 00-4-4H9a4 4 0 00-4 4v2m16 0h-3.586a1 1 0 01-.707-.293l-.031-.032A1.5 1.5 0 0015 18a1.5 1.5 0 00-2.121-1.06l-.032-.032A1 1 0 0112.586 17H9.414a1 1 0 01-.707.293l-.031.032A1.5 1.5 0 006 18a1.5 1.5 0 00-2.121-1.06l-.032-.032A1 1 0 013.586 19H1"></path></svg>
</div>
</div>
<div class="w-full md:w-1/4 mb-6 md:mb-0">
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Home</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">About Us</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Services</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Contact</a></li>
</ul>
</div>
<div class="w-full md:w-1/4 mb-6 md:mb-0">
<h4 class="text-lg font-semibold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Blog</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Support</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Privacy Policy</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Terms of Service</a></li>
</ul>
</div>
<div class="w-full md:w-1/4">
<h4 class="text-lg font-semibold mb-4">Contact Us</h4>
<p class="mb-2">123 Business Lane, Corporate City</p>
<p class="mb-2">Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
</div>
</div>
<hr class="my-8 border-gray-400 dark:border-gray-600">
<div class="text-center text-sm">
© 2023 Your Business. All rights reserved.
</div>
</div>
</footer>Composants associés
Composant de pied de page
Un composant de pied de page conçu dans un style skeuomorphe avec une palette de couleurs triadique et une complexité modérée, adapté à une mise en page Blog/Contenu.
Composant de pied de page de médias sociaux
Un composant de pied de page réactif pour les interfaces de réseaux sociaux, conçu selon les principes de Material Design à l’aide d’un schéma de couleurs bleu monochrome. Il propose des mises en page basées sur une grille, des effets de profondeur (ombres), des animations de survol et de transition pour les éléments interactifs, un formulaire d’inscription à la newsletter, des icônes sociales, des avatars d’utilisateurs et la prise en charge du mode sombre via le modificateur dark : de Tailwind.
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.