Composant de navigation en pied de page
Composant de navigation de pied de page complexe et réactif conçu pour une place de marché, doté d’une interface utilisateur en mode sombre avec une palette de couleurs noir et blanc et une couleur d’accentuation vive (indigo). Comprend plusieurs sections pour la navigation, les informations sur l’entreprise, les liens juridiques et les médias sociaux, avec une prise en charge complète du mode sombre.
HTML Code
<footer class="bg-gray-950 text-gray-300 py-12 dark:bg-black dark:text-gray-400">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-y-10 gap-x-8">
<!-- Company Info & Logo -->
<div class="col-span-1 lg:col-span-1">
<div class="flex items-center space-x-2 mb-4">
<svg class="h-8 w-8 text-indigo-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="text-2xl font-bold text-white dark:text-white">Marketify</span>
</div>
<p class="text-sm mb-4">The ultimate marketplace for unique items and services around the globe.</p>
<h3 class="text-lg font-semibold text-white dark:text-white mb-3">Subscribe to our Newsletter</h3>
<form class="flex rounded-md shadow-sm">
<input type="email" placeholder="Your email" aria-label="Your email" class="flex-1 min-w-0 block w-full px-4 py-2 rounded-l-md border-0 bg-gray-800 text-white placeholder-gray-500 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-900 dark:text-gray-300 dark:placeholder-gray-600">
<button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out">
Go
</button>
</form>
</div>
<!-- Quick Links -->
<div class="col-span-1">
<h3 class="text-lg font-semibold text-white dark:text-white mb-4">Quick Links</h3>
<ul class="space-y-3">
<li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Home</a></li>
<li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Browse Categories</a></li>
<li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">How It Works</a></li>
<li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Seller Program</a></li>
<li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Buyer's Guide</a></li>
</ul>
</div>
<!-- Support & Help -->
<div class="col-span-1">
<h3 class="text-lg font-semibold text-white dark:text-white mb-4">Support</h3>
<ul class="space-y-3">
<li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Help Center</a></li>
<li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Contact Us</a></li>
<li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Payments</a></li>
<li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Shipping</a></li>
<li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Returns</a></li>
</ul>
</div>
<!-- Legal & Social -->
<div class="col-span-1">
<h3 class="text-lg font-semibold text-white dark:text-white mb-4">Legal & Social</h3>
<ul class="space-y-3 mb-6">
<li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Terms of Service</a></li>
<li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Privacy Policy</a></li>
<li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Cookie Policy</a></li>
</ul>
<h3 class="text-lg font-semibold text-white dark:text-white mb-3">Follow Us</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="Facebook">
<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.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="Twitter">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c-.03.012-.062.022-.094.031a15.753 15.753 0 01-4.87-1.1c-.6-.248-1.077-.736-1.393-1.314-.316-.578-.46-1.229-.425-1.898L.54 12.012c0-.528.106-1.05.316-1.547.21-.497.51-.946.883-1.319a.75.75 0 011.06 1.06c-.19.19-.347.4-.469.626s-.208.468-.231.716c-.024.248-.005.5-.028.747l-.145 1.54c-.035.352-.027.707.022 1.056.05.349.128.69.231 1.018.104.328.23.64.38.932.15.292.316.566.495.823.18.257.369.497.567.72.198.223.407.43.626.626.22.196.447.375.68.536.234.161.474.303.719.424.246.12.498.21.756.264.258.054.52.062.783.024.263-.038.52-.124.767-.257.247-.133.476-.301.688-.504.212-.203.403-.435.572-.68.169-.244.316-.508.438-.79.122-.284.21-.581.264-.889.054-.308.062-.619.024-.926.004-.047-.008-.094-.031-.14L18.423 7.376c-.053-.195-.124-.384-.213-.564-.09-.18-.198-.35-.32-.507-.122-.158-.258-.302-.408-.433-.15-.13-.309-.247-.477-.35-.168-.104-.345-.195-.53-.274-.186-.079-.379-.145-.58-.198-.201-.053-.408-.09-.62-.108-.212-.018-.426-.01-.64.024-.214.034-.424.088-.629.162-.206.074-.4.167-.584.278-.184.11-.357.234-.518.37A15.422 15.422 0 005.817 9.87c-.156.16-.31.332-.46.514-.15.182-.294.376-.432.58-.138.204-.268.419-.389.643-.121.224-.23.457-.324.697-.094.24-.173.486-.237.737-.064.25-.113.5-.147.75-.035.25-.048.5-.038.75s.035.5.094.75a.75.75 0 01-1.463.385l-.014-.044c-.035-.118-.052-.236-.052-.355 0-.203.023-.406.07-.607.046-.2.11-.397.19-.59s.174-.383.277-.565.215-.35.337-.506.26-.302.398-.444.281-.27.429-.39.298-.21.456-.296c.1 L20.25 4.754c.264-.264.55-.498.857-.704.307-.205.63-.377.968-.517.337-.14.686-.245 1.045-.315.359-.07.72-.093 1.082-.068.36.024.717.1.1.75l.135.044c.484.156.953.38 1.402.666.449.287.873.64 1.267 1.055.394.416.758.895 1.08 1.433.323.538.604 1.134.843 1.788.239.654.434 1.353.582 2.09c.147.738.24 1.51.277 2.304l.004.148c.02.483.013.97-.021 1.455-.035.485-.1.968-.194 1.442-.095.474-.221.939-.378 1.392-.158.453-.346.892-.565 1.315-.22.423-.47.828-.753 1.21-.283.381-.598.736-.944 1.066-.347.33-.726.632-1.137.896-.41.264-.845.49-1.299.678-.454.188-.92.338-1.397.449-.477.11-.964.183-1.456.216-.492.033-.984.024-1.472-.027-.488-.05-.968-.142-1.437-.272-.47-.13-.927-.3-1.365-.506-.438-.207-.853-.448-1.246-.723-.393-.275-.76-.583-1.097-.923L8.29 20.25z" />
</svg>
</a>
<a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="Instagram">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2c2.716 0 3.056.012 4.122.06c.915.042 1.54.2 2.14.444.6.242 1.063.597 1.57.513a.75.75 0 01.513.513c-.084.507.271 1.007.444 1.607.244.6.402 1.225.444 2.14.048 1.066.06 1.406.06 4.122s-.012 3.056-.06 4.122c-.042.915-.2 1.54-.444 2.14-.242.6-.597 1.063-.513 1.57a.75.75 0 01-.513.513c-.507-.084-1.007.271-1.607.444-.6.244-1.225.402-2.14.444-1.066.048-1.406.06-4.122.06s-3.056-.012-4.122-.06c-.915-.042-1.54-.2-2.14-.444-.6-.242-1.063-.597-1.57-.513a.75.75 0 01-.513-.513c.084-.507-.271-1.007-.444-1.607-.244-.6-.402-1.225-.444-2.14-.048-1.066-.06-1.406-.06-4.122s.012-3.056.06-4.122c.042-.915.2-1.54.444-2.14.242-.6.597-1.063.513-1.57a.75.75 0 01.513-.513c.507.084 1.007-.271 1.607-.444.6-.244 1.225-.402 2.14-.444C8.944 2.012 9.284 2 12 2zm0 3.635l.019.001c.74.004 1.01.018 1.8.055.79.037 1.34.168 1.77.348.43.18.73.4.92.59.19.19.41.49.59.92.18.43.31.98.348 1.77.037.79.051 1.06.055 1.8l.001.019v.038c0 .74-.004 1.01-.055 1.8-.037.79-.168 1.34-.348 1.77-.18.43-.4.73-.59.92-.19.19-.49.41-.92.59-.43.18-.98.31-1.77.348-.79.037-1.06.051-1.8.055l-.019.001h-.038c-.74 0-1.01-.004-1.8-.055-.79-.037-1.34-.168-1.77-.348-.43-.18-.73-.4-.92-.59-.19-.19-.41-.49-.59-.92-.18-.43-.31-.98-.348-1.77-.037-.79-.051-1.06-.055-1.8l-.001-.019v-.038c0-.74.004-1.01.055-1.8.037-.79.168-1.34.348-1.77.18-.43.4-.73.59-.92.19-.19.49-.41.92-.59.43-.18.98-.31 1.77-.348.79-.037 1.06-.051 1.8-.055l.019-.001h.038zM12 7a5 5 0 100 10 5 5 0 000-10zm0 2.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm6.5-.25a1.25 1.25 0 11-2.5 0 1.25 1.2.9 0 012.5 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="LinkedIn">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="YouTube">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19.615 3.1c.334-.143.722-.224 1.127-.224.977 0 1.905.39 2.593 1.082l.006.006c.697.697 1.082 1.63 1.082 2.593v8.835c0 .977-.39 1.905-1.082 2.593l-.006.006a3.67 3.67 0 01-2.593 1.082c-.413 0-.806-.082-1.144-.225L10.375 22.8c-.896.385-1.84.453-2.71.215-.87-.238-1.57-.75-1.996-1.42s-.652-1.517-.652-2.457V4.07c0-.94.218-1.83.652-2.457s1.126-1.182 1.996-1.42c.87-.238 1.814-.17 2.71.215L19.615 3.1zm-8.87 5.753l.008 1.722c.002.046.005.092.008.138.003.046.006.092.009.138l.004.062c.01.15.025.298.042.443.017.145.038.286.062.427.024.14.053.277.085.411.032.134.067.264.106.39.039.126.082.249.129.367.047.119.098.234.153.344.055.11.114.215.176.315.063.1.13.193.201.277.142.169.308.318.498.448.19.13.398.24.623.33.225.09.467.16.72.208.253.048.514.075.779.08.265.006.53-.004.79-.03.26-.027.514-.07.76-.13.245-.06.48-.138.705-.236.225-.098.44-.213.64-.34.2-.127.387-.268.56-.423.173-.156.33-.32.47-.492.278-.344.52-.714.735-1.112.215-.398.39-.82.525-1.265.136-.445.234-.908.297-1.385.063-.477.09-.962.08-1.45L20.47 7.64c-.053-.195-.124-.384-.213-.564-.09-.18-.198-.35-.32-.507-.122-.158-.258-.302-.408-.433-.15-.13-.309-.247-.477-.35-.168-.104-.345-.195-.53-.274-.186-.079-.379-.145-.58-.198-.201-.053-.408-.09-.62-.108-.212-.018-.426-.01-.64.024-.214.034-.424.088-.629.162-.206.074-.4.167-.584.278-.184.11-.357.234-.518.37l-.014.013c-.264.264-.55.498-.857.704-.307.205-.63.377-.968.517-.337.14-.686.245-1.045.315-.359.07-.72.093-1.082.068-.36-.024-.717-.1-.75-.75L3.528 7.376c-.053-.195-.124-.384-.213-.564-.09-.18-.198-.35-.32-.507-.122-.158-.258-.302-.408-.433z" />
</svg>
</a>
</div>
</div>
</div>
<div class="mt-12 pt-8 border-t border-gray-800 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-500">
© <span id="current-year"></span> Marketify. All rights reserved.
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>
</div>
</div>
</footer>Composants associés
Brutalist_Pastel_News_Footer
Il s’agit d’un composant complexe de navigation de pied de page de style brutaliste pour les sites d’actualités et de journalisme, avec des couleurs pastel, un contraste élevé et des mises en page inhabituelles. Il est entièrement réactif et prend en charge le mode sombre.
Industrial_Rainbow_Footer_Navigation
Un composant de navigation en pied de page simple et réactif avec une esthétique industrielle, des éléments exposés et un arrière-plan dégradé arc-en-ciel multicolore, conçu pour les interfaces finance/banque. Inclut la prise en charge du mode sombre.
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.