VibeCoderzVibeCoderz
Telegram
All Prompts
Space Tourism Navigation Header preview
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>
All Prompts