Componente de navegación de pie de página
Un componente de navegación de pie de página de estilo neomorfismo complejo y receptivo para sitios web corporativos que utiliza un esquema de color en escala de grises con soporte para modo oscuro. Sin JavaScript.
Código HTML
<footer class="bg-gray-200 dark:bg-gray-800 py-10 px-5 neumorphism-light dark:neumorphism-dark">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-10">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">About Us</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Careers</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Press</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Products</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Features</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Pricing</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Integrations</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Status</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Resources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Documentation</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Support</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Guides</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">API Reference</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">123 Corporate Ave, Suite 456<br>Business City, BC 78901</p>
<p class="text-gray-600 dark:text-gray-400 mb-2">Email: [email protected]</p>
<p class="text-gray-600 dark:text-gray-400">Phone: (123) 456-7890</p>
</div>
</div>
<div class="mt-10 border-t border-gray-300 dark:border-gray-700 pt-8 text-center text-gray-600 dark:text-gray-400">
<p>© 2023 Your Company. All rights reserved.</p>
</div>
</footer>
<style>
.neumorphism-light {
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.neumorphism-dark {
box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 1a1a1a;
}
</style>Componentes relacionados
Retro_Earth_Tone_Portfolio_Footer
Un componente de navegación de pie de página receptivo y de temática retro para un sitio web de portafolio, con tonos tierra y compatibilidad con el modo oscuro. Diseñado pensando en la estética de los años 80/90, ofreciendo una sensación nostálgica.
Glassmorphism Escala de grises Healthcare Pie de página
Un componente de navegación de pie de página con capacidad de respuesta y estilo glassmorphism para aplicaciones médicas/de atención médica, que utiliza un esquema de color en escala de grises con soporte para modo oscuro. Cuenta con elementos translúcidos similares al vidrio esmerilado y enlaces interactivos.
Componente de navegación de pie de página
Un componente de navegación de pie de página simple y receptivo con una combinación de colores cálidos inspirados en la puesta de sol, diseñado para marcas de moda / belleza. Cuenta con sutiles efectos de desplazamiento y compatibilidad con el modo oscuro.