Composants Pied de page Composant de pied de page

Composant de pied de page

Un composant de pied de page conçu dans un style skeuomorphe avec une palette de couleurs triadique et une complexité modérée, adapté à une mise en page Blog/Contenu.

Aperçu

HTML Code

<footer class="bg-gray-800 text-gray-100 p-6 dark:bg-gray-900">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex flex-col mb-4">
            <h2 class="text-lg font-semibold mb-2">About Us</h2>
            <p class="text-sm">We are passionate about sharing knowledge through engaging content. Explore our blog to learn more.</p>
        </div>
        <div class="flex mb-4">
            <img src="https://picsum.photos/50/50?random=1" alt="Random Image" class="rounded-full mr-2">
            <div class="flex flex-col">
                <span class="font-semibold">Author Name</span>
                <span class="text-xs text-gray-400">Author Bio Preview</span>
            </div>
        </div>
        <div class="flex flex-col mb-4">
            <h2 class="text-lg font-semibold mb-2">Follow Us</h2>
            <div class="flex space-x-4">
                <a href="#" class="p-2 rounded-full bg-blue-500 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
                    <img src="https://picsum.photos/20/20?random=2" alt="Social Icon" class="w-full h-full">
                </a>
                <a href="#" class="p-2 rounded-full bg-pink-500 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-500">
                    <img src="https://picsum.photos/20/20?random=3" alt="Social Icon" class="w-full h-full">
                </a>
                <a href="#" class="p-2 rounded-full bg-green-500 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500">
                    <img src="https://picsum.photos/20/20?random=4" alt="Social Icon" class="w-full h-full">
                </a>
            </div>
        </div>
    </div>
    <div class="text-center mt-6 border-t border-gray-700 pt-4">
        <p class="text-xs">&copy; 2023 Blog Name. All rights reserved.</p>
    </div>
</footer>

Composants associés

Pied de page Composant Pied de page

Un composant de pied de page simple avec un design Skeuomorphism subtil, utilisant une palette de couleurs analogue. Il comprend un avis de droit d’auteur, quelques liens de navigation et des icônes de médias sociaux. Le design est réactif et prend en charge le mode sombre.

Ouvrir

Portfolio-Minimaliste-Triadique-Complexe-Footer

Un pied de page complexe de style minimaliste pour un site Web de portfolio, utilisant une palette de couleurs triadique. Comprend des liens de navigation, des icônes de médias sociaux, des droits d’auteur et un appel à l’action pour le contact, avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir

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.

Ouvrir