Composant de mise en page de grille 3D pour portfolio
Un composant de mise en page de grille complexe, réactif et de style 3D pour les portfolios utilisant des couleurs complémentaires, avec prise en charge du mode sombre et des images de picsum.photos.
HTML Code
<div class="p-8 dark:bg-gray-900 min-h-screen">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-2xl perspective-1000">
<div class="relative group">
<img src="https://picsum.photos/seed/picsum1/600/400" alt="Project 1" class="w-full h-64 object-cover">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
<a href="#" class="text-white text-xl font-bold">View Project</a>
</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Project Alpha</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of Project Alpha, highlighting its key features and technologies used. This is a placeholder.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-2xl perspective-1000">
<div class="relative group">
<img src="https://picsum.photos/seed/picsum2/600/400" alt="Project 2" class="w-full h-64 object-cover">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
<a href="#" class="text-white text-xl font-bold">View Project</a>
</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Project Beta</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of Project Beta, highlighting its key features and technologies used. This is a placeholder.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-2xl perspective-1000">
<div class="relative group">
<img src="https://picsum.photos/seed/picsum3/600/400" alt="Project 3" class="w-full h-64 object-cover">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
<a href="#" class="text-white text-xl font-bold">View Project</a>
</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Project Gamma</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of Project Gamma, highlighting its key features and technologies used. This is a placeholder.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-2xl perspective-1000">
<div class="relative group">
<img src="https://picsum.photos/seed/picsum4/600/400" alt="Project 4" class="w-full h-64 object-cover">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
<a href="#" class="text-white text-xl font-bold">View Project</a>
</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Project Delta</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of Project Delta, highlighting its key features and technologies used. This is a placeholder.</p>
</div>
</div>
</div>
</div>Composants associés
Composant de mise en page de grille
Un composant de mise en page de grille réactif pour les interfaces de médias sociaux conçu avec un style skeuomorphe, avec des couleurs triadiques, plusieurs éléments interactifs et la prise en charge des thèmes sombres.
Composant de mise en page de grille
Un composant de mise en page de grille réactif avec un design rétro/vintage, avec une esthétique nostalgique des années 80/90. Le composant comprend des images d’espace réservé et des avatars avec prise en charge du mode sombre.
Skeuomorphism Disposition en grille vibrante
Composant de mise en page de grille réactif avec prise en charge du mode sombre, conception Skeuomorphism, Couleurs vives, Complexité modérée, adapté aux portefeuilles.