Um Código de Liamgilles76

588 Liamgilles76

Abrir no Editor Publique Seu Código

Recomendado

19 March 2025

Modelo de página de destino do site

10 January 2025

Um Código por Mikeykun

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>

Um Código de Liamgilles76

Recomendado

Botão de confete

Modelo de página de destino do site

Um Código por Mikeykun

HTML

CSS

JS

Recomendado

Botão de confete

Modelo de página de destino do site

Um Código por Mikeykun

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS