Galerie-Komponente
Eine einfache, reaktionsschnelle Bildergalerie-Komponente, die für Geschäfts-/Unternehmenswebsites entwickelt wurde, mit einem triadischen Farbschema, das von den Prinzipien des Material Designs inspiriert ist. Es enthält ein dunkles Design für die Vorlieben des Benutzers und verwendet ein rasterbasiertes Layout.
HTML-Code
<div class="bg-blue-50 dark:bg-gray-900 py-12">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-200 mb-8">Our Work</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-2">Project Alpha</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of Project Alpha, highlighting its key features and success.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-red-700 dark:text-red-300 mb-2">Project Beta</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of Project Beta, highlighting its key features and success.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-green-700 dark:text-green-300 mb-2">Project Gamma</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of Project Gamma, highlighting its key features and success.</p>
</div>
</div>
</div>
</div>
</div>
Verwandte Komponenten
E-Commerce-Produktgalerie
Eine minimalistische und reaktionsschnelle Produktgalerie-Komponente für den E-Commerce mit Ozean-/Blautönen, Unterstützung für den Dunkelmodus und interaktiver Bildanzeige.
E-Commerce-Produktgalerie
Eine komplexe, reaktionsschnelle und mit dunklen Themen kompatible Galeriekomponente mit einem minimalistischen Design, einem komplementären Farbschema und mehreren interaktiven Elementen, die für den E-Commerce geeignet sind.