Componente della barra laterale
Un componente della barra laterale reattivo per un portfolio, caratterizzato da uno stile di progettazione 3D con un tema scuro, adatto per mostrare lavori o prodotti, con alcuni elementi interattivi e una combinazione di colori analoga.
Codice HTML
<aside class="bg-gray-800 dark:bg-gray-900 w-64 h-screen shadow-lg transform transition-transform duration-300 relative hover:translate-x-1 hover:shadow-2xl">
<div class="flex items-center justify-center h-16 border-b border-gray-700 dark:border-gray-600">
<h1 class="text-white text-lg font-bold">My Portfolio</h1>
</div>
<nav class="flex flex-col p-4">
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Home</span>
</a>
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>About</span>
</a>
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Projects</span>
</a>
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Contact</span>
</a>
</nav>
<footer class="absolute bottom-0 left-0 w-full border-t border-gray-700 dark:border-gray-600 p-4">
<p class="text-gray-500 text-sm text-center">© 2023 My Portfolio</p>
</footer>
</aside>Componenti correlati
3D_Earth_Tones_Non_Profit_Sidebar
Un componente della barra laterale complesso e reattivo con elementi di design 3D e una combinazione di colori dei toni della terra, adatto per siti Web senza scopo di lucro e di beneficenza. Include il supporto per la modalità oscura e l'HTML semantico.
Componente della barra laterale
Un componente reattivo della barra laterale progettato con l'effetto Glassmorphism e una combinazione di colori complementari, adatto per un blog o per il consumo di contenuti.
Componente della barra laterale
Un componente della barra laterale reattivo progettato in uno stile retrò/vintage con colori vivaci per un layout del cruscotto. Include il supporto per la modalità oscura.