Ein Code von bachir123

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

12 April 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Login Form</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #1e3c72, #2a5298);
        }
        .login-container {
            background: rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            text-align: center;
            width: 300px;
        }
        .login-container h2 {
            color: #fff;
            margin-bottom: 20px;
        }
        .input-group {
            margin-bottom: 15px;
            position: relative;
        }
        .input-group input {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 8px;
            outline: none;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            font-size: 16px;
        }
        .input-group input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        .login-btn {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 8px;
            background: #ff4b2b;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            transition: 0.3s;
        }
        .login-btn:hover {
            background: #ff6b4b;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form>
            <div class="input-group">
                <input type="text" placeholder="Username" required>
            </div>
            <div class="input-group">
                <input type="password" placeholder="Password" required>
            </div>
            <button class="login-btn" type="submit">Login</button>
        </form>
    </div>
</body>
</html>

Ein Code von bachir123

Empfohlen

Ein Code von Farah

Ein Code von smartfunction186

Ein Code von meriem

HTML

CSS

JS

Empfohlen

Ein Code von Farah

Ein Code von smartfunction186

Ein Code von meriem

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS