Formulaire de connexion CSS

1101 Cloud2025

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 December 2024

Une page d'accueil aux couleurs de Léon

9 March 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Login Form</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #667eea, #764ba2);
        }
        .login-container {
            background: #fff;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            width: 350px;
            text-align: center;
        }
        .login-container h2 {
            margin-bottom: 1.5rem;
            font-weight: 600;
        }
        .input-group {
            margin-bottom: 1rem;
            text-align: left;
        }
        .input-group label {
            display: block;
            font-weight: 400;
            margin-bottom: 5px;
        }
        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 1rem;
            transition: 0.3s;
        }
        .input-group input:focus {
            border-color: #667eea;
            box-shadow: 0 0 5px rgba(102, 126, 234, 0.5);
            outline: none;
        }
        .forgot-password {
            display: block;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            color: #667eea;
            text-decoration: none;
        }
        .forgot-password:hover {
            text-decoration: underline;
        }
        .btn {
            width: 100%;
            padding: 10px;
            border: none;
            background: #667eea;
            color: white;
            font-size: 1rem;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn:hover {
            background: #564fc7;
        }
        .register-link {
            margin-top: 1rem;
            font-size: 0.9rem;
        }
        .register-link a {
            color: #667eea;
            text-decoration: none;
        }
        .register-link a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form>
            <div class="input-group">
                <label for="email">Email</label>
                <input type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" placeholder="Enter your password" required>
            </div>
            <a href="#" class="forgot-password">Forgot Password?</a>
            <button type="submit" class="btn">Login</button>
        </form>
        <p class="register-link">Don't have an account? <a href="#">Sign up</a></p>
    </div>
</body>
</html>

Formulaire de connexion CSS

Recommandé

Une page d'accueil aux couleurs de Léon

changer de couleur

Barre de navigation

HTML

CSS

JS

Recommandé

Une page d'accueil aux couleurs de Léon

changer de couleur

Barre de navigation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS