VibeCoderzVibeCoderz
Telegram
All Prompts
Travel Navigation Header preview
navigationheaderresponsivemodernglassmorphism

Travel Navigation Header

Современный адаптивный хедер для сайта путешествий. Навигация, лого, кнопки. Glassmorphism, скругленный дизайн, плавные переходы.

Prompt

<div class="flex supports-[backdrop-filter]:bg-white/100 bg-white
  border-neutral-200 border rounded-2xl pt-2 pr-3 pb-2 pl-3
  shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]
  backdrop-blur items-center justify-between">
  <a href="#" class="inline-flex items-center justify-center bg-center
    mix-blend-multiply w-[80px] h-[36px]
    bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/12005141-c9fb-406f-a767-d04124893a70_320w.webp)]
    bg-cover rounded-full invert"></a>
  <nav class="hidden items-center gap-7 md:flex">
    <a href="#" class="text-sm font-medium text-neutral-700 hover:text-neutral-900 transition-colors">Destinations</a>
    <a href="#" class="text-sm font-medium text-neutral-700 hover:text-neutral-900 transition-colors">Experiences</a>
    <a href="#" class="text-sm font-medium text-neutral-700 hover:text-neutral-900 transition-colors">Stories</a>
    <a href="#" class="text-sm font-medium text-neutral-700 hover:text-neutral-900 transition-colors">About</a>
  </nav>
  <div class="flex items-center gap-2">
    <button class="hidden rounded-xl border border-neutral-200 bg-white px-3
      py-2 text-sm font-medium text-neutral-700
      hover:bg-neutral-50 md:block transition-colors">Sign In</button>
    <button class="inline-flex items-center gap-2 rounded-xl bg-neutral-900
      px-4 py-2 text-sm font-medium text-white
      hover:bg-neutral-800 transition-colors">
      <span>Start Journey</span>
      <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="h-4 w-4" style="stroke-width: 1.5;">
        <path d="M5 12h14"></path>
        <path d="m12 5 7 7-7 7"></path>
      </svg>
    </button>
  </div>
</div>
All Prompts