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

374 Gemini123

Ouvrir dans l'éditeur Video Publiez votre code

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

Recommandé

5 September 2024

Générateur de mot de passe

20 April 2024

Icônes sociales utilisant HTML et CSS

11 February 2026

Jeux débloqués : Jouez gratuitement à des jeux en ligne à l’école

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>

Recommandé

Générateur de mot de passe

Icônes sociales utilisant HTML et CSS

Jeux débloqués : Jouez gratuitement à des jeux en ligne à l’école

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS