bachir123 द्वारा एक कोड

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

4 December 2024

<!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>

bachir123 द्वारा एक कोड

अनुशंसित

रिएक्ट क्लॉक अवधारणा

कोडपेन होम वैलेंटाइन

एक कोड jrj332790 द्वारा

HTML

CSS

JS

अनुशंसित

रिएक्ट क्लॉक अवधारणा

कोडपेन होम वैलेंटाइन

एक कोड jrj332790 द्वारा

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS