Agricoltura News Card Navigation

Un semplice componente di navigazione ispirato alla carta/alla stampa con una scheda di notizie per siti Web di agricoltura e allevamento, utilizzando una combinazione di colori analoga. È completamente reattivo con il supporto della modalità oscura.

Anteprima

Codice HTML

<nav class="bg-amber-100 dark:bg-gray-800 p-4 shadow-md font-serif border-b-4 border-amber-300 dark:border-gray-700">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="text-xl font-bold text-amber-900 dark:text-amber-100 flex items-center mb-4 md:mb-0">
      <svg class="w-8 h-8 mr-2 text-lime-700 dark:text-lime-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm4-1a1 1 0 00-1 1v4a1 1 0 102 0V9a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
      AgriConnect
    </a>

    <div class="md:hidden flex items-center">
      <button id="menu-button" class="text-amber-900 dark:text-amber-100 focus:outline-none focus:ring-2 focus:ring-amber-500 rounded-md p-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <div id="menu" class="hidden md:flex md:flex-grow md:items-center md:w-auto w-full mt-4 md:mt-0">
      <ul class="flex flex-col md:flex-row md:ml-auto md:space-x-8 space-y-2 md:space-y-0 w-full md:w-auto">
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Home</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">News</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Resources</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Contact</a></li>
      </ul>
    </div>

    <div class="w-full md:w-auto mt-4 md:mt-0 md:ml-8">
      <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-sm border border-amber-200 dark:border-gray-600 flex flex-col md:flex-row items-center space-y-3 md:space-y-0 md:space-x-3 max-w-sm mx-auto md:mx-0">
        <img class="w-16 h-16 rounded-full object-cover border-2 border-amber-300 dark:border-gray-500" src="https://picsum.photos/seed/farmnews/60/60" alt="News thumbnail">
        <div class="flex-grow text-center md:text-left">
          <p class="text-sm font-semibold text-amber-900 dark:text-amber-100 mb-1 leading-tight">Latest: Sustainable Farming Practices</p>
          <a href="#" class="text-xs text-lime-700 dark:text-lime-300 hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const menuButton = document.getElementById('menu-button');
      const menu = document.getElementById('menu');

      menuButton.addEventListener('click', function() {
        menu.classList.toggle('hidden');
      });
    });
  </script>
</nav>

Componenti correlati

Componente di miglioramento della navigazione

Un componente di navigazione ispirato al glassmorphism, progettato per mostrare il lavoro e i prodotti in portfolio con i toni della terra e il supporto della modalità scura. Il componente presenta un effetto vetro smerigliato, un design reattivo ed elementi minimali.

Aperto

Componenti di miglioramento della navigazione

Un componente di navigazione in stile neumorfismo con supporto della modalità oscura e design reattivo

Aperto

Cyberpunk_Portfolio_Navigation

Un componente di navigazione a tema cyberpunk complesso e reattivo per un portfolio, caratterizzato da un'estetica futuristica viola neon, sfondi scuri ed elementi interattivi. Include il supporto per la modalità oscura.

Aperto