Midnight Navigation Bar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Midnight Navigation Bar</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background-color: #121212;
        }
        .navbar-midnight {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            background: #000000;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
        }
        .navbar-midnight .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #bb86fc;
            display: flex;
            align-items: center;
        }
        .navbar-midnight .logo i {
            margin-right: 0.5rem;
        }
        .navbar-midnight ul {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }
        .navbar-midnight ul li {
            margin-left: 2rem;
            position: relative;
        }
        .navbar-midnight ul li a {
            text-decoration: none;
            color: #bb86fc;
            font-size: 1rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            transition: color 0.3s ease;
        }
        .navbar-midnight ul li a:hover {
            color: #03dac5;
        }
        .navbar-midnight ul li::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 3px;
            background-color: #03dac5;
            bottom: -0.5rem;
            left: 0;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }
        .navbar-midnight ul li:hover::before {
            transform: scaleX(1);
            transform-origin: left;
        }
        .navbar-midnight .menu-toggle {
            display: none;
            font-size: 1.5rem;
            color: #bb86fc;
        }
        @media (max-width: 768px) {
            .navbar-midnight ul {
                display: none;
                flex-direction: column;
                background: #000000;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                padding: 1rem;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
            }
            .navbar-midnight ul li {
                margin: 1rem 0;
                text-align: center;
            }
            .navbar-midnight .menu-toggle {
                display: block;
            }
            .navbar-midnight ul.show {
                display: flex;
            }
        }
        .navbar-midnight .menu-toggle {
            cursor: pointer;
        }
        .navbar-midnight ul li a i {
            margin-right: 0.5rem;
        }
    </style>
</head>
<body>
    <nav class="navbar-midnight">
        <div class="logo">
            <i class="fas fa-moon"></i>
            <span>Midnight</span>
        </div>
        <div class="menu-toggle"><i class="fas fa-bars"></i></div>
        <ul>
            <li><a href="#home"><i class="fas fa-home"></i> Home</a></li>
            <li><a href="#about"><i class="fas fa-info-circle"></i> About</a></li>
            <li><a href="#services"><i class="fas fa-briefcase"></i> Services</a></li>
            <li><a href="#portfolio"><i class="fas fa-camera"></i> Portfolio</a></li>
            <li><a href="#contact"><i class="fas fa-envelope"></i> Contact</a></li>
        </ul>
    </nav>
    <script>
        document.querySelector('.menu-toggle').addEventListener('click', function() {
            document.querySelector('.navbar-midnight ul').classList.toggle('show');
        });
    </script>
</body>
</html>

Midnight Navigation Bar - MeggiTools