navigation-menu.html
<!DOCTYPE html> <html> <head> <title>Enhanced Navigation Bar</title> <style> .nav { display: flex; justify-content: space-between; background-color: #333; padding: 10px; border-radius: 5px; /* Rounded corners */ } .nav-item { color: white; text-decoration: none; padding: 10px 20px; font-weight: bold; /* Bold font for emphasis */ } .nav-item:hover { background-color: #575757; border-radius: 5px; /* Rounded corners for hover state */ } </style> </head> <body> <nav class="nav"> <a href="#" class="nav-item">Home</a> <a href="#" class="nav-item">Documentation</a> <a href="#" class="nav-item">Community</a> <a href="#" class="nav-item">Careers</a> <a href="#" class="nav-item">Get Started</a> </nav> </body> </html>
Above snippet generate below screen.
Previous Next Home
No comments:
Post a Comment