Componentes de mejora de la navegación
Un componente de navegación diseñado con una estética brutalista, con diseños atrevidos, alto contraste y diseños inusuales. Incluye efectos responsivos y admite temas oscuros con CSS.
Código HTML
<nav class="bg-white dark:bg-gray-800 p-6">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full border-2 border-black dark:border-white">
<h1 class="text-2xl font-bold text-black dark:text-white">Brutal Nav</h1>
</div>
<ul class="flex space-x-6">
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#home">Home</a>
</li>
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#about">About</a>
</li>
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#services">Services</a>
</li>
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<div class="bg-gray-300 dark:bg-gray-700 my-6">
<img src="https://picsum.photos/1200/300?random=1" alt="Banner" class="w-full h-auto">
</div>
<div class="container mx-auto py-6">
<h2 class="text-xl font-bold text-black dark:text-white">Featured</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
<img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-40 object-cover rounded">
<h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 1</h3>
</div>
<div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
<img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-40 object-cover rounded">
<h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 2</h3>
</div>
<div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
<img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-40 object-cover rounded">
<h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 3</h3>
</div>
</div>
</div>
<footer class="bg-gray-200 dark:bg-gray-600 p-4 text-center">
<p class="text-sm text-black dark:text-white">© 2023 Brutalism Design. All Rights Reserved.</p>
</footer>
</nav>Componentes relacionados
Naturaleza-Inspired_Entertainment_Navigation
Un componente de navegación complejo inspirado en la naturaleza para plataformas de entretenimiento/medios, con líneas fluidas y esquemas de colores dulces/dulces. Totalmente receptivo con soporte para modo oscuro.
Componente Componentes de mejora de navegación
Un componente de navegación responsivo con soporte de modo oscuro para sitios web de comercio electrónico. Cuenta con un esquema de color triádico con un fondo oscuro para reducir la fatiga visual.
Industrial_Monochromatic_Navigation
Un componente de navegación complejo y centrado en el modo oscuro para empresas industriales y manufactureras, con un diseño monocromático y múltiples elementos interactivos adecuados para paneles de control e interfaces operativas.