Composants Navigation dans le pied de page Brutalist_Pastel_News_Footer

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.

Aperçu

HTML Code

<footer class="bg-pink-100 text-purple-900 dark:bg-purple-900 dark:text-pink-100 font-mono border-t-8 border-r-8 border-b-8 border-l-8 border-purple-900 dark:border-pink-100 shadow-[10px_10px_0px_0px_rgba(109,40,217,0.7)] dark:shadow-[10px_10px_0px_0px_rgba(252,211,255,0.7)] transition-all duration-300">
  <div class="container mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12 lg:gap-16">
    
    <!-- Section 1: Logo and Tagline -->
    <div class="col-span-1 md:col-span-2 lg:col-span-1 flex flex-col items-start">
      <a href="#" class="text-4xl lg:text-5xl font-black tracking-tighter hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 uppercase transform -rotate-3 mb-4">
        The Squawk
      </a>
      <p class="text-sm lg:text-base font-bold leading-tight uppercase border-l-4 border-b-4 border-purple-900 dark:border-pink-100 pl-2 pb-1 bg-pink-200 dark:bg-purple-800 inline-block rotate-1">
        Unfiltered. Uncensored. Unequivocal.
      </p>
    </div>

    <!-- Section 2: Quick Links -->
    <div class="relative col-span-1 border-2 border-dashed border-purple-900 dark:border-pink-100 p-6 -rotate-1 hover:rotate-0 transform transition-transform duration-300">
      <h3 class="text-xl lg:text-2xl font-extrabold uppercase mb-4 tracking-tighter absolute -top-4 -left-4 bg-purple-900 text-pink-100 dark:bg-pink-100 dark:text-purple-900 px-3 py-1 border-r-4 border-b-4 border-pink-100 dark:border-purple-900">
        Explore
      </h3>
      <nav class="mt-6">
        <ul class="space-y-3">
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> Breaking News</a></li>
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> Investigations</a></li>
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> Opinion Pieces</a></li>
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> World Affairs</a></li>
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> Local Report</a></li>
        </ul>
      </nav>
    </div>

    <!-- Section 3: Categories & Archives -->
    <div class="relative col-span-1 bg-purple-200 dark:bg-purple-700 p-6 transform rotate-2 hover:rotate-0 transition-transform duration-300 border-l-4 border-t-4 border-purple-900 dark:border-pink-100">
      <h3 class="text-xl lg:text-2xl font-extrabold uppercase mb-4 tracking-tighter absolute -bottom-4 -right-4 bg-purple-900 text-pink-100 dark:bg-pink-100 dark:text-purple-900 px-3 py-1 border-l-4 border-t-4 border-pink-100 dark:border-purple-900">
        Archives
      </h3>
      <nav class="grid grid-cols-2 gap-4 text-sm lg:text-base font-semibold uppercase">
        <ul class="space-y-2">
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Politics</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Economy</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Science</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Culture</a></li>
        </ul>
        <ul class="space-y-2">
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Sports</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Health</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Technology</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Environment</a></li>
        </ul>
      </nav>
    </div>

    <!-- Section 4: Contact & Social -->
    <div class="col-span-1 flex flex-col items-center md:items-end lg:items-start p-4 border-4 border-double border-purple-900 dark:border-pink-100 transform -rotate-2 hover:rotate-0 transition-transform duration-300">
      <h3 class="text-xl lg:text-2xl font-extrabold uppercase mb-4 text-center tracking-tighter bg-purple-900 leading-none p-2 text-pink-100 dark:bg-pink-100 dark:text-purple-900 border-b-4 border-r-4 border-pink-100 dark:border-purple-900">
        Get In Touch
      </h3>
      <address class="not-italic text-sm lg:text-base text-center md:text-right lg:text-left leading-relaxed mb-4">
        123 News Alley, Metropolis, NY 10001<br>
        <a href="mailto:[email protected]" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">[email protected]</a><br>
        <a href="tel:+15551234567" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">+1 (555) 123-4567</a>
      </address>
      <div class="flex space-x-4 mb-4">
        <a href="#" class="text-2xl hover:scale-125 transition-transform duration-200 transform rotate-6 hover:rotate-0"><span aria-label="Facebook">&#x1F4F0;</span></a>
        <a href="#" class="text-2xl hover:scale-125 transition-transform duration-200 transform -rotate-6 hover:rotate-0"><span aria-label="Twitter">&#x1F426;</span></a>
        <a href="#" class="text-2xl hover:scale-125 transition-transform duration-200 transform rotate-3 hover:rotate-0"><span aria-label="Instagram">&#x1F4F7;</span></a>
      </div>
      <img src="https://picsum.photos/id/1005/100/100" alt="Placeholder image" class="w-16 h-16 object-cover border-4 border-purple-900 dark:border-pink-100 rounded-lg transform -rotate-6 blur-[1px] hover:blur-none transition-all duration-300">
    </div>

  </div>

  <!-- Bottom Bar: Copyright & Impressum -->
  <div class="bg-purple-900 text-pink-100 dark:bg-pink-100 dark:text-purple-900 py-4 px-4 text-center text-xs font-bold uppercase tracking-wide border-t-8 border-purple-900 dark:border-pink-100 relative overflow-hidden">
    <p class="z-10 relative opacity-90">© 2023 THE SQUAWK. ALL RIGHTS RESERVED. <span class="hidden md:inline">A FREE PRESS INITIATIVE.</span></p>
    <a href="#" class="text-pink-300 dark:text-purple-700 hover:underline z-10 relative block md:inline-block md:ml-4 mt-1 md:mt-0">PRIVACY POLICY</a>
    <a href="#" class="text-pink-300 dark:text-purple-700 hover:underline z-10 relative block md:inline-block md:ml-4 mt-1 md:mt-0">TERMS OF SERVICE</a>
    <div class="absolute inset-0 bg-yellow-300 dark:bg-blue-300 opacity-20 transform -skew-x-12 scale-150 rotate-3 animate-pulse-slow pointer-events-none"></div>
  </div>
</footer>

<!-- Tailwind CSS extended configuration for custom animations (add to tailwind.config.js) -->
<style>
@keyframes bounce-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); /* Smaller bounce for subtle effect */}
}
.animate-bounce-y {
  animation: bounce-y 0.6s infinite alternate ease-in-out;
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.2; transform: -skew-x-12 scale-150 rotate(3); }
  50% { opacity: 0.4; transform: -skew-x-12 scale-155 rotate(5); }
}
.animate-pulse-slow {
  animation: pulse-slow 8s infinite ease-in-out;
}
</style>

Composants associés

3D_Music_Footer_Navigation

Un composant complexe de navigation de pied de page inspiré de la 3D pour les plates-formes musicales/audio, avec des neutres chauds et une réactivité totale avec la prise en charge du mode sombre.

Ouvrir

Retro_Earth_Tone_Portfolio_Footer

Un composant de navigation de pied de page réactif à thème rétro pour un site Web de portfolio, avec la prise en charge des tons de terre et du mode sombre. Conçu avec l’esthétique des années 80/90 à l’esprit, offrant une sensation nostalgique.

Ouvrir

Composant de navigation en pied de page 38

Un composant de navigation de pied de page réactif conçu avec un style skeuomorphique pour imiter les éléments du monde réel, avec la prise en charge du thème sombre et l’utilisation de Tailwind CSS. Ce composant comprend des liens, des images d’espace réservé et des avatars.

Ouvrir