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

524 Skyrreum

Abrir en el editor Publica tu código

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

Recomendado

1 July 2025

Formulario de inicio de sesión moderno V2

28 December 2024

Un directorio de página de inicio alternativo

13 November 2025

Juego de fútbol retro: HTML5 Canvas, seguimiento de cámara

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

Formulario de inicio de sesión moderno V2

Un directorio de página de inicio alternativo

Juego de fútbol retro: HTML5 Canvas, seguimiento de cámara

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS