Composant de plan du site
Un composant de sitemap réactif pour les plates-formes de divertissement/médias avec une interface utilisateur sombre et une palette de couleurs terre, avec plusieurs sections et un pied de page, prenant en charge le mode sombre.
HTML Code
<div class="bg-gray-900 text-gray-200 font-sans p-6 md:p-10 lg:p-16 dark:bg-gray-950">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
<!-- Section 1: Categories -->
<div class="flex flex-col space-y-4">
<h3 class="text-lg font-semibold text-amber-500 mb-2">Categories</h3>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Movies</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">TV Shows</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Originals</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Kids & Family</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Documentaries</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Sport Events</a>
</div>
<!-- Section 2: Explore -->
<div class="flex flex-col space-y-4">
<h3 class="text-lg font-semibold text-amber-500 mb-2">Explore</h3>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Trending Now</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">New Releases</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Coming Soon</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Browse by Genre</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Watchlist</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Top 10</a>
</div>
<!-- Section 3: Account & Support -->
<div class="flex flex-col space-y-4">
<h3 class="text-lg font-semibold text-amber-500 mb-2">Account & Support</h3>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">My Account</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Help Center</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">FAQ</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Contact Us</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Manage Devices</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Privacy Settings</a>
</div>
<!-- Section 4: Company & Legal -->
<div class="flex flex-col space-y-4">
<h3 class="text-lg font-semibold text-amber-500 mb-2">Company & Legal</h3>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">About Us</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Careers</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Cookie Settings</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Investors</a>
</div>
</div>
<hr class="border-gray-700 my-10">
<!-- Footer Bottom -->
<div class="max-w-7xl mx-auto text-center md:flex md:justify-between md:items-center text-sm text-gray-500">
<div class="mb-4 md:mb-0">
© 2023 EntertainmentCo. All rights reserved.
</div>
<div class="flex justify-center space-x-6">
<a href="#" class="hover:text-amber-300 transition duration-300">Facebook</a>
<a href="#" class="hover:text-amber-300 transition duration-300">Twitter</a>
<a href="#" class="hover:text-amber-300 transition duration-300">Instagram</a>
<a href="#" class="hover:text-amber-300 transition duration-300">YouTube</a>
</div>
</div>
</div>Composants associés
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.
Plan du site - Finance Banque
Un composant de sitemap simple et réactif pour les interfaces finance/banque, doté d’une interface utilisateur en mode sombre avec des tons sépia/bruns. Optimisé pour les ordinateurs de bureau, les tablettes et les mobiles, avec une prise en charge complète du mode sombre.
Composant de plan du site
Un composant de plan de site réactif conçu selon les principes de Material Design et optimisé pour le commerce électronique, avec des couleurs pastel et la prise en charge du mode sombre.