Composant de navigation en pied de page
Composant de navigation de pied de page inspiré de l’agriculture et de la nature pour une place de marché, avec des lignes fluides, une palette de couleurs analogues, plusieurs sections et un design réactif avec prise en charge du mode sombre.
HTML Code
<footer class="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-gray-950 dark:to-emerald-950 text-gray-800 dark:text-gray-200 py-12 md:py-16 overflow-hidden relative">
<div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20 dark:opacity-10">
<svg class="w-full h-full" viewBox="0 0 1000 300" preserveAspectRatio="xMidYMid slice">
<path fill="currentColor" d="M0,100 C150,200 350,0 500,100 S850,200 1000,100 L1000,300 L0,300 Z" />
</svg>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
<div class="flex flex-col items-start lg:col-span-2">
<a href="#" class="text-3xl font-bold text-teal-600 dark:text-emerald-400 mb-4 tracking-tight font-serif">
NatureNest
</a>
<p class="text-sm leading-relaxed mb-6 max-w-sm">
Discover unique treasures and artisan crafts from around the globe, with a focus on sustainable and handmade products.
</p>
<div class="flex space-x-4">
<a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
<svg class="w-6 h-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.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
<svg class="w-6 h-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 8.96 0 10.154.044 10.154.044s.927-.005 3.71-.161c2.83-.15 4.093-1.077 4.093-1.077s.9-.785 1.554-2.585c.654-1.8.654-2.33 1.134-4.885.48-2.555.444-4.07 0-5.59-1.2-4.032-4.757-5.504-4.757-5.504s-.897-.978-2.066-1.554c-1.169-.576-2.504-.576-2.617-.576-2.065 0-3.328.086-4.524.195-.081-.005-2.06-.017-3.715-.056C7.575-2.006 7.227-1.993 4.797-1.993c-2.43 0-2.784-.013-3.715-.056C-7.868-2.006-8.243-2.006-8.243-2.006s-.927.005-3.71.161c-2.83.15-4.093 1.077-4.093 1.077s-.9.785-1.554 2.585c-.654 1.8-.654 2.33-1.134 4.885-.48 2.555-.444 4.07 0 5.59 1.2 4.032 4.757 5.504 4.757 5.504s-.897.978-2.066 1.554c-1.169.576-2.504.576-2.617.576-2.065 0-3.328-.086-4.524-.195-.081.005-2.06.017-3.715.056C-.415 2.006.014 1.993 2.444 1.993c2.43 0 2.784.013 3.715.056C12.315 2 12.315 2 12.315 2z" />
</svg>
</a>
<a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.31c-.1.08-.22.1-.34.1-.12 0-.25-.02-.37-.08a.98.98 0 01-.7-.7-.99.99 0 010-.7c.07-.12.18-.22.3-.28.1-.06.21-.09.32-.09.11 0 .22.03.32.09.12.06.22.15.29.28.08.1.1.22.1.34 0 .12-.02.25-.08.37a.9.9 0 01-.28.3c-.07.06-.18.1-.3.1zM5 12h14v-2H5v2zm0-4h14V6H5v2zm0 8h14v-2H5v2z" />
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.23 2.636 7.85 6.305 9.245-.583-.243-1.077-.492-1.52-.772A.99.99 0 016 20.89c0-.447.18-.86.495-1.155.074-.069 1.157-1.18 1.157-1.18a.99.99 0 01.707-.293h.001c.266 0 .52.105.707.293l1.165 1.164a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365v.001c0 .138.055.267.152.365a.99.99 0 01.366.152l.353.354a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365a.99.99 0 01.152.365l.353.354a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365v.001c0 .138.055.267.152.365a.99.99 0 01.366.152l.353.354c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707a.99.99 0 01-1.414 0c-.39-.39-1.023-.39-1.414 0a.99.99 0 010 1.414l.707.707a.99.99 0 010 1.414c-.39.39-1.023.39-1.414 0a.99.99 0 010-1.414l-.707-.707a.99.99 0 01-1.414 0c-.39-.39-1.023-.39-1.414 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c.195.195.512.195.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707zM12 21a9 9 0 100-18 9 9 0 000 18z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Shop</h3>
<ul class="space-y-4">
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Handmade Crafts</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Organic Produce</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Garden & Home</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Wellness & Beauty</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Seasonal Collections</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Sell</h3>
<ul class="space-y-4">
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Start Selling</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Shop Setup</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Vendor Tools</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Community Guidelines</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Partner Program</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Help</h3>
<ul class="space-y-4">
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Contact Us</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">FAQs</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Shipping & Returns</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Privacy Policy</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Terms of Service</a></li>
</ul>
</div>
<div class="lg:col-span-1">
<h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Join Our Community</h3>
<p class="text-sm text-gray-700 dark:text-gray-300 mb-4">Subscribe to our newsletter for exclusive offers and updates.</p>
<form class="flex flex-col sm:flex-row gap-2">
<input type="email" placeholder="Your email address" aria-label="Your email address" class="flex-grow px-4 py-2 rounded-lg bg-white dark:bg-gray-800 border border-teal-200 dark:border-emerald-700 focus:ring-2 focus:ring-teal-400 dark:focus:ring-emerald-500 outline-none text-gray-800 dark:text-gray-200 text-sm">
<button type="submit" class="bg-teal-600 hover:bg-teal-700 dark:bg-emerald-600 dark:hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-lg shadow-md transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 dark:focus:ring-emerald-500 dark:focus:ring-offset-gray-950">
Subscribe
</button>
</form>
<div class="mt-8">
<h4 class="text-md font-semibold text-teal-700 dark:text-emerald-300 mb-3">Latest from our blog</h4>
<a href="#" class="flex items-center space-x-3 group">
<img src="https://picsum.photos/60/60?random=1" alt="Blog post thumbnail" class="w-12 h-12 rounded-lg object-cover border-2 border-teal-300 dark:border-emerald-600 group-hover:scale-105 transition-transform duration-200">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-teal-600 dark:group-hover:text-emerald-400 transition-colors duration-200">Crafting Sustainability: A Guide for Artisans</p>
<span class="text-xs text-gray-500 dark:text-gray-400">Oct 26, 2023</span>
</div>
</a>
</div>
</div>
</div>
<div class="border-t border-teal-200 dark:border-emerald-800 pt-8 mt-12 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">
© 2023 NatureNest. All rights reserved. Made with <span class="text-red-500" aria-label="Love">❤</span> for a better world.
</p>
</div>
</div>
</footer>Composants associés
Composant de navigation en pied de page
Composant de navigation en pied de page avec mode sombre et effets réactifs
Composant de navigation en pied de page
Un composant de navigation de pied de page réactif pour les tableaux de bord avec prise en charge du thème sombre, avec des micro-interactions sur les survols de liens à l’aide de couleurs triadiques et d’éléments complexes. Pas de JavaScript, seulement du HTML avec Tailwind CSS.
3D_Music_Footer_Navigation
Un composant complexe de navigation de pied de page inspiré de la 3D pour les plates-formes musicales/audio, avec des neutres chauds et une réactivité totale avec la prise en charge du mode sombre.