HTML CSS लॉगिन फ़ॉर्म टेम्पलेट Deezer Aesthetic

अनुशंसित

9 December 2025

सीएसएस एनिमेटेड लॉगिन फॉर्म डिजाइन

2 March 2025

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connexion</title>
    <style>
        /* Deezer Aesthetic Variables */
        :root {
            --deezer-purple: #EF5466; /* Deezer's primary accent color */
            --bg-dark: #12121e; /* Very dark blue/black background */
            --form-bg: #1c1c2c; /* Slightly lighter box background */
            --text-light: #ffffff;
            --text-muted: #a0a0a0;
            --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

body {
            font-family: var(--font-family);
            background-color: var(--bg-dark);
            color: var(--text-light);
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            text-align: center;
        }

.login-container {
            width: 100%;
            max-width: 400px;
            padding: 40px;
            background-color: var(--form-bg);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }

.logo {
            font-size: 36px;
            font-weight: bold;
            color: var(--deezer-purple);
            margin-bottom: 30px;
        }

h1 {
            font-size: 24px;
            margin-bottom: 30px;
        }

/* Social Buttons Styling */
        .social-login button {
            width: 100%;
            padding: 12px;
            margin-bottom: 10px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            transition: background-color 0.2s;
        }

.social-login .facebook {
            background-color: #3b5998;
            color: white;
        }
        .social-login .google {
            background-color: white;
            color: #333;
        }
        .social-login .apple {
            background-color: #000;
            color: white;
        }

/* Separator */
        .separator {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 20px 0;
            color: var(--text-muted);
        }
        .separator::before,
        .separator::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid #333;
        }
        .separator:not(:empty)::before {
            margin-right: .5em;
        }
        .separator:not(:empty)::after {
            margin-left: .5em;
        }

/* Form Styling */
        .login-form input[type="email"],
        .login-form input[type="password"] {
            width: 100%;
            padding: 15px;
            margin-bottom: 15px;
            background-color: #33334f;
            border: 1px solid #444;
            border-radius: 4px;
            color: var(--text-light);
            box-sizing: border-box;
        }

.login-form button[type="submit"] {
            width: 100%;
            padding: 15px;
            background-color: var(--deezer-purple);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 10px;
            transition: opacity 0.2s;
        }

.login-form button[type="submit"]:hover {
            opacity: 0.9;
        }

.footer-links {
            margin-top: 25px;
            font-size: 14px;
        }

.footer-links a {
            color: var(--deezer-purple);
            text-decoration: none;
            margin: 0 10px;
        }
        
        .footer-links a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<h1>Connectez-vous à ...</h1>

<div class="social-login">
            <button class="facebook">Continuer avec Facebook</button>
            <button class="google">Continuer avec Google</button>
            <button class="apple">Continuer avec Apple</button>
        </div>

<form class="login-form">
            <input type="email" placeholder="Adresse e-mail" required>
            <input type="password" placeholder="Mot de passe" required>
            
            <button type="submit">Se connecter</button>
        </form>

<div class="footer-links">
            <a href="#">Mot de passe oublié ?</a>
            <p style="color: var(--text-muted); margin-top: 15px;">
                Pas encore de compte ? <a href="#">S'inscrire</a>
            </p>
        </div>
    </div>

</body>
</html>

HTML CSS लॉगिन फ़ॉर्म टेम्पलेट Deezer Aesthetic

अनुशंसित

सीएसएस एनिमेटेड लॉगिन फॉर्म डिजाइन

HTML, लॉगिन रजिस्टर एनिमेटेड

HTML एनीमेशन कंटेनर उदाहरण

HTML

CSS

JS

अनुशंसित

सीएसएस एनिमेटेड लॉगिन फॉर्म डिजाइन

HTML, लॉगिन रजिस्टर एनिमेटेड

HTML एनीमेशन कंटेनर उदाहरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS