Composant Infographie
Composant Infographie - Interface utilisateur en mode sombre avec niveaux de gris et conception complexe. Réactif avec prise en charge du thème sombre.
HTML Code
<div class="bg-gray-900 text-gray-200 p-8 min-h-screen">
<div class="container mx-auto">
<h1 class="text-4xl font-bold text-center text-white mb-12">My Portfolio Infographics</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project Stats Card -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-semibold text-white mb-4">Project Statistics</h2>
<div class="flex items-center mb-4">
<div class="text-gray-400 mr-2">Completed Projects:</div>
<div class="text-white font-bold">50+</div>
</div>
<div class="flex items-center mb-4">
<div class="text-gray-400 mr-2">Client Satisfaction:</div>
<div class="text-white font-bold">100%</div>
</div>
<div class="flex items-center">
<div class="text-gray-400 mr-2">Years of Experience:</div>
<div class="text-white font-bold">10+</div>
</div>
</div>
<!-- Skills Distribution Card -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-semibold text-white mb-4">Skills Distribution</h2>
<div class="mb-4">
<div class="flex justify-between text-gray-400 mb-1"><span>HTML/CSS</span><span>95%</span></div>
<div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
<div class="bg-gray-400 h-2 rounded-full" style="width: 95%"></div>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between text-gray-400 mb-1"><span>JavaScript</span><span>85%</span></div>
<div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
<div class="bg-gray-400 h-2 rounded-full" style="width: 85%"></div>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between text-gray-400 mb-1"><span>Tailwind CSS</span><span>90%</span></div>
<div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
<div class="bg-gray-400 h-2 rounded-full" style="width: 90%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-gray-400 mb-1"><span>Python</span><span>70%</span></div>
<div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
<div class="bg-gray-400 h-2 rounded-full" style="width: 70%"></div>
</div>
</div>
</div>
<!-- Testimonials Card -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-semibold text-white mb-4">Client Testimonials</h2>
<div class="mb-4 border-b border-gray-700 pb-4">
<p class="text-gray-400 italic mb-2">"Outstanding work! Exceeded expectations and delivered on time."</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar">
<div class="text-white font-semibold">John Smith</div>
</div>
</div>
<div>
<p class="text-gray-400 italic mb-2">"Highly recommend for any web development project. Great communication."</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client Avatar">
<div class="text-white font-semibold">Jane Doe</div>
</div>
</div>
</div>
<!-- Project Showcase Card -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6 md:col-span-2 lg:col-span-3">
<h2 class="text-2xl font-semibold text-white mb-4">Featured Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="relative overflow-hidden rounded-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project1/400/300" alt="Project Image 1">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
<p class="text-white text-xl font-bold">Project Alpha</p>
</div>
</div>
<div class="relative overflow-hidden rounded-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project2/400/300" alt="Project Image 2">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
<p class="text-white text-xl font-bold">Project Beta</p>
</div>
</div>
<div class="relative overflow-hidden rounded-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project3/400/300" alt="Project Image 3">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
<p class="text-white text-xl font-bold">Project Gamma</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Infographie
Il s’agit d’un composant infographique complexe et minimaliste pour les portfolios, présentant des statistiques ou des réalisations clés. Il utilise une palette de couleurs complémentaire et comprend un design réactif avec prise en charge du mode sombre.
Composant Infographie
Un composant d’infographie simple conçu avec une esthétique 3D, utilisant des couleurs pastel pour les interfaces de médias sociaux, avec prise en charge du mode sombre.
Composant d’infographie neumorphique sur le commerce électronique
Un composant infographique neumorphique simple et réactif pour le commerce électronique, utilisant une palette de couleurs analogue et prenant en charge le mode sombre.