Composant de plan du site
Un composant de plan de site de style 3D avec un design réactif et une prise en charge du mode sombre. Il comporte des éléments tridimensionnels pour plus de profondeur et d’engagement, en utilisant des images et des avatars aléatoires.
HTML Code
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Site Map</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Home</h3>
<img src="https://picsum.photos/200/100?random=1" alt="Home Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Us</h3>
<img src="https://picsum.photos/200/100?random=2" alt="About Us Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Services</h3>
<img src="https://picsum.photos/200/100?random=3" alt="Services Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Contact</h3>
<img src="https://picsum.photos/200/100?random=4" alt="Contact Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Blog</h3>
<img src="https://picsum.photos/200/100?random=5" alt="Blog Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Portfolio</h3>
<img src="https://picsum.photos/200/100?random=6" alt="Portfolio Image" class="rounded-lg mt-2">
</div>
</div>
</div>Composants associés
Composant de plan du site
Un composant de plan de site réactif conçu avec glassmorphism, avec un effet translucide et un flou semblable à du verre dépoli pour un portfolio présentant des travaux ou des produits. Il prend en charge un thème sombre et utilise des couleurs complémentaires tout en conservant une complexité modérée.
Composant de plan du site
Un composant de sitemap simple et réactif pour les applications technologiques/SaaS avec une interface utilisateur en mode sombre et un accent de dégradé arc-en-ciel. Optimisé pour un minimum d’éléments et une navigation claire.
Composant de plan du site
Un composant de plan de site de style rétro/vintage avec des effets réactifs et une prise en charge du thème sombre.