Retro_Vintage_Sticky_Navigation_Component
Une barre de navigation autocollante complexe, d’inspiration rétro/vintage, conçue pour les sites Web d’événements ou de conférences, avec une palette de couleurs pastel douces, une réactivité totale et une prise en charge du mode sombre. Il comprend un logo, des liens de navigation, un bouton d’appel à l’action et une icône de recherche.
HTML Code
<header class="sticky top-0 z-50 w-full bg-pink-100/90 backdrop-blur-sm shadow-md transition-colors duration-300 dark:bg-zinc-800/90">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between font-mono text-pink-700 dark:text-pink-300">
<div class="flex items-center space-x-4">
<!-- Logo / Event Title -->
<a href="#" class="text-2xl font-bold tracking-tight uppercase group dark:text-pink-100">
<span class="block transform -rotate-6 group-hover:rotate-0 transition-transform duration-200 ease-in-out text-pink-600 dark:text-pink-200">Future</span>
<span class="block transform rotate-6 group-hover:rotate-0 transition-transform duration-200 ease-in-out text-pink-800 dark:text-pink-400">Fest '92</span>
</a>
</div>
<!-- Mobile Menu Button -->
<div class="lg:hidden">
<button id="mobile-menu-button" class="p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400">
<svg class="w-7 h-7 text-pink-700 dark:text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
<!-- Desktop Navigation & CTA -->
<div class="hidden lg:flex items-center space-x-8">
<ul class="flex space-x-6 text-lg">
<li><a href="#schedule" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
Schedule
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
</a></li>
<li><a href="#speakers" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
Speakers
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
</a></li>
<li><a href="#tickets" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
Tickets
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
</a></li>
<li><a href="#venue" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
Venue
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
</a></li>
<li><a href="#faq" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
FAQ
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
</a></li>
</ul>
<a href="#buytickets" class="px-6 py-2 bg-pink-500 text-white font-bold rounded-full shadow-lg transform -skew-x-12 hover:scale-105 hover:bg-pink-600 transition-all duration-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-50">
<span class="inline-block transform skew-x-12">Get Tickets!</span>
</a>
<button class="p-2 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 rounded-full group">
<svg class="w-6 h-6 text-pink-700 group-hover:text-pink-900 transition-colors duration-200 dark:text-pink-300 dark:group-hover:text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</div>
</nav>
<!-- Mobile Menu (hidden by default) -->
<div id="mobile-menu" class="hidden lg:hidden bg-pink-50 dark:bg-zinc-700 px-4 py-4 border-t border-pink-200 dark:border-zinc-600 text-center font-mono">
<ul class="flex flex-col space-y-4 text-lg text-pink-700 dark:text-pink-300">
<li><a href="#schedule" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Schedule</a></li>
<li><a href="#speakers" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Speakers</a></li>
<li><a href="#tickets" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Tickets</a></li>
<li><a href="#venue" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Venue</a></li>
<li><a href="#faq" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">FAQ</a></li>
</ul>
<a href="#buytickets" class="mt-6 inline-block w-full max-w-xs px-6 py-3 bg-pink-500 text-white font-bold rounded-full shadow-lg transform -skew-x-12 hover:scale-105 hover:bg-pink-600 transition-all duration-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-50">
<span class="inline-block transform skew-x-12">Get Tickets!</span>
</a>
<button class="mt-4 p-2 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 rounded-full group">
<svg class="w-6 h-6 text-pink-700 group-hover:text-pink-900 transition-colors duration-200 dark:text-pink-300 dark:group-hover:text-pink-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</div>
</header>
<script>
// Basic JavaScript for mobile menu toggle (required for interaction)
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when a link is clicked
const menuLinks = mobileMenu.querySelectorAll('a');
menuLinks.forEach(link => {
link.addEventListener('click', function() {
mobileMenu.classList.add('hidden');
});
});
}
});
</script>Composants associés
Navigation autocollante rétro E-commerce
Un composant de navigation autocollant rétro/vintage pour les sites de commerce électronique avec des couleurs vives, des éléments complexes, une réactivité et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Navigation collante brutaliste
Un composant de navigation autocollant de style brutaliste avec un comportement réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Présente un contraste élevé, une typographie audacieuse et une esthétique austère et brute.
Composant de navigation autocollant - Pastel neumorphe
Un composant de navigation complexe et collant avec un style de conception Neumorphism et une palette de couleurs pastel, adapté à la documentation ou aux sites wiki. Il propose des éléments de navigation imbriqués, une barre de recherche et la prise en charge du mode sombre, le tout implémenté avec HTML et Tailwind CSS pour une réactivité totale.