Composant d’amélioration de la navigation
Un composant de navigation réactif conçu pour un portefeuille, utilisant un style brutaliste avec une palette de couleurs pastel et la prise en charge du mode sombre.
HTML Code
<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>Composants associés
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.
Composant d’amélioration de la navigation
Un composant de navigation réactif conçu dans le style Material Design à l’aide de Tailwind CSS, avec prise en charge du thème sombre et des effets réactifs.
Composants d’amélioration de la navigation
Un composant de navigation réactif conçu avec les concepts de conception matérielle à l’aide de Tailwind CSS, avec la prise en charge du thème sombre et des images de remplacement.