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.
HTML Code
<footer class="bg-gradient-to-br from-stone-200 to-stone-400 text-stone-800 p-6 shadow-2xl dark:from-stone-800 dark:to-stone-900 dark:text-stone-200">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0 text-sm">
<p>© 2023 BlogSphere. All rights reserved.</p>
</div>
<nav class="mb-4 md:mb-0">
<ul class="flex space-x-6 text-sm">
<li><a href="#" class="hover:text-stone-600 dark:hover:text-stone-400 transition duration-300">Privacy Policy</a></li>
<li><a href="#" class="hover:text-stone-600 dark:hover:text-stone-400 transition duration-300">Terms of Service</a></li>
<li><a href="#" class="hover:text-stone-600 dark:hover:text-stone-400 transition duration-300">Contact Us</a></li>
</ul>
</nav>
<div class="flex space-x-4">
<a href="#" class="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition duration-300">
<svg fill="currentColor" class="w-5 h-5" 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.505 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-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition duration-300">
<svg fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.317 2.031c2.14 0 2.457.009 3.313.048 1.547.067 2.46.368 3.018.599 1.258.513 2.072 1.002 2.65 1.597.595.578 1.085 1.392 1.597 2.65.23.558.532 1.47.599 3.017.039.856.048 1.173.048 3.312 0 2.14-.009 2.457-.048 3.313-.067 1.547-.368 2.46-.599 3.018-.513 1.258-1.002 2.072-1.597 2.65-.578.595-1.392 1.085-2.65 1.597-.558.23-1.47.532-3.017.599-.856.039-1.173.048-3.312.048-2.14 0-2.457-.009-3.313-.048-1.547-.067-2.46-.368-3.018-.599-1.258-.513-2.072-1.002-2.65-1.597-.595-.578-1.085-1.392-1.597-2.65-.23-.558-.532-1.47-.599-3.017-.039-.856-.048-1.173-.048-3.312 0-2.14.009-2.457.048-3.313.067-1.547.368-2.46.599-3.018.513-1.258 1.002-2.072 1.597-2.65.578-.595 1.392-1.085 2.65-1.597.558-.23 1.47-.532 3.017-.599.856-.039 1.173-.048 3.312-.048ZM12 4.195c-2.466 0-2.736.01-3.692.051-1.433.062-2.3.344-2.805.547-.88.375-1.517.653-2.062 1.252-.527.575-.805 1.212-1.18 2.062-.203.504-.485 1.372-.547 2.805-.041.956-.051 1.226-.051 3.692 0 2.466.01 2.736.051 3.692.062 1.433.344 2.3.547 2.805.375.88.653 1.517 1.252 2.062.575.527 1.212.805 2.062 1.18.504.203 1.372.485 2.805.547.956.041 1.226.051 3.692.051 2.466 0 2.736-.01 3.692-.051 1.433-.062 2.3-.344 2.805-.547.88-.375 1.517-.653 2.062-1.252.527-.575.805-1.212 1.18-2.062.203-.504.485-1.372.547-2.805.041-.956.051-1.226.051-3.692 0-2.466-.01-2.736-.051-3.692-.062-1.433-.344-2.3-.547-2.805-.375-.88-.653-1.517-1.252-2.062-.575-.527-1.212-.805-2.062-1.18-.504-.203-1.372-.485-2.805-.547-.956-.041-1.226-.051-3.692-.051ZM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5Zm0 8.195c-1.761 0-3.195-1.434-3.195-3.195S10.239 8.805 12 8.805s3.195 1.434 3.195 3.195-1.434 3.195-3.195 3.195Zm6.398-9.014c-.655 0-1.186.531-1.186 1.186S17.743 7.367 18.398 7.367s1.186-.531 1.186-1.186-.531-1.186-1.186-1.186Z" />
</svg>
</a>
<a href="#" class="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition duration-300">
<svg fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.296 2.762 7.933 6.603 9.243.484.088.662-.209.662-.463 0-.228-.009-.834-.014-1.636-2.688.586-3.254-1.297-3.254-1.297-.44-.817-1.07-1.033-1.07-1.033-.876-.597.066-.584.066-.584.969.068 1.479.995 1.479.995.86 1.474 2.25.991 2.793.758.086-.593.336-.991.613-1.22-2.144-.243-4.394-1.074-4.394-4.784 0-1.056.377-1.922 1-2.6-.1-.243-.435-1.291.096-2.564 0 0 .82-1.393 2.7-.54.78.199 1.608.298 2.435.301.827-.003 1.655-.102 2.435-.301 1.878-.853 2.7-.54 2.7-.54.531 1.273.196 2.32.096 2.564.623.678 1 1.544 1 2.6 0 3.719-2.253 4.535-4.398 4.778.347.298.654.887.654 1.787 0 1.291-.012 2.33-.012 2.645 0 .256.177.555.667.46C19.238 19.927 22 16.29 22 12c0-5.523-4.477-10-10-10z" />
</svg>
</a>
</div>
</div>
</footer>Composants associés
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.
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.
3D analogue simple pied de blog
Composant de pied de page réactif avec prise en charge du thème sombre à l’aide de Tailwind CSS. Le pied de page a un design 3D simple avec des couleurs analogues. Il est optimisé pour les sites de blog/contenu.