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
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.
E-commerce Navigation industrielle
Un composant complexe de navigation e-commerce de style industriel avec des matériaux bruts et des éléments apparents esthétiques. Dispose d’un schéma monochrome en noir et blanc avec un accent brillant, entièrement réactif avec prise en charge du mode sombre.
Composants d’amélioration de la navigation
Un composant de navigation conçu avec une esthétique brutaliste, avec des designs audacieux, un contraste élevé et des mises en page inhabituelles. Il comprend des effets réactifs et prend en charge les thèmes sombres avec CSS.