Um código por bachir123

1275 bachir123

Abrir no Editor Publique Seu Código

Recomendado

10 December 2024

Um código por staticbug455

29 January 2025

Um código por sheeshokaokayokay

16 December 2024

Um código por smartfunction263

HTML

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

Um código por bachir123

Recomendado

Um código por staticbug455

Um código por sheeshokaokayokay

Um código por smartfunction263

HTML

CSS

JS

Recomendado

Um código por staticbug455

Um código por sheeshokaokayokay

Um código por smartfunction263

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS