Composant de pied de page financier
Un composant de pied de page réactif pour les interfaces financières et bancaires, doté d’une palette de couleurs complémentaires, de principes de conception matérielle et d’une prise en charge complète du mode sombre. Comprend des liens de navigation, des icônes de médias sociaux et un avis de droit d’auteur.
HTML Code
<footer class="bg-blue-900 text-blue-100 py-8 dark:bg-gray-950 dark:text-gray-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 border-b border-blue-700 pb-8 dark:border-gray-800">
<div class="col-span-full lg:col-span-1">
<h3 class="text-2xl font-bold text-orange-400 mb-4 dark:text-orange-500">FinTechBank</h3>
<p class="text-sm text-blue-200 dark:text-gray-400 leading-relaxed">Innovating your financial future with secure and intelligent banking solutions.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Company</h4>
<ul class="space-y-3">
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">About Us</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Careers</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Press & Media</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Partner Program</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Products</h4>
<ul class="space-y-3">
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Personal Banking</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Business Accounts</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Lending Solutions</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Investment Services</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Support</h4>
<ul class="space-y-3">
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Help Center</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Contact Us</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">FAQs</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Security</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Legal</h4>
<ul class="space-y-3">
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Privacy Policy</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Terms of Service</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Cookie Policy</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Disclosures</a></li>
</ul>
</div>
</div>
<div class="flex flex-col sm:flex-row items-center justify-between pt-6 text-sm">
<p class="mb-4 sm:mb-0 text-blue-300 dark:text-gray-500 text-center sm:text-left">© 2023 FinTechBank. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" aria-label="Facebook" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12c0 5.016 3.655 9.182 8.375 9.94v-7.042H7.078v-2.9h1.921V9.58c0-1.906 1.164-2.955 2.868-2.955 1.096 0 2.036.196 2.308.283v2.55h-1.55c-.752 0-.901.358-.901.884v1.168h2.89l-.47 2.9h-2.42V22c5.016-.818 8.875-5.024 8.875-9.94 0-5.523-4.477-10-10-10z"/></svg>
</a>
<a href="#" aria-label="Twitter" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.37-.8.47-1.68.8-2.6.98C17.26 4.24 16.21 4 15.15 4c-2.36 0-4.29 1.93-4.29 4.29 0 .34.04.67.11.98C7.54 9.17 4.14 7.37 1.81 4.5c-.37.64-.58 1.39-.58 2.19 0 1.49.75 2.81 1.89 3.59-.7-.02-1.37-.21-1.95-.5v.06c0 2.09 1.48 3.82 3.44 4.21-.36.1-.73.15-1.11.15-.27 0-.53-.02-.79-.08.55 1.71 2.13 2.96 4.01 2.99-1.47 1.15-3.33 1.84-5.36 1.84-.35 0-.69-.02-1.03-.06 1.9 1.22 4.16 1.93 6.6 1.93 7.92 0 12.26-6.55 12.26-12.26 0-.19-.01-.39-.01-.58.84-.6 1.56-1.36 2.14-2.22z"/></svg>
</a>
<a href="#" aria-label="LinkedIn" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.273V9.09h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.073a2.464 2.464 0 0 1-2.464-2.464c0-1.363 1.09-2.464 2.464-2.464 1.373 0 2.464 1.1 2.464 2.464 0 1.363-1.091 2.464-2.464 2.464zm1.785 13.38H3.551V9.09h3.571v11.363zM12 2C6.478 2 2 6.478 2 12s4.478 10 10 10 10-4.478 10-10S17.522 2 12 2z"/></svg>
</a>
<a href="#" aria-label="Instagram" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.204-.012 3.584-.07 4.85-1.325 3.252-1.691 4.77-4.919 4.919-1.266.058-1.644.069-4.85.069s-3.583-.012-4.85-.07c-3.251-.149-4.77-1.691-4.919-4.919-.058-1.265-.069-1.644-.069-4.85 0-3.204.012-3.584.07-4.85 1.326-3.252 1.69-4.771 4.919-4.919 1.265-.058 1.644-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072C2.79 0 2.039.264 1.22 1.083s-.82 1.57-.902 2.836c-.059 1.28-.073 1.688-.073 4.948 0 3.26.014 3.668.072 4.948.082 1.266.347 2.017 1.166 2.836S2.79 23.992 4.056 24c1.28.058 1.688.072 4.948.072s3.668-.014 4.948-.072c1.265-.082 2.017-.347 2.836-1.166s.82-1.57.902-2.836c.058-1.28.072-1.688.072-4.948s-.014-3.667-.072-4.947c-.082-1.266-.347-2.017-1.166-2.836S21.21 0 19.944 0c-1.28-.058-1.687-.072-4.947-.072H12zm0 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 10a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.5-11.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/></svg>
</a>
</div>
</div>
</div>
</footer>Composants associés
Industrial_Charity_Footer
Un composant de pied de page complexe et réactif pour les sites Web à but non lucratif/caritatifs, présentant une esthétique industrielle et brute avec une palette de couleurs rétro/vintage. Comprend la navigation, les coordonnées, les liens sociaux et l’inscription à la newsletter, avec une prise en charge complète du mode sombre.
Composant de pied de page - Swiss Pastel Consulting
Un composant de pied de page propre, minimaliste et réactif avec une influence du design suisse, avec des couleurs pastel et une typographie claire, adapté aux sites Web de conseil/services. Inclut la prise en charge du mode sombre.
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.