Dissolvenza in entrata del piè di pagina 3D
Piè di pagina reattivo con elementi di design 3D e supporto per la modalità scura
Codice HTML
<footer class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-10">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-between items-center">
<div class="w-full md:w-1/3 mb-6 md:mb-0">
<h3 class="text-xl font-bold mb-3">3D Footer</h3>
<p class="text-sm">Explore the depths of our amazing footer. Designed with a touch of 3D for an immersive experience.</p>
</div>
<div class="w-full md:w-1/3 mb-6 md:mb-0">
<h4 class="text-lg font-semibold mb-3">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Home</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Services</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">About Us</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Contact</a></li>
</ul>
</div>
<div class="w-full md:w-1/3">
<h4 class="text-lg font-semibold mb-3">Contact Us</h4>
<p class="text-sm">Email: [email protected]</p>
<p class="text-sm">Phone: +1 234 567 890</p>
<div class="flex mt-4 space-x-4">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
</div>
<div class="mt-8 text-center text-sm">
<p>© 2023 3D Footer. All rights reserved.</p>
</div>
</div>
</footer>Componenti correlati
Componente piè di pagina
Un semplice componente del piè di pagina reattivo progettato in uno stile retrò/vintage con un supporto per il tema scuro, utilizzando Tailwind CSS. Presenta un layout di base adatto a siti Web aziendali/aziendali.
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.
Componente piè di pagina
Un componente Piè di pagina progettato in uno stile scheumorfico con una combinazione di colori triadica e complessità moderata, adatto per un layout Blog/Contenuto.