ArtDeco_Neon_Photography_Navigation
Un componente de navegación simple y receptivo para portafolios de fotografía, con patrones geométricos inspirados en el Art Decó y un vibrante esquema de color neón/eléctrico con soporte para modo oscuro.
Código HTML
<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>Componentes relacionados
Componente Componentes de mejora de navegación
Un componente de navegación complejo de estilo brutalista para sitios web corporativos con una combinación de colores análoga, diseño receptivo y compatibilidad con el modo oscuro. Presenta diseños inusuales y alto contraste.
Navegación de medios en modo oscuro
Un componente de navegación complejo y receptivo para plataformas de entretenimiento/medios, con una interfaz de usuario de modo oscuro con una paleta de colores bosque/verde. Incluye un logotipo, una barra de búsqueda, enlaces de navegación, un perfil de usuario y una campana de notificación.
Componente de mejora de la navegación
Un componente de navegación inspirado en el morfismo de vidrio diseñado para mostrar el trabajo de la cartera y los productos compatibles con tonos tierra y modo oscuro. El componente presenta un efecto de vidrio esmerilado, un diseño receptivo y elementos mínimos.