Composant Composants de mise en page
Un composant de mise en page de portfolio réactif doté d’une esthétique rétro/vintage, utilisant une palette de couleurs analogue et conçu pour une complexité moyenne avec des fonctionnalités interactives pour présenter des travaux ou des produits.
HTML Code
<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>Composants associés
Glassmorphism Aménagement d’entreprise
Un composant de mise en page glassmorphism simple et réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS, avec des tons de terre.
Composants de mise en page
Il s’agit d’un composant de mise en page complexe conçu pour les blogs et la consommation de contenu, avec des micro-interactions et une palette de couleurs complémentaires. Il comprend divers éléments interactifs et prend en charge le mode sombre.
Composant de mise en page 3D
Une mise en page de conception 3D simple, réactive et attrayante pour les sites Web d’entreprise/d’entreprise utilisant des couleurs vives, avec prise en charge du thème sombre.