Netflix-Inspired Responsive Navigation Bar
Create a fully responsive navigation bar that mimics the Netflix user interface with an authentic look and feel. The design should feature a dark theme with a subtle gradient background that captures the essence of Netflix's aesthetic. The navbar should include the following elements: Logo: Place the Netflix logo prominently on the left side of the navbar. Menu Items: Include the following links, horizontally aligned: Home TV Shows Movies New & Popular My List Browse by Language Ensure that each menu item has a hover effect that changes the text color to a vibrant red. Search Bar: Incorporate a centered search input field with rounded corners and the placeholder text "Search." The search bar should be visually appealing and user friendly. User Profile Icon: On the right side of the navbar, add a circular user profile icon. When hovered over, this icon should display a dropdown menu with options for: Account Settings Logout Responsive Design: Ensure that the navbar collapses into a hamburger menu on smaller screens (mobile view). When the hamburger menu is clicked, it should expand to reveal the same menu items in a vertical layout for easy navigation. Animations: Include smooth transition animations for hover effects on menu items and the dropdown menu, enhancing the overall user experience. Styling Details: Utilize a sleek and modern design language consistent with Netflix's branding, ensuring the navbar is visually striking, functional, and easy to navigate. This navbar should provide a seamless user experience, reflecting the polished and sophisticated nature of Netflix's interface.
