Formulaire de connexion HTML avancé

2,379 lebdev

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 December 2025

Modèle HTML de site web de portfolio holographique

28 March 2025

Un code par mcdonge13

9 September 2024

Bouton de filtre SVG gluant

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-hover: #3a56d4;
            --error-color: #ef476f;
            --text-color: #2b2d42;
            --text-light: #8d99ae;
            --bg-color: #f8f9fa;
            --card-bg: #ffffff;
            --border-radius: 8px;
            --box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }

body {
            background-color: var(--bg-color);
            background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

.login-container {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            width: 100%;
            max-width: 420px;
            padding: 40px;
            position: relative;
            overflow: hidden;
        }

.login-container::before {
            content: "";
            position: absolute;
            top: -50px;
            left: -50px;
            width: 150px;
            height: 150px;
            background-color: rgba(67, 97, 238, 0.1);
            border-radius: 50%;
            z-index: 0;
        }

.login-container::after {
            content: "";
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 120px;
            height: 120px;
            background-color: rgba(67, 97, 238, 0.05);
            border-radius: 50%;
            z-index: 0;
        }

.login-header {
            text-align: center;
            margin-bottom: 35px;
            position: relative;
            z-index: 1;
        }

.login-header h1 {
            color: var(--text-color);
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 12px;
        }

.login-header p {
            color: var(--text-light);
            font-size: 15px;
        }

.form-group {
            margin-bottom: 24px;
            position: relative;
            z-index: 1;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-color);
            font-size: 15px;
        }

.input-group {
            position: relative;
        }

.input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
            font-size: 18px;
        }

.form-group input {
            width: 100%;
            padding: 14px 15px 14px 40px;
            border: 1px solid #e1e5ee;
            border-radius: var(--border-radius);
            font-size: 15px;
            transition: var(--transition);
            background-color: #f9fafc;
        }

.form-group input:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
            background-color: white;
        }

.form-group input.error {
            border-color: var(--error-color);
            background-color: #fff8f8;
        }

.error-message {
            color: var(--error-color);
            font-size: 13px;
            margin-top: 6px;
            display: none;
        }

.remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            position: relative;
            z-index: 1;
        }

.remember-me {
            display: flex;
            align-items: center;
        }

.remember-me input {
            margin-right: 8px;
            accent-color: var(--primary-color);
        }

.remember-me label {
            color: var(--text-light);
            font-size: 14px;
        }

.forgot-password {
            color: var(--primary-color);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: var(--transition);
        }

.forgot-password:hover {
            color: var(--primary-hover);
            text-decoration: underline;
        }

.login-button {
            width: 100%;
            padding: 14px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

.login-button:hover {
            background-color: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
        }

.login-button:active {
            transform: translateY(0);
        }

.signup-link {
            text-align: center;
            margin-top: 25px;
            font-size: 14px;
            color: var(--text-light);
            position: relative;
            z-index: 1;
        }

.signup-link a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
        }

.signup-link a:hover {
            color: var(--primary-hover);
            text-decoration: underline;
        }

.social-login {
            margin-top: 30px;
            position: relative;
            z-index: 1;
        }

.social-login-text {
            text-align: center;
            position: relative;
            margin-bottom: 20px;
        }

.social-login-text span {
            background-color: white;
            padding: 0 15px;
            color: var(--text-light);
            font-size: 14px;
            position: relative;
            z-index: 2;
        }

.social-login-text::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background-color: #e1e5ee;
            z-index: 1;
        }

.social-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

.social-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #f9fafc;
            border: 1px solid #e1e5ee;
            cursor: pointer;
            transition: var(--transition);
        }

.social-button:hover {
            background-color: white;
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

/* Responsive adjustments */
        @media (max-width: 480px) {
            .login-container {
                padding: 30px 20px;
                max-width: 100%;
            }
            
            .social-buttons {
                gap: 10px;
            }
            
            .social-button {
                width: 45px;
                height: 45px;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h1>Welcome Back</h1>
            <p>Enter your credentials to access your account</p>
        </div>
        <form id="login-form">
            <div class="form-group">
                <label for="email">Email Address</label>
                <div class="input-group">
                    <span class="input-icon"></span>
                    <input type="email" id="email" name="email" placeholder="name@example.com" required>
                </div>
                <div class="error-message" id="email-error">Please enter a valid email address</div>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <div class="input-group">
                    <span class="input-icon"></span>
                    <input type="password" id="password" name="password" placeholder="Enter your password" required>
                </div>
                <div class="error-message" id="password-error">Password must be at least 6 characters</div>
            </div>
            <div class="remember-forgot">
                <div class="remember-me">
                    <input type="checkbox" id="remember" name="remember">
                    <label for="remember">Remember me</label>
                </div>
                <a href="#" class="forgot-password">Forgot Password?</a>
            </div>
            <button type="submit" class="login-button">Sign In</button>
            <div class="signup-link">
                Don't have an account? <a href="#">Create account</a>
            </div>
            <div class="social-login">
                <div class="social-login-text">
                    <span>Or continue with</span>
                </div>
                <div class="social-buttons">
                    <div class="social-button">G</div>
                    <div class="social-button">f</div>
                    <div class="social-button">in</div>
                </div>
            </div>
        </form>
    </div>

CSS