Un code par Liamgilles76

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 December 2024

Un code par efficientcloud646

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 code par Liamgilles76

Recommandé

Un code par staticdata256

Un code de Metehan

Un code par efficientcloud646

HTML

CSS

JS

Recommandé

Un code par staticdata256

Un code de Metehan

Un code par efficientcloud646

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS