Komponenten Fußzeile Memphis_Purple_Entertainment_Footer_Component

Memphis_Purple_Entertainment_Footer_Component

Eine einfache Fußzeilenkomponente für Unterhaltungs-/Medienplattformen im Memphis-Designstil mit kräftigen lila-violetten Farben, geometrischen Elementen und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Vorschau

HTML-Code

<footer class="bg-violet-200 dark:bg-violet-950 p-6 sm:p-8 md:p-10 text-violet-900 dark:text-violet-100 relative overflow-hidden font-sans">
  <!-- Memphis Style Geometric Shapes - Background -->
  <div class="absolute top-0 left-0 w-24 h-24 bg-violet-400 dark:bg-violet-700 transform -translate-x-1/2 -translate-y-1/2 rounded-full opacity-60 dark:opacity-40"></div>
  <div class="absolute bottom-0 right-0 w-32 h-32 bg-violet-500 dark:bg-violet-800 transform translate-x-1/3 translate-y-1/3 rotate-45 opacity-60 dark:opacity-40"></div>
  <div class="absolute top-1/4 right-1/4 w-16 h-16 bg-violet-300 dark:bg-violet-600 rounded-lg transform rotate-12 opacity-60 dark:opacity-40 hidden sm:block"></div>
  <div class="absolute bottom-1/4 left-1/4 w-20 h-20 bg-violet-400 dark:bg-violet-700 rounded-full transform -rotate-24 opacity-60 dark:opacity-40 hidden md:block"></div>

  <div class="container mx-auto flex flex-col items-center space-y-4 relative z-10">
    <div class="text-2xl sm:text-3xl font-extrabold tracking-tight text-violet-800 dark:text-violet-200">
      <span class="text-violet-600 dark:text-violet-400">Stream</span>Now
    </div>

    <nav class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-sm sm:text-base font-medium">
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">About Us</a>
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">Terms of Service</a>
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">Privacy Policy</a>
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">Contact</a>
    </nav>

    <div class="flex space-x-4">
      <a href="#" aria-label="Facebook" class="text-violet-700 dark:text-violet-300 hover:text-violet-900 dark:hover:text-violet-100 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.777-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-violet-700 dark:text-violet-300 hover:text-violet-900 dark:hover:text-violet-100 transition-colors duration-200">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M.21 2.87a9.982 9.982 0 0 1 2.83-1.07C3.96 1.4 5.25.9 6.64.9c2.7.0 4.7 1.4 5.3 3.4a.2.2 0 0 1-.03.22c-.93 1.2-2.1 2.1-3.6 2.8a.2.2 0 0 0-.2.2v.4c0 .8.2 1.5.7 2.1c.5.5 1.1.9 1.8 1.1h.4a.2.2 0 0 0 .1-.02c1.7-1.1 2.9-2.5 3.3-4.1a.2.2 0 0 1 .2-.1l1.7.3c.09.02.16.1.18.19a.2.2 0 0 1-.05.15c-1.3 1.6-2.9 2.9-4.8 3.8a.2.2 0 0 0-.1.2c-.3 1.7-.8 3.4-1.7 4.9-.8 1.3-1.9 2.5-3.3 3.4-1.4.9-2.9 1.4-4.5 1.4-1.1.0-2.3-.2-3.4-.6a.2.2 0 0 1-.16-.25c.1-.14 1.3-.84 2.8-1.54 1.4-.7 2.6-1.35 3.4-1.9a.2.2 0 0 0 .02-.27c-.06-.1-.13-.15-.22-.17-.7-.15-1.5-.22-2.3-.2A4.246 4.246 0 0 0 3 14.8c-.8.4-1.6.7-2.3.8a.2.2 0 0 1-.2-.14c-.1-.1-.1-.2-.04-.33 1.3-2.1 2.2-3.7 2.7-4.7C4.1 8 4.6 7.4 5.1 6.8c.4-.6.8-1.2 1.1-1.7a.2.2 0 0 0 .04-.21c-.4-.7-.7-1.5-.7-2.3 0-.02 0-.04.01-.07zM20.7 7.7l.9-1.9c-.9-.1-1.7-.3-2.6-.6a1.1 1.1 0 0 1-.2-.2c-.1-.3-.2-.6-.2-.9.0-1.8 1.6-2.9 4.3-3.1.2 0 .2.08.1.23-.2.3-.9.9-2.2 1.6a.2.2 0 0 1-.1.21c-.4.2-1 .3-1.6.4-.6.1-.9.6-1.1.9-.3.5-.4.8-.4 1.2s.1.7.3.9c.2.2.4.3.5.4a.2.2 0 0 0 .1.02c.9.1 1.8.4 2.6.8a.2.2 0 0 0 .2-.06Z" />
        </svg>
      </a>
      <a href="#" aria-label="Instagram" class="text-violet-700 dark:text-violet-300 hover:text-violet-900 dark:hover:text-violet-100 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="M12 4c-2.76 0-4.97 2.21-4.97 4.97v6.06c0 2.76 2.21 4.97 4.97 4.97h6.06c2.76 0 4.97-2.21 4.97-4.97V8.97c0-2.76-2.21-4.97-4.97-4.97H12zm0-2h6.06C21.372 2 24 4.628 24 7.94V17.06C24 20.36 21.372 23 18.06 23H7.94C4.64 23 2 20.372 2 17.06V7.94C2 4.64 4.628 2 7.94 2H12zM7.5 12c0 2.485 2.015 4.5 4.5 4.5s4.5-2.015 4.5-4.5-2.015-4.5-4.5-4.5-4.5 2.015-4.5 4.5zm0-2.5a.5.5 0 100 1 .5.5 0 000-1zm-1.5 2.5a6 6 0 1112 0 6 6 0 01-12 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>

    <p class="text-xs sm:text-sm text-center opacity-75">
      &copy; <span id="year"></span> StreamNow. All rights reserved.
    </p>
  </div>
  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
  </script>
</footer>

Verwandte Komponenten

Neumorphe lebendige Fußzeile

Eine einfache, reaktionsschnelle Fußzeilenkomponente, die mit neumorphen Designprinzipien und lebendigen Farben gestaltet ist. Es zeichnet sich durch ein weiches, extrudiertes Aussehen mit subtilen Schatten aus, während die Akzentfarben mit hoher Sättigung beibehalten werden. Die Fußzeile enthält grundlegende Abschnitte für die Website-Navigation, soziale Links und Copyright-Informationen mit vollständiger Unterstützung des Dunkelmodus.

Offen

Footer-Komponente

Eine reaktionsschnelle Retro-/Vintage-Footer-Komponente für einen Blog mit triadischem Farbschema und Unterstützung für dunkle Themen.

Offen

Glassmorphism-Fußzeilenkomponente

Eine reaktionsschnelle Fußzeilenkomponente im Glassmorphism-Stil mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten, die ein dunkles Design unterstützen.

Offen