Komponenten Komponenten zur Verbesserung der Navigation Komponente zur Verbesserung der Navigation

Komponente zur Verbesserung der Navigation

Eine von Glassmorphism inspirierte Navigationskomponente für die Präsentation von Portfolioarbeiten und Produkten mit Erdtönen und Unterstützung für den Dunkelmodus. Die Komponente verfügt über einen Milchglaseffekt, ein responsives Design und minimale Elemente.

Vorschau

HTML-Code

<nav class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg border-b border-gray-300 dark:border-gray-700 rounded-lg p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
      <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio</span>
    </div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Gallery</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
</nav>

<section class="p-8 bg-gray-50 dark:bg-gray-900">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">My Work</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Project Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Project Title</h3>
        <p class="text-gray-700 dark:text-gray-300">Brief description of the project goes here. Showcasing work effectively.</p>
      </div>
    </div>
    <!-- Repeat similar divs for more projects -->
  </div>
</section>

Verwandte Komponenten

Monospace_Booking_Navigation_Complex_Triadic

Eine komplexe Buchungs-/Reservierungsnavigationskomponente mit einer Monospace-/Entwickler-Ästhetik. Es verfügt über ein triadisches Farbschema, responsives Design und Unterstützung für den Dunkelmodus, ideal für Terminsysteme.

Offen

Komponente "Navigationsverbesserungskomponenten"

Eine reaktionsschnelle Navigationskomponente mit Unterstützung des Dunkelmodus für E-Commerce-Websites. Es verfügt über ein triadisches Farbschema mit dunklem Hintergrund, um die Belastung der Augen zu reduzieren.

Offen

Landwirtschaft News Card Navigation

Eine einfache, von Papier und Druck inspirierte Navigationskomponente mit einer Nachrichtenkarte für Landwirtschafts- und Landwirtschafts-Websites in einem analogen Farbschema. Es reagiert vollständig und unterstützt den Dunkelmodus.

Offen