Componenti
Componenti di miglioramento della navigazione
Componente di miglioramento della navigazione
Componente di miglioramento della navigazione
Un componente di navigazione reattivo progettato per un portfolio, che utilizza uno stile brutale con una combinazione di colori pastello e il supporto della modalità oscura.
Codice HTML
<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>Componenti correlati
Componenti di miglioramento della navigazione
Un componente di navigazione progettato con scheumorfismo, con elementi digitali che imitano le controparti del mondo reale. È disegnato utilizzando Tailwind CSS con effetti reattivi e supporto per temi scuri.
Componenti di miglioramento della navigazione
Un semplice componente di miglioramento della navigazione in modalità scura per mostrare un portfolio, utilizzando Tailwind CSS.
Componenti di miglioramento della navigazione
Una barra di navigazione retrò/vintage con un design complesso per siti Web professionali, con combinazione di colori triadica e supporto per temi scuri reattivi.