Un code par kaiser.zulassungsservice.gmbh

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 February 2025

Bouton poussoir d'accueil CodePen

18 April 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Futuristic AI Login</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #111;
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: #fff;
     	    overfolow:hidden;
        }

.login-container {
            width: 350px;
            padding: 30px;
            border-radius: 15px;
            background: black;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            text-align: center;
            backdrop-filter: blur(10px);
      
        }

h1 {
            font-size: 30px;
            margin-bottom: 20px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: white;
        }

.input-field {
            margin-bottom: 20px;
            position: relative;
        }

.input-field input {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            color: black;
            font-size: 16px;
            outline: none;
            box-sizing: border-box;
            transition: all 0.3s ease-in-out;
        }

.input-field input:focus {
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid #6a3edc;
        }

.login-btn {
            width: 100%;
            padding: 12px;
            background: #6a3edc;
            color: black;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.login-btn:hover {
            background: #3b4cca;
            transform: scale(1.05);
        }

.forgot-password {
            margin-top: 10px;
            font-size: 14px;
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s ease;
        }

.forgot-password:hover {
            color: #fff;
        }

.background-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.6));
            z-index: -1;
            animation: pulse 3s infinite;
        }

@keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.0);
            }
            100% {
                transform: scale(1);
            }
        }

.animate-border {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 15px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            animation: border-animation 3s infinite;
        }

@keyframes border-animation {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>
<body>

<div class="login-container">
    <div class="animate-border"></div>
    <h1>Login</h1>
    <div class="input-field">
        <input type="text" id="username" placeholder="Username" required>
    </div>
    <div class="input-field">
        <input type="password" id="password" placeholder="Password" required>
    </div>
    <button class="login-btn" onclick="login()">Log In</button>
    <a href="#" class="forgot-password">Forgot password?</a>
</div>

if (username === "" || password === "") {
            alert("Please fill out both fields.");
        } else {
            alert("Login Successful!");
        }
    }
</script>

</body>
</html>

Un code par kaiser.zulassungsservice.gmbh

Recommandé

Bouton poussoir d'accueil CodePen

Un code de Metehan

Un code par Liamgilles76

HTML

CSS

JS

Recommandé

Bouton poussoir d'accueil CodePen

Un code de Metehan

Un code par Liamgilles76

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS