Componente di navigazione del piè di pagina
Un componente di navigazione a piè di pagina reattivo con un tema scuro, adatto per un sito web portfolio. Presenta una combinazione di colori monocromatici con diverse sfumature di un singolo colore, una complessità media con alcune funzionalità interattive e utilizza Tailwind CSS per lo stile, incluso il supporto della modalità oscura con il prefisso dark:.
Codice HTML
<footer class="bg-gray-900 text-white dark:bg-gray-900">
<div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
<div class="mb-8 flex justify-center">
<a class="text-teal-400 dark:text-teal-300" href="/">
<span class="sr-only">Home</span>
<span class="text-2xl font-bold">YourPortfolio</span>
</a>
</div>
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
<div>
<p class="text-center text-base text-gray-400 dark:text-gray-500 lg:text-left">
Showcasing innovative projects and creative solutions.
</p>
<p class="mt-4 text-center text-base text-gray-400 dark:text-gray-500 lg:text-left">
© 2024 YourPortfolio. All rights reserved.
</p>
</div>
<div class="col-span-2">
<div class="grid grid-cols-1 gap-8 text-center sm:grid-cols-2 lg:grid-cols-3">
<div>
<p class="font-medium text-white dark:text-gray-200">Services</p>
<nav class="mt-4 flex flex-col space-y-2">
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Web Development</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">UI/UX Design</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Digital Marketing</a>
</nav>
</div>
<div>
<p class="font-medium text-white dark:text-gray-200">Company</p>
<nav class="mt-4 flex flex-col space-y-2">
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">About Us</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Careers</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Blog</a>
</nav>
</div>
<div>
<p class="font-medium text-white dark:text-gray-200">Contact</p>
<nav class="mt-4 flex flex-col space-y-2">
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Get in Touch</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Support</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">FAQ</a>
</nav>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-gray-800 pt-8 sm:items-center sm:justify-between sm:flex">
<p class="text-center text-xs text-gray-500 dark:text-gray-600 sm:text-left">
Designed and developed with ❤️
</p>
<ul class="mt-4 flex justify-center gap-6 sm:mt-0 lg:justify-end">
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Facebook</span>
<svg class="h-6 w-6" fill="currentColor" 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.506 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.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Instagram</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 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.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 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.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 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.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Dribbble</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 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.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</footer>Componenti correlati
Componente di navigazione del piè di pagina
Un componente di navigazione a piè di pagina reattivo progettato per un cruscotto, caratterizzato da uno stile Skeuomorphic con colori vivaci. Include collegamenti di navigazione, un logo e icone dei social media, con supporto completo della modalità oscura utilizzando Tailwind CSS. Il design mira a una complessità moderata con effetti di hover interattivi.
Componente di navigazione del piè di pagina artistico dell'acquerello
Un componente di navigazione a piè di pagina complesso e reattivo progettato per siti Web senza scopo di lucro/di beneficenza, caratterizzato da uno stile artistico ad acquerello con toni tenui, seppia/marrone e supporto per la modalità scura. Include più link di navigazione, icone dei social media e una sezione sul copyright.
Componente di navigazione del piè di pagina
Componente di navigazione a piè di pagina con design del neumorfismo, combinazione di colori monocromatici, complessità complessa e scopo dei social media. Design reattivo con supporto per temi scuri.