Компоненты Панель навигации Панель навигации по портфолио

Панель навигации по портфолио

Адаптивная навигационная панель с поддержкой темных тем, разработанная для сайта-портфолио с использованием принципов Material Design и цветовой гаммы земляных тонов. Он включает в себя логотип бренда, навигационные ссылки и кнопку призыва к действию. Дизайн в меру сложный и адаптируется под разные размеры экрана.

Предварительный просмотр

HTML-код

<nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between">
      <div class="flex space-x-7">
        <div>
          
          <a href="#" class="flex items-center py-4 px-2">
            <span class="text-gray-800 dark:text-white text-lg font-bold">Portfolio</span>
          </a>
        </div>
        
        <div class="hidden md:flex items-center space-x-1">
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Home</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Projects</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">About</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Contact</a>
        </div>
      </div>
      
      <div class="hidden md:flex items-center space-x-3 ">
        <a href="#" class="py-2 px-2 font-medium text-gray-500 dark:text-gray-300 rounded hover:bg-green-500 dark:hover:bg-green-400 hover:text-white dark:hover:text-white transition duration-300">Log In</a>
        <a href="" class="py-2 px-2 font-medium text-white bg-green-500 dark:bg-green-400 rounded hover:bg-green-400 dark:hover:bg-green-500 transition duration-300">Sign Up</a>
      </div>
      
      <div class="-mr-2 flex md:hidden">
        <button class="mobile-menu-button p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 dark:hover:bg-gray-700 dark:focus:bg-gray-700">
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  
  <div class="mobile-menu hidden md:hidden">
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Projects</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">About</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Contact</a>
  </div>
</nav>

Связанные компоненты

Скевоморфная панель навигации

Простая адаптивная панель навигации для социальных сетей со скевоморфным стилем дизайна, использующая аналогичную цветовую схему и поддерживающая темный режим.

Открытый

Компонент панели навигации

Простой адаптивный компонент панели навигации, разработанный для приборной панели, с монохроматической цветовой схемой и микровзаимодействиями. Он включает в себя поддержку темного режима с эффектами наведения для привлекательной анимации.

Открытый

Скевоморфная панель навигации

Компонент панели навигации портфолио, выполненный в скевоморфных стилях и пастельной цветовой гамме, включая поддержку темного режима. В нем есть интерактивные элементы, такие как ссылки и выпадающее меню.

Открытый