Piè di pagina Componente Piè di pagina
Un semplice componente del piè di pagina con un sottile design di scheumorfismo, che utilizza una combinazione di colori analoga. Include un avviso di copyright, alcuni link di navigazione e icone dei social media. Il design è reattivo e supporta la modalità oscura.
Codice HTML
<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>Componenti correlati
Industrial_Candy_Footer_Component
Un componente a piè di pagina reattivo per una piattaforma di forum/community, caratterizzato da un'estetica "industriale" con accenti di colore "caramelle/dolci". Include link di navigazione, icone dei social media, copyright e iscrizione alla newsletter, con supporto completo per la modalità scura.
Luxury_Pastel_Government_Footer
Un componente piè di pagina elegante e reattivo per siti Web governativi o di servizio pubblico, caratterizzato da un design lussuoso con una combinazione di colori pastello e supporto per la modalità scura. Include link di navigazione, informazioni di contatto, social media e copyright.
Componente piè di pagina Glassmorphism
Un componente del piè di pagina reattivo con uno stile glassmorphism con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e supporta un tema scuro.