Plan du site - Finance Banque
Un composant de sitemap simple et réactif pour les interfaces finance/banque, doté d’une interface utilisateur en mode sombre avec des tons sépia/bruns. Optimisé pour les ordinateurs de bureau, les tablettes et les mobiles, avec une prise en charge complète du mode sombre.
HTML Code
<footer class="bg-stone-800 text-stone-300 py-8 px-4 dark:bg-stone-900 dark:text-stone-400 font-sans">
<div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-y-8 gap-x-4">
<!-- Column 1: Company -->
<div>
<h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Company</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">About Us</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Careers</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Press</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Blog</a></li>
</ul>
</div>
<!-- Column 2: Products -->
<div>
<h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Products</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Checking Accounts</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Savings Accounts</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Credit Cards</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Loans</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Investments</a></li>
</ul>
</div>
<!-- Column 3: Support -->
<div>
<h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Support</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Help Center</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Contact Us</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">FAQs</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Security</a></li>
</ul>
</div>
<!-- Column 4: Legal & Compliance -->
<div>
<h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Legal</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Privacy Policy</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Terms of Service</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Disclosures</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Cookie Policy</a></li>
</ul>
</div>
<!-- Column 5: Social Media (Optional, hidden on smaller screens for simplicity) -->
<div class="col-span-full md:col-span-2 lg:col-span-1 lg:block hidden">
<h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Follow Us</h3>
<div class="flex space-x-4">
<a href="#" aria-label="Facebook" class="text-stone-400 hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-label="Twitter" class="text-stone-400 hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c1.378 0 2.518-.616 3.125-1.579L13.882 17.5c-1.391-.456-2.617-.92-3.83-1.428-.847-1.341-1.347-2.73-1.556-4.148C7.575 8.785 8.775 7.5 10.22 7.5h.398c.957-2.355 2.378-4.328 4.28-5.719C16.892 1.346 18.5 0 20.25 0h.008l-2.023 2.148c-1.353.947-2.457 2.05-3.35 3.322C13.864 7.28 13.5 8.946 13.5 10.5c0 1.258.291 2.451.8 3.5-.06.012-.12.02-.18.026-.826.082-1.68-.006-2.495-.262-1.996.657-3.921 1.29-5.77 1.905-.62.208-1.284.407-1.92.595-1.503.447-3.08.384-4.57.172v.008C3.12 17.652 2 19.336 2 20.25c0 1.05.908 1.758 2.022 1.758h14.075c1.07 0 1.953-.615 1.953-1.758 0-.486-.334-.94-.852-1.32-.239-.17-.506-.318-.792-.47-.468-.242-.988-.45-1.543-.635-1.97-.65-3.92-1.28-5.83-1.89-1.25-.4-2.49-.8-3.706-1.18-.86-.27-1.69-.53-2.49-.8z" />
</svg>
</a>
<a href="#" aria-label="LinkedIn" class="text-stone-400 hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
<div class="mt-8 pt-6 border-t border-stone-700 dark:border-stone-700 text-center text-sm text-stone-400 dark:text-stone-500">
© 2023 YourBank. All rights reserved.
</div>
</footer>Composants associés
Composant de plan du site
Un composant de sitemap réactif avec une esthétique Material Design, une palette de couleurs pastel et la prise en charge du mode sombre, adapté aux plateformes de rencontres/sociales.
Composant de plan du site
Un composant de plan de site réactif conçu pour le mode sombre utilisant des couleurs pastel, adapté aux tableaux de bord.
Composant de plan du site
Un composant complexe de plan de site mettant en œuvre un style de conception skeuomorphism avec des couleurs de terre, prenant en charge un thème sombre. Conçu à des fins de blog/contenu avec des éléments interactifs, à l’aide de Tailwind CSS.