Barre de navigation skeuomorphe
Composant de la barre de navigation du portfolio conçu avec des styles skeuomorphes et une palette de couleurs pastel, y compris la prise en charge du mode sombre. Il comporte des éléments interactifs tels que des liens et un menu déroulant.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow-lg p-4 rounded-lg flex items-center justify-between"> <div class="flex items-center space-x-4"> <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full"> <span class="text-xl font-bold text-gray-800 dark:text-white">Portfolio</span> </div> <ul class="flex space-x-6"> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Home</a></li> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">About</a></li> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Portfolio</a></li> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Contact</a></li> </ul> <div class="relative"> <button class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200 focus:outline-none"> Menu <span class="inline-flex items-center justify-center w-3 h-3 bg-gray-800 dark:bg-white rounded-full"></span> </button> <ul class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg hidden" id="dropdown-menu"> <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Profile</a></li> <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Settings</a></li> <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Logout</a></li> </ul> </div> <button class="hidden md:block text-gray-800 dark:text-white border border-gray-400 dark:border-gray-600 rounded-lg px-4 py-2 hover:bg-pink-500 dark:hover:bg-pink-400 transition ease-in-out duration-200">Get Started</button></nav>Composants associés
3D_Corporate_Blues_Food_Restaurant_Nav
Une barre de navigation complexe, inspirée de la 3D, pour les sites Web de restauration, avec un blues d’entreprise et une réactivité totale avec prise en charge du mode sombre. Intègre des éléments tels qu’un logo, des liens de navigation, une barre de recherche, un avatar d’utilisateur et un panier.
Artsy_Neon_Crypto_Navbar
Une barre de navigation complexe et réactive pour les applications de crypto-monnaie/blockchain avec un design artistique inspiré de l’aquarelle et une palette de couleurs vives et néon. Comprend la prise en charge du mode sombre et des éléments interactifs.
Barre de navigation rétro/vintage pour les réseaux sociaux
Barre de navigation rétro/vintage pour les médias sociaux avec une palette de couleurs analogue, une complexité simple, une prise en charge réactive et un thème sombre.