Código HTML e CSS da barra de navegação para startups de IA

Abrir no Editor Video Publique Seu Código

Recomendado

2 January 2025

Estrutura HTML do reprodutor de iPod neumórfico

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>

Código HTML e CSS da barra de navegação para startups de IA

Recomendado

Uma página inicial estranha

Mensagem anônima

Estrutura HTML do reprodutor de iPod neumórfico

HTML

CSS

JS

Recomendado

Uma página inicial estranha

Mensagem anônima

Estrutura HTML do reprodutor de iPod neumórfico

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS