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
Bauhaus_Retro_News_Footer
Composant de navigation de pied de page complexe et réactif pour les sites d’actualités/journalisme, doté d’un design inspiré du Bauhaus avec des formes géométriques et une palette de couleurs rétro/vintage, y compris la prise en charge du mode sombre.
Composant de navigation en pied de page
Un composant de navigation de pied de page réactif et complexe de style Neumorphisme pour les sites Web d’entreprise utilisant un schéma de couleurs en niveaux de gris avec prise en charge du mode sombre. Pas de JavaScript.
Composant de navigation en pied de page
Un composant de navigation de pied de page réactif avec un thème sombre, adapté à un site web de portfolio. Il présente une palette de couleurs monochromatique avec différentes nuances d’une seule couleur, une complexité moyenne avec quelques fonctionnalités interactives, et utilise Tailwind CSS pour le style, y compris la prise en charge du mode sombre avec le préfixe dark :.