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

364 Skyrreum

Abrir en el editor Video Publica tu código

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

Recomendado

17 October 2025

Plantilla HTML para portafolio de diseñador web

19 October 2024

Código de barra de navegación HTML CSS

6 December 2024

Página de destino: Cuidado de la piel

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

Plantilla HTML para portafolio de diseñador web

Código de barra de navegación HTML CSS

Página de destino: Cuidado de la piel

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS