Componente intestazione
Un componente di intestazione in stile neumorfismo per un portfolio con un tema scuro, un design reattivo e contiene più elementi interattivi.
Codice HTML
<header class="bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg p-6 flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/60" alt="Logo" class="h-10 w-10 rounded-full shadow-lg">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">My Portfolio</h1>
</div>
<nav class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">Projects</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">Contact</a>
</nav>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full shadow-lg">
<button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-200 hover:bg-blue-600 dark:hover:bg-blue-800">Get In Touch</button>
</div>
</header>Componenti correlati
Componente intestazione
Un componente di intestazione reattivo con supporto per la modalità scura, con un logo, collegamenti di navigazione e un pulsante di invito all'azione. Il design utilizza uno sfondo scuro per ridurre l'affaticamento degli occhi.
Componente intestazione
Un componente di intestazione reattivo progettato in stile Brutalismo con una combinazione di colori pastello per un blog o un sito di contenuti, che incorpora il supporto per il tema scuro.
Intestazione aziendale di Material Design
Material Design ha ispirato un semplice componente di intestazione con una combinazione di colori complementari per siti Web aziendali. Design reattivo con supporto per temi scuri.