Composants Pied de page Composant de pied de page Glassmorphism

Composant de pied de page Glassmorphism

Il s’agit d’un composant de pied de page réactif avec un style glassmorphism, avec des éléments translucides semblables à du verre dépoli avec des effets de flou, et prend en charge un thème sombre.

Aperçu

HTML Code

<footer class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg p-6 dark:bg-gray-800 dark:bg-opacity-30 transition duration-300 ease-in-out">
    <div class="container mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-center md:text-left">
                <h2 class="text-xl font-bold text-gray-800 dark:text-white">Connect with Us</h2>
                <p class="text-gray-600 dark:text-gray-300">Stay updated with our latest news and offers.</p>
            </div>
            <div class="mt-4 md:mt-0">
                <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full " /></a>
                <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full " /></a>
                <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full " /></a>
            </div>
        </div>
        <div class="flex justify-center mt-4">
            <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Privacy Policy</a>
            <span class="text-gray-500 dark:text-gray-300">|</span>
            <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Terms of Service</a>
        </div>
    </div>
</footer>

Composants associés

Fondu de pied de page 3D

Pied de page réactif avec éléments de conception 3D et prise en charge du mode sombre

Ouvrir

Composant de pied de page

Un composant de pied de page rétro/vintage réactif pour un blog avec une palette de couleurs triadique et une prise en charge du thème sombre.

Ouvrir

Pied de page vibrant neumorphe

Un composant de pied de page simple et réactif conçu avec des principes de conception neumorphiques et des couleurs vives. Il présente un aspect doux et extrudé avec des ombres subtiles tout en conservant des couleurs d’accent à haute saturation. Le pied de page comprend des sections de base pour la navigation sur le site, les liens sociaux et les informations sur les droits d’auteur avec une prise en charge complète du mode sombre.

Ouvrir