ka0sdev
<body class="bg-gray-900 font-sans leading-normal tracking-normal"> <header class="bg-gray-800 shadow-lg"> <div class="max-w-6xl mx-auto px-4"> <div class="flex justify-between items-center py-4"> <div class="flex items-center space-x-4"> <a href="#" class="flex items-center text-gray-300 hover:text-white"> <i class="iconoir-home text-2xl"></i> <span class="font-bold text-xl ml-2">DevPortfolio</span> </a> </div> <nav class="hidden md:flex items-center space-x-6"> <a href="#" class="text-gray-300 hover:text-white transition duration-300"> <i class="iconoir-home text-xl"></i> <span class="ml-1">Home</span> </a> <a href="#" class="text-gray-300 hover:text-white transition duration-300"> <i class="iconoir-user text-xl"></i> <span class="ml-1">About</span> </a> <a href="#" class="text-gray-300 hover:text-white transition duration-300"> <i class="iconoir-briefcase text-xl"></i> <span class="ml-1">Projects</span> </a> <a href="#" class="text-gray-300 hover:text-white transition duration-300"> <i class="iconoir-book text-xl"></i> <span class="ml-1">Blog</span> </a> <a href="#" class="text-gray-300 hover:text-white transition duration-300"> <i class="iconoir-mail text-xl"></i> <span class="ml-1">Contact</span> </a> </nav> <div class="md:hidden flex items-center"> <button class="mobile-menu-button"> <i class="iconoir-menu text-2xl text-gray-300"></i> </button> </div> </div> </div> <div class="mobile-menu hidden md:hidden bg-gray-800"> <a href="#" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700 hover:text-white transition duration-300"> <i class="iconoir-home text-xl"></i> <span class="ml-1">Home</span> </a> <a href="#" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700 hover:text-white transition duration-300"> <i class="iconoir-user text-xl"></i> <span class="ml-1">About</span> </a> <a href="#" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700 hover:text-white transition duration-300"> <i class="iconoir-briefcase text-xl"></i> <span class="ml-1">Projects</span> </a> <a href="#" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700 hover:text-white transition duration-300"> <i class="iconoir-book text-xl"></i> <span class="ml-1">Blog</span> </a> <a href="#" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700 hover:text-white transition duration-300"> <i class="iconoir-mail text-xl"></i> <span class="ml-1">Contact</span> </a> </div> </header> <script> document.querySelector('.mobile-menu-button').addEventListener('click', function() { document.querySelector('.mobile-menu').classList.toggle('hidden'); }); </script> </body>