Componente de navegación de pie de página
Componente de navegación de pie de página con diseño de neumorfismo, combinación de colores monocromática, complejidad compleja y propósito de redes sociales. Diseño responsivo con soporte para temas oscuros.
Código HTML
<footer class="bg-gray-200 dark:bg-gray-800 py-8 px-4">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">About Us</h3>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et est in justo feugiat consectetur.</p>
</div>
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Services</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
</ul>
</div>
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Follow Us</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="mt-8 text-center text-gray-600 dark:text-gray-300">
© 2023 Your Company. All rights reserved.
</div>
<style>
.neumorphic-card {
background: #e0e0e0;
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .neumorphic-card {
background: #333333;
box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
}
</style>
</footer>
Componentes relacionados
Componente de navegación de pie de página
Un componente de navegación de pie de página receptivo diseñado para sitios web comerciales/corporativos en modo oscuro, con un esquema de color triádico y complejidad media con funciones interactivas.
Componente de navegación de pie de página
Un componente de navegación de pie de página simple diseñado en un estilo brutalista con un esquema de color triádico para interfaces de redes sociales. Incluye enlaces e imágenes de avatar, con soporte para modo oscuro.
Componente de navegación de pie de página
Componente de navegación de pie de página orgánico/inspirado en la naturaleza para un mercado, con líneas fluidas, combinación de colores análoga, múltiples secciones y diseño receptivo con soporte para modo oscuro.