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 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
Composant de plan de site avec design minimaliste/plat, effets réactifs et prise en charge du thème sombre.
Composant de plan du site
Composant de plan de site réactif avec micro-interactions, schéma de couleurs monochromatiques, conception complexe, prise en charge du thème sombre et CSS Tailwind.