Composant Galerie
Un composant de galerie d’images simple et réactif conçu pour les sites Web d’entreprise, avec une palette de couleurs triadique inspirée des principes de conception matérielle. Il comprend un thème sombre pour les préférences de l’utilisateur et utilise une mise en page basée sur une grille.
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>
Composants associés
3D_Muted_Gallery_Component
Un composant de galerie complexe et réactif avec une esthétique de conception 3D, une palette de couleurs sourdes et une prise en charge du mode sombre, adapté à un blog ou à la consommation de contenu.
Composant de galerie minimaliste
Un composant de galerie d’images réactif et minimaliste avec une palette de couleurs chaudes et crépusculaires, adapté aux applications technologiques/SaaS. Inclut la prise en charge du mode sombre.
Skeuomorphism, Grayscale Gallery Component
Galerie de photos réactive avec un design Skeuomorphism, une palette de couleurs en niveaux de gris et une mise en page complexe pour les médias sociaux. Inclut la prise en charge du thème sombre.