disposition du méga pied de page

Il s’agit d’une mise en page de méga pied de page contenant une grande quantité d’informations, souvent utilisée sur les sites d’entreprise et les médias à grande échelle.

Aperçu

Code d’implémentation (Implémentation)

<footer class="bg-white dark:bg-zinc-900 border-t border-gray-200 dark:border-zinc-800 pt-12 pb-8 w-full">
<div class="max-w-6xl mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
  <div class="md:col-span-1">
    <h2 class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 mb-4">Brand.</h2>
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Making the world a better place through constructing elegant hierarchies.</p>
  </div>
  <div>
    <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">Company</h3>
    <ul class="space-y-2 text-sm text-gray-500 dark:text-gray-400">
      <li><a href="#" class="hover:text-indigo-600">About Us</a></li>
      <li><a href="#" class="hover:text-indigo-600">Careers</a></li>
      <li><a href="#" class="hover:text-indigo-600">Blog</a></li>
      <li><a href="#" class="hover:text-indigo-600">Contact</a></li>
    </ul>
  </div>
  <div>
    <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">Legal</h3>
    <ul class="space-y-2 text-sm text-gray-500 dark:text-gray-400">
      <li><a href="#" class="hover:text-indigo-600">Privacy Policy</a></li>
      <li><a href="#" class="hover:text-indigo-600">Terms of Service</a></li>
      <li><a href="#" class="hover:text-indigo-600">Cookie Policy</a></li>
    </ul>
  </div>
  <div>
    <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">Subscribe</h3>
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Get the latest news and updates.</p>
    <div class="flex">
      <input type="email" class="w-full px-3 py-2 border rounded-l-md dark:bg-zinc-800 dark:border-zinc-700" placeholder="Enter email" />
      <button class="px-4 py-2 bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700">Subscribe</button>
    </div>
  </div>
</div>
<div class="max-w-6xl mx-auto px-4 border-t border-gray-200 dark:border-zinc-800 pt-8 flex flex-col md:flex-row justify-between items-center">
  <p class="text-sm text-gray-500">&copy; 2026 Brand, Inc. All rights reserved.</p>
  <div class="flex space-x-4 mt-4 md:mt-0 text-gray-400">
    <a href="#" class="hover:text-gray-500">Twitter</a>
    <a href="#" class="hover:text-gray-500">GitHub</a>
  </div>
</div>
</footer>