Plantilla de formulario de inicio de sesión HTML CSS de Deezer Aesthetic

1,000 Skyrreum

Abrir en el editor Publica tu código

Plantilla de formulario de inicio de sesión HTML CSS de Deezer Aesthetic

Recomendado

20 May 2025

Un código de Gregory

12 May 2026

Juegos desbloqueados: busca, ordena y juega en las zonas GN-Math.

20 September 2025

Fuegos artificiales animados con CSS, luciérnagas y girasoles

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>

CSS