Footer Navigation Component
A responsive footer navigation component with a glassmorphism style featuring frosted glass-like translucent elements and blur effects. It supports dark mode and includes placeholder images.
HTML Code
<footer class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-900 dark:bg-opacity-30 py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
<span class="text-lg font-bold text-gray-800 dark:text-gray-200">Your Company</span>
</div>
<nav class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Services</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Contact</a>
</nav>
</div>
<div class="mt-6 text-center">
<p class="text-gray-500 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
</div>
</div>
</footer>
Related Components
Retro_Earth_Tone_Portfolio_Footer
A responsive, retro-themed footer navigation component for a portfolio website, featuring earth tones and dark mode support. Designed with 80s/90s aesthetics in mind, offering a nostalgic feel.
3D_Music_Footer_Navigation
A complex 3D-inspired footer navigation component for music/audio platforms, featuring warm neutrals and full responsiveness with dark mode support.