Composant de plan du site
Un composant de plan de site réactif conçu dans un style brutaliste avec un thème sombre pour les sites Web d’entreprise, intégrant des fonctionnalités interactives.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-4">
<h1 class="text-3xl font-bold text-white mb-4">Site Map</h1>
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Home</h2>
<p class="text-gray-600 dark:text-gray-400">Welcome to our website.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">About Us</h2>
<p class="text-gray-600 dark:text-gray-400">Learn more about our company.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Services</h2>
<p class="text-gray-600 dark:text-gray-400">Discover our services.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Portfolio</h2>
<p class="text-gray-600 dark:text-gray-400">View our work.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Blog</h2>
<p class="text-gray-600 dark:text-gray-400">Read our latest posts.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Contact</h2>
<p class="text-gray-600 dark:text-gray-400">Get in touch with us.</p>
</li>
</ul>
<div class="mt-8">
<h2 class="text-xl font-bold text-white mb-2">Team Members</h2>
<div class="flex flex-wrap gap-4">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg flex flex-col items-center">
<img class="w-24 h-24 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">CEO</p>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg flex flex-col items-center">
<img class="w-24 h-24 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-400">CTO</p>
</div>
</div>
</div>
<div class="mt-8">
<h2 class="text-xl font-bold text-white mb-2">Gallery</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-2">
<img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=1" alt="Gallery Image">
<img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=2" alt="Gallery Image">
<img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=3" alt="Gallery Image">
<img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=4" alt="Gallery Image">
</div>
</div>
</div>Composants associés
Neumorphic_Real_Estate_Sitemap_Component
Un composant de plan de site neumorphique simple et réactif pour les plateformes immobilières avec un schéma de couleurs arc-en-ciel dégradé et la prise en charge du mode sombre.
Composant de plan du site
Un composant de sitemap réactif avec des micro-interactions, une palette de couleurs pastel et une prise en charge du thème sombre, adapté aux sites Web de commerce électronique. Il comprend un en-tête, une barre de recherche et plusieurs catégories avec des liens.
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.