Un código de Liamgilles76

591 Liamgilles76

Abrir en el editor Publica tu código

Recomendado

24 August 2025

Ejemplo de formulario de registro HTML simple

30 March 2025

Un código de Metehan

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connexion à votre compte PayPal</title>
    <style>
        /* Basic Reset & Body Styling */
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f7fa; /* Light gray background, typical for PayPal */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            box-sizing: border-box;
        }

/* Login Container */
        .login-container {
            background-color: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
            width: 100%;
            max-width: 380px; /* Standard width for such forms */
            text-align: center;
        }

/* PayPal Logo (Text-based for simplicity in snippet) */
        .paypal-logo {
            margin-bottom: 30px;
            font-size: 36px;
            font-weight: bold;
            color: #0070ba; /* PayPal blue */
            text-decoration: none;
            display: block; /* Ensures it takes full width for centering */
        }

/* Form Styling */
        .login-form input[type="text"],
        .login-form input[type="password"] {
            width: calc(100% - 20px); /* Full width minus padding */
            padding: 12px 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box; /* Include padding in width */
        }

.login-form button {
            width: 100%;
            padding: 12px;
            background-color: #0070ba; /* PayPal blue */
            color: white;
            border: 1px round #ccc;
            border-radius: 4px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.login-form button:hover {
            background-color: #005ea6; /* Darker blue on hover */
        }

/* Links Section */
        .links {
            margin-top: 20px;
            text-align: left; /* Align link to left as often seen on PayPal */
        }
        .links a {
            color: #0070ba;
            text-decoration: none;
            font-size: 14px;
        }
        .links a:hover {
            text-decoration: underline;
        }

/* Separator "ou" */
        .separator {
            margin: 25px 0;
            position: relative;
            text-align: center;
            color: #888;
            font-size: 14px;
        }
        .separator::before,
        .separator::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 40%; /* Adjust line length */
            height: 1px;
            background-color: #eee;
        }
        .separator::before {
            left: 0;
        }
        .separator::after {
            right: 0;
        }

/* Sign Up Button */
        .signup-button {
            display: block;
            width: calc(100% - 2px); /* Full width minus border */
            padding: 12px;
            background-color: #fff;
            color: #0070ba;
            border: 1px round #0070ba;
      border-radius: 4px;
            font-size: 18px;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s ease, color 0.3s ease;
            box-sizing: border-box;
        }
        .signup-button:hover {
            background-color: #e6f2fa; /* Lighter blue on hover */
            color: #005ea6;
        }
    </style>
</head>
<body>
    <div class="login-container">
        
        <a href="#" class="paypal-logo">PayPal</a>

<form class="login-form" action="#" method="post">
            <input type="text" id="email" name="email" placeholder="Email ou numéro de mobile" required autocomplete="username">
            <input type="password" id="password" name="password" placeholder="Mot de passe" required autocomplete="current-password">
            <button type="submit">connection</button>
        </form>

<div class="links">
            <a href="#">Mots de passe oublié ?</a>
        </div>

<div class="separator">ou</div>

<a href="#" class="signup-button">Ouvrir un compte</a>
    </div>
</body>
</html>

Un código de Liamgilles76

Recomendado

Ejemplo de formulario de registro HTML simple

Un código de ytr3d3

Un código de Metehan

HTML

CSS

JS

Recomendado

Ejemplo de formulario de registro HTML simple

Un código de ytr3d3

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS