Composants Navigation dans le pied de page Composant de navigation en pied de page

Composant de navigation en pied de page

Un composant de navigation en pied de page conçu dans un style rétro/vintage inspiré de l’esthétique des années 80 et 90. Il dispose d’un support de thème sombre et est entièrement réactif.

Aperçu

HTML Code

<footer class="bg-gray-800 text-white py-8 mt-10">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="text-center md:text-left">
            <h2 class="text-2xl font-bold mb-2">Stay Connected!</h2>
            <p>Follow us on our social media channels:</p>
            <div class="flex justify-center md:justify-start mt-4 space-x-4">
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full">
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full">
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=3" alt="Instagram" class="rounded-full">
                </a>
            </div>
        </div>
        <nav class="mt-6 md:mt-0">
            <ul class="flex flex-col md:flex-row space-x-4">
                <li><a href="#" class="hover:text-gray-400 transition">Home</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">About</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">Services</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="text-center mt-6">
        <p class="text-gray-500 text-sm">&copy; 2023 Your Company. All rights reserved.</p>
    </div>
</footer>

Composants associés

Composant de navigation en pied de page

Un composant de navigation de pied de page réactif avec un style glassmorphism avec des éléments translucides givrés ressemblant à du verre et des effets de flou. Il prend en charge le mode sombre et inclut des images de repère d’emplacement.

Ouvrir

Navigation minimaliste dans le pied de page

Un composant de navigation en pied de page minimaliste pour les blogs avec un design réactif et une prise en charge du mode sombre.

Ouvrir

Composant de navigation en pied de page

Un composant de navigation en pied de page réactif conçu avec un style skeuomorphe, avec des éléments interactifs adaptés au commerce électronique. Il suit un schéma de couleurs triadique et prend en charge le mode sombre.

Ouvrir