Panel de inicio de sesión y registro de Glassy V2 de TheDoc

Abrir en el editor Publica tu código

Recomendado

13 May 2025

Página de inicio de sesión de Roblox HTML CSS

2 March 2023

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

Panel de inicio de sesión y registro de Glassy V2 de TheDoc

Recomendado

Página de inicio de sesión de Roblox HTML CSS

Efecto de texto deslizante

Un código de qatar2023

HTML

CSS

JS

Recomendado

Página de inicio de sesión de Roblox HTML CSS

Efecto de texto deslizante

Un código de qatar2023

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS