AI Startup Navbar HTML CSS Code

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern AI Startup Navbar</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-color: #050505;
            --text-color: #ffffff;
            --accent-color: #7000ff;
            --secondary-text: #a1a1aa;
            --glass-bg: rgba(255, 255, 255, 0.03);
            --glass-border: rgba(255, 255, 255, 0.08);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: var(--bg-color);
            font-family: 'Inter', sans-serif;
            color: var(--text-color);
        }

/* Navbar Container */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 20px;
            z-index: 1000;
        }

.nav-content {
            width: 100%;
            max-width: 1200px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 24px;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 100px;
            transition: all 0.3s ease;
        }

/* Logo */
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            font-size: 1.2rem;
            letter-spacing: -0.5px;
            cursor: pointer;
            text-decoration: none;
            color: var(--text-color);
        }

.logo-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #7000ff, #00d1ff);
            border-radius: 8px;
            position: relative;
        }

.logo-icon::after {
            content: '';
            position: absolute;
            inset: 6px;
            border: 2px solid white;
            border-radius: 4px;
        }

/* Nav Links */
        .nav-links {
            display: flex;
            gap: 32px;
            list-style: none;
        }

.nav-links a {
            text-decoration: none;
            color: var(--secondary-text);
            font-size: 0.9rem;
            font-weight: 500;
            transition: color 0.2s ease;
        }

.nav-links a:hover {
            color: var(--text-color);
        }

/* Action Buttons */
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }

.btn-login {
            text-decoration: none;
            color: var(--secondary-text);
            font-size: 0.9rem;
            font-weight: 500;
            transition: color 0.2s ease;
        }

.btn-login:hover {
            color: var(--text-color);
        }

.btn-cta {
            background: var(--text-color);
            color: var(--bg-color);
            padding: 10px 20px;
            border-radius: 100px;
            font-size: 0.9rem;
            font-weight: 600;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

.btn-cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
        }

/* Mobile Menu Toggle (Hidden by default) */
        .mobile-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
        }

.mobile-toggle span {
            width: 20px;
            height: 2px;
            background: var(--text-color);
            border-radius: 2px;
        }

/* Hero placeholder to show scroll effect */
        .hero {
            height: 200vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 150px;
            background: radial-gradient(circle at top center, #1a1a1a 0%, #050505 100%);
        }

@media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            .btn-login {
                display: none;
            }
            .mobile-toggle {
                display: flex;
            }
        }
    </style>
</head>
<body>

<nav class="navbar">
        <div class="nav-content">
            <a href="#" class="logo">
                <div class="logo-icon"></div>
                <span>NeuralFlow</span>
            </a>

<ul class="nav-links">
                <li><a href="#features">Features</a></li>
                <li><a href="#solutions">Solutions</a></li>
                <li><a href="#models">Models</a></li>
                <li><a href="#pricing">Pricing</a></li>
            </ul>

<div class="nav-actions">
                <a href="#" class="btn-login">Log in</a>
                <a href="#" class="btn-cta">Get Started</a>
                <div class="mobile-toggle">
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
    </nav>

<div class="hero">
        <h1 style="font-size: 4rem; text-align: center; margin-bottom: 20px;">The Future of Intelligence</h1>
        <p style="color: var(--secondary-text); font-size: 1.2rem;">Modern interfaces for the next generation of AI startups.</p>
    </div>

</body>
</html>

AI Startup Navbar HTML CSS Code

Recommended

CodePen Home Outlined Mobile Cards

Basket Random Game HTML5 Source Code

CSS Dark Mode Toggle

HTML

CSS

JS

Recommended

CodePen Home Outlined Mobile Cards

Basket Random Game HTML5 Source Code

CSS Dark Mode Toggle

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS