Neon Navbar SourceCode

HTML Code

          
            <!DOCTYPE html>
            <html lang="en">
              <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Neon Navbar</title>
                <link rel="stylesheet" href="style.css">
              </head>
              <body>
                <nav class="neon-navbar">
                  <div class="logo">NEON</div>
                  <ul class="nav-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                  </ul>
                </nav>
                <div class="content">
                  <h1>THIS IS A NEON NAVBAR</h1>
                  <p>Created In HTML and CSS</p>
                </div>
              </body>
            </html>
          
        

CSS Code

          
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
              }
              
              body {
                background: #111;
                color: white;
                font-family: Arial, Helvetica, sans-serif;
              }
              
              .neon-navbar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 20px;
                backdrop-filter: blur(5px);
                border-bottom: 2px solid#444;
                position: fixed;
                width: 100%;
                top: 0;
                left: 0;
                z-index: 10;
              }
              
              .neon-navbar .logo {
                font-size: 1.8rem;
                font-weight: bold;
                color: #00ffff;
                text-shadow: 0 0 8px #00ffff, 0 0 16px #00ffff, 0 0 24px #00ffff;
              }
              
              .nav-links {
                list-style: none;
                display: flex;
                gap: 20px;
                margin: 0;
              }
              
              .nav-links li {
                list-style: none;
              }
              
              .nav-links a {
                text-decoration: none;
                color: #fff;
                font-size: 1rem;
                transform: scale(1.1);
              }
              
              .content {
                text-align: center;
                margin: 100px auto 0;
                color: white;
                font-size: 2rem;
                max-width: 600px;
                padding: 20px;
              }
              
              
              .nav-links a:hover {
                text-shadow: 0 0 8px #00ffff,0 0 16px #00ffff, 0 0 24px #00ffff;
                transform: scale(1.1);
              }