Componente Componentes de diseño
Un componente de diseño de portafolio responsivo con una estética de diseño retro / vintage, que utiliza un esquema de color análogo y está diseñado para una complejidad media con funciones interactivas para mostrar trabajos o productos.
Código HTML
<div class="min-h-screen bg-gray-800 text-white p-6">
<header class="mb-6">
<h1 class="text-4xl font-bold text-center">My Retro Portfolio</h1>
</header>
<main class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold">Project Title 1</h2>
<p class="text-gray-300">Description of the project showcasing the retro design style.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold">Project Title 2</h2>
<p class="text-gray-300">Description of the project highlighting nostalgic elements from the past eras.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold">Project Title 3</h2>
<p class="text-gray-300">Description of the project with a vintage flair and interactive features.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Portfolio Item 4" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold">Project Title 4</h2>
<p class="text-gray-300">Snapshot of the work that resonates with the audience's nostalgia.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Portfolio Item 5" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold">Project Title 5</h2>
<p class="text-gray-300">Work details that emphasize the vintage aesthetics of the project.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=6" alt="Portfolio Item 6" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold">Project Title 6</h2>
<p class="text-gray-300">Project insights with a nostalgic touch to engage viewers.</p>
</div>
</main>
<footer class="mt-6 text-center">
<h3 class="text-lg font-medium">About Me</h3>
<div class="flex justify-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-gray-500">
</div>
<p class="mt-2">Check out my work and get in touch!</p>
</footer>
</div>Componentes relacionados
Diseño del panel de control de Glassmorphism
Un diseño simple de morfismo de vidrio para un tablero con elementos translúcidos similares al vidrio esmerilado, con un esquema de color pastel y compatibilidad con el modo oscuro.
Componente Componentes de diseño
Un componente de diseño de tablero receptivo con estilo Glassmorphism, combinación de colores vibrantes y compatibilidad con temas oscuros mediante Tailwind CSS. Cuenta con una barra lateral y un área de contenido principal con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque.
Componente Componentes de diseño
Un componente de diseño inspirado en el brutalismo para el consumo de contenido con una combinación de colores pastel y complejidad moderada, con diseño receptivo y compatibilidad con el modo oscuro.