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 conçu dans un style brutaliste avec un thème sombre, idéal pour les sites Web d’entreprise professionnels. Il présente une mise en page audacieuse avec un contraste élevé et des éléments interactifs.
Composant de plan du site
Un composant de plan de site simple et réactif avec un design inspiré du papier/de l’impression et une palette de couleurs analogue, adapté aux sites Web industriels/manufacturiers, y compris la prise en charge du mode sombre.
Composant de plan du site
Un composant de plan de site réactif conçu selon les principes de Material Design, avec des mises en page basées sur une grille, des ombres et la prise en charge du mode sombre.