Skyline Navigation Bar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skyline 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: #eef2f3;
        }
        .navbar-skyline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            background: #0f2027;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #2c5364, #203a43, #0f2027);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #2c5364, #203a43, #0f2027); 
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .navbar-skyline .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #fff;
            display: flex;
            align-items: center;
        }
        .navbar-skyline .logo i {
            margin-right: 0.5rem;
        }
        .navbar-skyline ul {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }
        .navbar-skyline ul li {
            margin-left: 2rem;
            position: relative;
        }
        .navbar-skyline ul li a {
            text-decoration: none;
            color: #fff;
            font-size: 1rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            transition: color 0.3s ease;
        }
        .navbar-skyline ul li a:hover {
            color: #ff6347;
        }
        .navbar-skyline ul li::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 3px;
            background-color: #ff6347;
            bottom: -0.5rem;
            left: 0;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }
        .navbar-skyline ul li:hover::before {
            transform: scaleX(1);
            transform-origin: left;
        }
        .navbar-skyline .menu-toggle {
            display: none;
            font-size: 1.5rem;
            color: #fff;
        }
        @media (max-width: 768px) {
            .navbar-skyline ul {
                display: none;
                flex-direction: column;
                background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                padding: 1rem;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }
            .navbar-skyline ul li {
                margin: 1rem 0;
                text-align: center;
            }
            .navbar-skyline .menu-toggle {
                display: block;
            }
            .navbar-skyline ul.show {
                display: flex;
            }
        }
        .navbar-skyline .menu-toggle {
            cursor: pointer;
        }
        .navbar-skyline ul li a i {
            margin-right: 0.5rem;
        }
</style>
</head>
<body>
    <nav class="navbar-skyline">
        <div class="logo">
            <i class="fas fa-city"></i>
            <span>Skyline</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-skyline ul').classList.toggle('show');
        });
    </script>
</body>
</html>

Skyline Navigation Bar - MeggiTools