VibeCoderzVibeCoderz
Telegram
All Prompts
Header Navigation Section preview
headernavigationresponsivemodern

Header Navigation Section

Шапка сайта с лого, меню и кнопкой. Адаптивный дизайн для удобной навигации на всех устройствах.

Prompt

<div class="header-section bg-white shadow-sm">
  <style>@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');</style>
  <header class="w-full py-4 px-6 bg-white">
    <div class="max-w-7xl mx-auto flex items-center justify-between">
      <div class="flex items-center">
        <img src="https://nicolaipalmkvist.com/wp-content/uploads/2025/09/2-e1759070249981.webp" alt="Logo" class="h-12 w-auto object-contain" />
      </div>
      <nav class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-700 hover:text-gray-900 transition-colors font-medium">Home</a>
        <a href="#" class="text-gray-700 hover:text-gray-900 transition-colors font-medium">Services</a>
        <a href="#" class="text-gray-700 hover:text-gray-900 transition-colors font-medium">Projects</a>
        <a href="#" class="text-gray-700 hover:text-gray-900 transition-colors font-medium">About us</a>
      </nav>
      <a href="#" class="inline-flex items-center px-6 py-2 bg-orange-600 text-white
        rounded-lg hover:bg-orange-700 transition-colors font-medium">
        <span class="mr-2">Start Planning</span>
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 448 512">
          <path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
        </svg>
      </a>
    </div>
  </header>
</div>
All Prompts