All Prompts
All Prompts

navigationheaderglassmorphismspaceresponsivefixed
Space Tourism Navigation Header
Шапка-навигация с эффектом glassmorphism для сайтов о космосе. Фиксированная, адаптивная, с логотипом, ссылками и кнопками.
Prompt
<nav class="fixed top-0 left-0 right-0 z-50 px-6 py-6">
<div class="max-w-4xl mx-auto border border-white/10 rounded-full px-6 py-3 bg-slate-900/90 backdrop-blur-2xl">
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="text-lg font-semibold tracking-tight text-white">Astrolux</span>
</div>
<ul class="hidden md:flex items-center gap-1 text-sm font-medium text-white/60">
<li>
<a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5">Missions</a>
</li>
<li>
<a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5">Technology</a>
</li>
<li>
<a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5">Training</a>
</li>
<li>
<a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5">Travelers</a>
</li>
<li>
<a href="#" class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5">Support</a>
</li>
</ul>
<div class="flex items-center gap-2">
<button class="hover:bg-white/5 p-2 rounded-full transition-all duration-300 border border-white/5 bg-white/[0.02]" aria-label="Account">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 stroke-[1.5] text-white/60">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</button>
<button class="relative hover:bg-white/5 p-2 rounded-full transition-all duration-300 border border-white/5 bg-white/[0.02]" aria-label="Bookings">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 stroke-[1.5] text-white/60">
<rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect>
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
<path d="M12 11h4"></path>
<path d="M12 16h4"></path>
<path d="M8 11h.01"></path>
<path d="M8 16h.01"></path>
</svg>
<span class="absolute -top-1 -right-1 w-4 h-4 bg-blue-500 text-white text-xs rounded-full flex items-center justify-center font-medium">1</span>
</button>
</div>
</div>
</div>
</nav>