Components Navigation Enhancement Components ArtDeco_Neon_Photography_Navigation

ArtDeco_Neon_Photography_Navigation

A simple, responsive navigation component for photography portfolios, featuring Art Deco-inspired geometric patterns and a vibrant neon/electric color scheme with dark mode support.

Preview

HTML Code

<nav class="bg-gradient-to-r from-purple-900 via-pink-800 to-indigo-900 dark:from-purple-950 dark:via-pink-900 dark:to-indigo-950 p-4 shadow-xl font-['Georgia',_serif]">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="text-white tracking-widest text-3xl font-bold uppercase select-none relative group">
      <span class="relative z-10">LUMINA</span>
      <span class="absolute inset-0 bg-gradient-to-br from-pink-500 to-blue-500 blur-sm opacity-0 group-hover:opacity-75 transition-opacity duration-300"></span>
      <span class="absolute inset-0 bg-gradient-to-br from-pink-400 to-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform group-hover:scale-105"></span>
    </a>

    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border-2 rounded text-white border-neon-blue-400 hover:text-neon-pink-400 hover:border-neon-pink-400 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-neon-blue-300">
        <svg class="fill-current h-6 w-6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/>
        </svg>
      </button>
    </div>

    <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="navbar-default">
      <ul class="text-sm lg:flex flex-1 items-center lg:justify-end uppercase tracking-wide">
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-blue-300 transition-colors duration-300 px-4 py-2 relative group">
            Gallery
            <span class="block h-0.5 bg-neon-blue-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-pink-300 transition-colors duration-300 px-4 py-2 relative group">
            Portfolio
            <span class="block h-0.5 bg-neon-pink-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-green-300 transition-colors duration-300 px-4 py-2 relative group">
            About
            <span class="block h-0.5 bg-neon-green-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-yellow-300 transition-colors duration-300 px-4 py-2 relative group">
            Contact
            <span class="block h-0.5 bg-neon-yellow-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Related Components

Navigation Enhancement Components

A navigation component designed with skeuomorphism, featuring digital elements that mimic real-world counterparts. It is styled using Tailwind CSS with responsive effects and dark theme support.

Open

Cyberpunk_Portfolio_Navigation

A complex, responsive cyberpunk-themed navigation component for a portfolio, featuring futuristic neon purple aesthetics, dark backgrounds, and interactive elements. Includes dark mode support.

Open

Monospace_Booking_Navigation_Complex_Triadic

A complex booking/reservation navigation component with a monospace/developer aesthetic. It features a triadic color scheme, responsive design, and dark mode support, ideal for appointment systems.

Open