Componente de mejora de la navegación
Un componente de navegación responsivo diseñado para una cartera, que utiliza un estilo brutalista con un esquema de color pastel y soporte para modo oscuro.
Código HTML
<nav class="bg-white dark:bg-gray-800 p-6 flex justify-between items-center shadow-lg">
<a href="#" class="text-2xl font-bold text-pink-600 dark:text-pink-300">My Portfolio</a>
<div class="flex space-x-4">
<a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Projects</a>
<a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">About</a>
<a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Contact</a>
</div>
</nav>
<section class="p-6 bg-gray-100 dark:bg-gray-900">
<h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200">Portfolio Showcase</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
<div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=1" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
<h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of the project, emphasizing its features, technologies used, and challenges faced.</p>
</div>
<div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=2" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
<h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of the project, focusing on user experience and the development process.</p>
</div>
<div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=3" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
<h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of the project, detailing the problem solved and feedback received.</p>
</div>
</div>
</section>
<section class="p-6 bg-gray-100 dark:bg-gray-900">
<h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200">Meet the Team</h2>
<div class="flex flex-wrap justify-center space-x-6 mt-6">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
<h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">Frontend Developer</p>
</div>
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
<h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-400">Backend Developer</p>
</div>
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
<h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Adam Johnson</h3>
<p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
</div>
</div>
</section>Componentes relacionados
Comercio electrónico Navegación industrial
Un complejo componente de navegación de comercio electrónico de estilo industrial con materiales en bruto y elementos expuestos estéticos. Cuenta con un esquema monocromático en blanco y negro con un acento brillante, totalmente receptivo con soporte para modo oscuro.
Navegación de medios en modo oscuro
Un componente de navegación complejo y receptivo para plataformas de entretenimiento/medios, con una interfaz de usuario de modo oscuro con una paleta de colores bosque/verde. Incluye un logotipo, una barra de búsqueda, enlaces de navegación, un perfil de usuario y una campana de notificación.
Componentes de mejora de la navegación
Un componente de navegación de estilo Neumorphism con soporte para modo oscuro y diseño responsivo