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
Disposition de la grille de conception matérielle
Composant de mise en page de grille réactif avec le style Material Design, y compris les effets d’ombre et la prise en charge du mode sombre.
Travel_Booking_Grid_Layout_Component
Il s’agit d’un composant de mise en page de grille complexe et réactif pour un site Web de réservation de voyages avec un design d’entreprise/professionnel, une palette de couleurs analogue et une prise en charge du mode sombre. Comprend des cartes de destination, une entrée de recherche et une barre latérale.
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.