Composant de navigation en pied de page
Un composant de navigation en pied de page simple et réactif avec une palette de couleurs chaudes inspirées du coucher de soleil, conçu pour les marques de mode/beauté. Dispose d’effets de survol subtils et d’une prise en charge du mode sombre.
HTML Code
<footer class="bg-gradient-to-r from-orange-400 to-red-500 py-8 dark:from-gray-900 dark:to-gray-800 text-white font-sans">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
<div class="mb-4 md:mb-0">
<h3 class="text-2xl font-bold mb-2 tracking-wide text-yellow-100 dark:text-gray-100">Luminous Threads</h3>
<p class="text-orange-100 dark:text-gray-400 text-sm">© 2023 All rights reserved.</p>
</div>
<nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2 mb-4 md:mb-0">
<a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Shop</a>
<a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Collections</a>
<a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">About Us</a>
<a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Contact</a>
<a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Privacy Policy</a>
</nav>
<div class="flex gap-4">
<a href="#" aria-label="Facebook" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-transform duration-300 transform hover:rotate-6">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c5.967-.759 10.5-5.623 10.5-11z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-label="Instagram" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-transform duration-300 transform hover:rotate-6">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.715.056.815.034 1.488.17 2.071.467.579.289.979.629 1.324.973.344.344.684.744.973 1.324.297.583.433 1.256.467 2.07.043.93.056 1.286.056 3.715s-.013 2.784-.056 3.715c-.034.814-.17 1.488-.467 2.071-.289.579-.629.979-.973 1.324-.344.344-.744.684-1.324.973-.583.297-1.256.433-2.07.467-.93.043-1.286.056-3.715.056s-2.784-.013-3.715-.056c-.814-.034-1.488-.17-2.071-.467-.579-.289-.979-.629-1.324-.973-.344-.344-.684-.744-.973-1.324-.297-.583-.433-1.256-.467-2.07-.043-.93-.056-1.286-.056-3.715s.013-2.784.056-3.715c.034-.814.17-1.488.467-2.071.289-.579.629-.979.973-1.324.344-.344.744-.684 1.324-.973.583-.297 1.256-.433 2.07-.467C9.531 2.013 9.886 2 12.315 2zm0 2.18c-2.793 0-3.138.014-4.144.058-.707.03-1.127.135-1.424.28-.277.137-.48.243-.68.443-.199.2-.306.402-.443.68-.145.297-.25.717-.28 1.424-.044 1.006-.058 1.351-.058 4.144s.014 3.138.058 4.144c.03.707.135 1.127.28 1.424.137.277.243.48.443.68.2.199.402.306.68.443.297.145.717.25 1.424.28 1.006.044 1.351.058 4.144.058s3.138-.014 4.144-.058c.707-.03 1.127-.135 1.424-.28.277-.137.48-.243.68-.443.199-.2.306-.402.443-.68.145-.297.25-.717.28-1.424.044-1.006.058-1.351.058-4.144s-.014-3.138-.058-4.144c-.03-.707-.135-1.127-.28-1.424-.137-.277-.243-.48-.443-.68-.199-.2-.402-.306-.68-.443-.297-.145-.717-.25-1.424-.28-1.006-.044-1.351-.058-4.144-.058zm0 3.655c-2.464 0-4.475 2.01-4.475 4.475s2.01 4.475 4.475 4.475 4.475-2.01 4.475-4.475-2.01-4.475-4.475-4.475zM12.315 15.6c-1.815 0-3.288-1.472-3.288-3.288s1.472-3.288 3.288-3.288 3.288 1.472 3.288 3.288-1.472 3.288-3.288 3.288zm5.237-.962a1.21 1.21 0 011.088-1.088c.45-.07.96-.118 1.488-.135.344-.01.59-.018.736.002.392.052.793.18 1.161.356.368.175.688.42 1.22.955.532.532.775.852.955 1.22.175.368.304.769.356 1.161.018.146.01.392.002.736-.017.528-.065 1.038-.135 1.488-.103.68-.225 1.1-.383 1.341-.157.24-.351.4-.567.567-.216.216-.373.41-.567.567-.24.157-.661.279-1.341.383-.45.07-.96.118-1.488.135-.344.01-.59.018-.736-.002-.392-.052-.793-.18-1.161-.356-.368-.175-.688-.42-1.22-.955-.532-.532-.775-.852-.955-1.22-.175-.368-.304-.769-.356-1.161-.018-.146-.01-.392-.002-.736.017-.528.065-1.038.135-1.488.103-.68.225-1.1.383-1.341.157-.24.351-.4.567-.567zm-.432-8.583a.965.965 0 01.965-.965.965.965 0 01.965.965.965.965 0 01-.965.965.965.965 0 01-.965-.965z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
</footer>Composants associés
Composant de navigation en pied de page
Il s’agit d’un composant de navigation de pied de page simple conçu selon les principes de conception matérielle et une palette de couleurs analogue pour les sites Web d’entreprise. Il prend en charge le mode sombre et est réactif.
NéonGlowFooterNavigation
Un composant de navigation de pied de page réactif avec des effets de néon/lueur, conçu pour les plateformes musicales/audio. Dispose d’une palette de couleurs noir et blanc avec une couleur d’accentuation vibrante, la prise en charge du mode sombre et le HTML sémantique.
Composant de navigation en pied de page
Un composant de navigation de pied de page simple conçu dans le style Glassmorphism avec une palette de couleurs monochromatique. Il est réactif, prend en charge le mode sombre et convient aux sites Web de commerce électronique.