Modelo de formulário de login HTML CSS Deezer com estética própria.

34 Skyrreum

Abrir no Editor Publique Seu Código

Modelo de formulário de login HTML CSS Deezer com estética própria.

Recomendado

9 September 2025

Trecho de animação de carregamento CSS

14 October 2025

Exemplo de contêiner de animação HTML

13 June 2025

carregamento de torradas de ovos

HTML

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

Recomendado

Trecho de animação de carregamento CSS

Exemplo de contêiner de animação HTML

carregamento de torradas de ovos

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS