Componentes Pie de página Memphis_Purple_Entertainment_Footer_Component

Memphis_Purple_Entertainment_Footer_Component

Un componente de pie de página simple para plataformas de entretenimiento/medios, con un estilo de diseño Memphis con colores púrpura-violeta audaces, elementos geométricos y capacidad de respuesta total con soporte para modo oscuro.

Vista previa

Código HTML

<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>

Componentes relacionados

Componente de pie de página

Un componente de pie de página retro/vintage responsivo para un blog con combinación de colores triádica y compatibilidad con temas oscuros.

Abrir

Componente de pie de página

Un componente de pie de página neumórfico para un sitio web de blog/contenido, esquema de color monocromático, con soporte para modo oscuro. Es un componente moderadamente complejo. Es responsivo.

Abrir

Componente de pie de página - Swiss Pastel Consulting

Un componente de pie de página limpio, minimalista y receptivo con una influencia de diseño suizo, con colores pastel y tipografía clara, adecuado para sitios web de consultoría / servicios. Incluye soporte para modo oscuro.

Abrir