Componentes Navegación de pie de página Componente de navegación de pie de página

Componente de navegación de pie de página

Un componente de navegación de pie de página simple y receptivo con una combinación de colores cálidos inspirados en la puesta de sol, diseñado para marcas de moda / belleza. Cuenta con sutiles efectos de desplazamiento y compatibilidad con el modo oscuro.

Vista previa

Código HTML

<footer class="bg-gradient-to-r from-orange-400 to-red-500 py-8 dark:from-gray-900 dark:to-gray-800 text-white font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
      <div class="mb-4 md:mb-0">
        <h3 class="text-2xl font-bold mb-2 tracking-wide text-yellow-100 dark:text-gray-100">Luminous Threads</h3>
        <p class="text-orange-100 dark:text-gray-400 text-sm">&copy; 2023 All rights reserved.</p>
      </div>

      <nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2 mb-4 md:mb-0">
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Shop</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Collections</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">About Us</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Contact</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Privacy Policy</a>
      </nav>

      <div class="flex gap-4">
        <a href="#" aria-label="Facebook" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-transform duration-300 transform hover:rotate-6">
          <svg class="h-6 w-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.33V22c5.967-.759 10.5-5.623 10.5-11z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="Instagram" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-transform duration-300 transform hover:rotate-6">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.715.056.815.034 1.488.17 2.071.467.579.289.979.629 1.324.973.344.344.684.744.973 1.324.297.583.433 1.256.467 2.07.043.93.056 1.286.056 3.715s-.013 2.784-.056 3.715c-.034.814-.17 1.488-.467 2.071-.289.579-.629.979-.973 1.324-.344.344-.744.684-1.324.973-.583.297-1.256.433-2.07.467-.93.043-1.286.056-3.715.056s-2.784-.013-3.715-.056c-.814-.034-1.488-.17-2.071-.467-.579-.289-.979-.629-1.324-.973-.344-.344-.684-.744-.973-1.324-.297-.583-.433-1.256-.467-2.07-.043-.93-.056-1.286-.056-3.715s.013-2.784.056-3.715c.034-.814.17-1.488.467-2.071.289-.579.629-.979.973-1.324.344-.344.744-.684 1.324-.973.583-.297 1.256-.433 2.07-.467C9.531 2.013 9.886 2 12.315 2zm0 2.18c-2.793 0-3.138.014-4.144.058-.707.03-1.127.135-1.424.28-.277.137-.48.243-.68.443-.199.2-.306.402-.443.68-.145.297-.25.717-.28 1.424-.044 1.006-.058 1.351-.058 4.144s.014 3.138.058 4.144c.03.707.135 1.127.28 1.424.137.277.243.48.443.68.2.199.402.306.68.443.297.145.717.25 1.424.28 1.006.044 1.351.058 4.144.058s3.138-.014 4.144-.058c.707-.03 1.127-.135 1.424-.28.277-.137.48-.243.68-.443.199-.2.306-.402.443-.68.145-.297.25-.717.28-1.424.044-1.006.058-1.351.058-4.144s-.014-3.138-.058-4.144c-.03-.707-.135-1.127-.28-1.424-.137-.277-.243-.48-.443-.68-.199-.2-.402-.306-.68-.443-.297-.145-.717-.25-1.424-.28-1.006-.044-1.351-.058-4.144-.058zm0 3.655c-2.464 0-4.475 2.01-4.475 4.475s2.01 4.475 4.475 4.475 4.475-2.01 4.475-4.475-2.01-4.475-4.475-4.475zM12.315 15.6c-1.815 0-3.288-1.472-3.288-3.288s1.472-3.288 3.288-3.288 3.288 1.472 3.288 3.288-1.472 3.288-3.288 3.288zm5.237-.962a1.21 1.21 0 011.088-1.088c.45-.07.96-.118 1.488-.135.344-.01.59-.018.736.002.392.052.793.18 1.161.356.368.175.688.42 1.22.955.532.532.775.852.955 1.22.175.368.304.769.356 1.161.018.146.01.392.002.736-.017.528-.065 1.038-.135 1.488-.103.68-.225 1.1-.383 1.341-.157.24-.351.4-.567.567-.216.216-.373.41-.567.567-.24.157-.661.279-1.341.383-.45.07-.96.118-1.488.135-.344.01-.59.018-.736-.002-.392-.052-.793-.18-1.161-.356-.368-.175-.688-.42-1.22-.955-.532-.532-.775-.852-.955-1.22-.175-.368-.304-.769-.356-1.161-.018-.146-.01-.392-.002-.736.017-.528.065-1.038.135-1.488.103-.68.225-1.1.383-1.341.157-.24.351-.4.567-.567zm-.432-8.583a.965.965 0 01.965-.965.965.965 0 01.965.965.965.965 0 01-.965.965.965.965 0 01-.965-.965z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</footer>

Componentes relacionados

NeonGlowFooterNavegación

Un componente de navegación de pie de página receptivo con efectos de neón/resplandor, diseñado para plataformas de música/audio. Cuenta con un esquema de color en blanco y negro con un color de acento vibrante, compatibilidad con modo oscuro y HTML semántico.

Abrir