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 disposition de grille de neumorphisme
Composant de disposition de grille de neumorphisme
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.
Watercolor_Artistic_Grid_Layout_Consulting
Un composant de mise en page de grille simple et réactif pour le conseil/les services, avec un design aquarelle/artistique doux avec des neutres froids et la prise en charge du mode sombre.