Code HTML et CSS de la barre de navigation pour startup IA

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

22 May 2025

Un code par andres.stahr

HTML

<!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>

Code HTML et CSS de la barre de navigation pour startup IA

Recommandé

Big Bang HTML

Bouton de survol

Un code par andres.stahr

HTML

CSS

JS

Recommandé

Big Bang HTML

Bouton de survol

Un code par andres.stahr

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS