Composant d’amélioration de la navigation
Un composant de navigation inspiré du glassmorphisme conçu pour présenter des travaux et des produits de portfolio avec prise en charge des tons de terre et du mode sombre. Le composant présente un effet de verre givré, un design réactif et des éléments minimaux.
HTML Code
<nav class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg border-b border-gray-300 dark:border-gray-700 rounded-lg p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio</span>
</div>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Home</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Gallery</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">About</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Contact</a></li>
</ul>
</div>
</nav>
<section class="p-8 bg-gray-50 dark:bg-gray-900">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">My Work</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300" alt="Project Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Project Title</h3>
<p class="text-gray-700 dark:text-gray-300">Brief description of the project goes here. Showcasing work effectively.</p>
</div>
</div>
<!-- Repeat similar divs for more projects -->
</div>
</section>Composants associés
Composants d’amélioration de la navigation
Un composant simple d’amélioration de la navigation en mode sombre pour présenter un portfolio, à l’aide de Tailwind CSS.
Composants d’amélioration de la navigation
Un composant de navigation réactif avec une esthétique rétro/vintage, adapté aux applications de commerce électronique, avec prise en charge du thème sombre et interactivité modérée.
Composant d’amélioration de la navigation
Un composant d’amélioration de la navigation conçu dans un style brutaliste. Avec des effets réactifs, la prise en charge du thème sombre et des images de remplacement.