Panneau de connexion et d'inscription Glassy V3 de TheDoc

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

17 April 2025

Une page d'accueil sur la lavande

7 June 2025

<!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: #2196f3; /* blue */
    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, #2196f3 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%, #2196f3 100%);
}

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

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

a:hover {
    text-decoration: underline;
}

.hidden-doc {
    display: none;
}

Panneau de connexion et d'inscription Glassy V3 de TheDoc

Recommandé

Un code de Metehan

Une page d'accueil sur la lavande

Un code par alejandrokundrah

HTML

CSS

JS

Recommandé

Un code de Metehan

Une page d'accueil sur la lavande

Un code par alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS