Painel de login e registro Glassy V2 do TheDoc

143 TheDoc

Abrir no Editor Publique Seu Código Precisa de um site?

Painel de login e registro Glassy V2 do TheDoc

Recomendado

22 June 2025

Exemplo de formulário de login em HTML

13 November 2024

Efeito de moldura em imagens usando CSS puro

10 May 2025

Um código de jrj332790

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login & Register Panel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div id="login-panel" class="panel active">
            <h2>Login</h2>
            <form>
                <input type="text" placeholder="Username" required>
                <input type="password" placeholder="Password" required>
                <button type="submit">Login</button>
            </form>
            <p>No account yet? <a href="#" id="show-register">Register</a></p>
        </div>
        <div id="register-panel" class="panel">
            <h2>Register</h2>
            <form>
                <input type="text" placeholder="Username" required>
                <input type="email" placeholder="Email" required>
                <input type="password" placeholder="Password" required>
                <button type="submit">Register</button>
            </form>
            <p>Already have an account? <a href="#" id="show-login">Login</a></p>
        </div>
    </div>
    <script src="script.js"></script>
    <div class="hidden-doc">TheDoc</div>
</body>
</html>

CSS

body {
    min-height: 100vh;
    background: linear-gradient(135deg, #232526 0%, #414345 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.panel {
    background: rgba(34, 40, 49, 0.6);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.18);
    padding: 2rem 2.5rem;
    min-width: 320px;
    margin: 1rem 0;
    display: none;
}

.panel.active {
    display: block;
}

h2 {
    color: #ff3b3f; /* red */
    margin-bottom: 1.5rem;
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

input {
    padding: 0.75rem;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 1rem;
    outline: none;
}

input::placeholder {
    color: #bdbdbd;
}

button {
    padding: 0.75rem;
    border-radius: 8px;
    border: none;
    background: linear-gradient(90deg, #ff3b3f 0%, #232526 100%);
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

button:hover {
    background: linear-gradient(90deg, #232526 0%, #ff3b3f 100%);
}

p {
    color: #bdbdbd;
    text-align: center;
    margin-top: 1rem;
}

a {
    color: #ff3b3f;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

.hidden-doc {
    display: none;
}

Recomendado

Exemplo de formulário de login em HTML

Efeito de moldura em imagens usando CSS puro

Um código de jrj332790

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS