Un código de Liamgilles76

111 Liamgilles76

Abrir en el editor Publica tu código

Recomendado

30 November 2024

Efecto de flotar al beber refresco

18 May 2025

Un código de Mete

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

Error de contraseña rebotante

Efecto de flotar al beber refresco

Un código de Mete

HTML

CSS

JS

Recomendado

Error de contraseña rebotante

Efecto de flotar al beber refresco

Un código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS