طراحی Header و Navigation

طراحی Header و Navigation

در این درس، شما یاد می‌گیرید که چگونه یک Header زیبا و Navigation حرفه‌ای طراحی کنید.

ساختار HTML:

<header class="bg-white shadow-lg">
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">
      <div class="flex-shrink-0">
        <h1 class="text-2xl font-bold text-primary">نام شما</h1>
      </div>
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#home" class="text-gray-900 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">خانه</a>
          <a href="#about" class="text-gray-900 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">درباره من</a>
          <a href="#portfolio" class="text-gray-900 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">نمونه کارها</a>
          <a href="#contact" class="text-gray-900 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">تماس</a>
        </div>
      </div>
    </div>
  </nav>
</header>

نکات مهم:

• استفاده از flexbox برای چیدمان
• ریسپانسیو با hidden md:block
• افکت hover برای لینک‌ها
• استفاده از shadow برای عمق