login de bomba

Abrir no Editor Video Publique Seu Código

Recomendado

23 November 2024

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HACKKEVAKIB LOGIN</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Tektur:wght@400;700&display=swap');
        
        :root {
            --primary: #ff3e00;
            --secondary: #ff9500;
            --dark: #1a1a1a;
            --light: #f0f0f0;
        }
        
        body {
            font-family: 'Tektur', sans-serif;
            background-color: var(--dark);
            color: var(--light);
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(255, 62, 0, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 80% 70%, rgba(255, 149, 0, 0.1) 0%, transparent 20%);
        }
        
        .login-container {
            position: relative;
            width: 380px;
            padding: 40px;
            background: rgba(30, 30, 30, 0.8);
            border-radius: 16px;
            box-shadow: 0 0 30px rgba(255, 62, 0, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 62, 0, 0.2);
            z-index: 10;
            overflow: hidden;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        
        .login-container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                transparent,
                transparent,
                transparent,
                rgba(255, 62, 0, 0.1)
            );
            transform: rotate(30deg);
            z-index: -1;
        }
        
        .title {
            text-align: center;
            margin-bottom: 30px;
            font-family: 'Black Ops One', cursive;
            font-size: 2.5rem;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 10px rgba(255, 62, 0, 0.3);
            letter-spacing: 2px;
        }
        
        .input-group {
            position: relative;
            margin-bottom: 25px;
        }
        
        .input-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--secondary);
            z-index: 2;
        }
        
        .form-input {
            width: 100%;
            padding: 15px 15px 15px 45px;
            background: rgba(20, 20, 20, 0.7);
            border: 1px solid rgba(255, 62, 0, 0.3);
            border-radius: 8px;
            color: var(--light);
            font-family: 'Tektur', sans-serif;
            font-size: 1rem;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(255, 62, 0, 0.3);
        }
        
        .form-input::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }
        
        .btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            border: none;
            border-radius: 8px;
            color: white;
            font-family: 'Tektur', sans-serif;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: 0.5s;
            z-index: -1;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 62, 0, 0.4);
        }
        
        .btn:hover::before {
            left: 100%;
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .forgot-link {
            display: block;
            text-align: right;
            margin-top: 10px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .forgot-link:hover {
            color: var(--secondary);
        }
        
        /* Bomba efekti için CSS */
        .explosion {
            position: fixed;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--primary), transparent);
            box-shadow: 0 0 20px var(--primary), 0 0 40px var(--primary);
            transform: scale(0);
            opacity: 0;
            z-index: 100;
            pointer-events: none;
        }
        
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--secondary);
            border-radius: 50%;
            opacity: 0;
            pointer-events: none;
        }
        
        .countdown {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border: 3px solid var(--primary);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary);
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s ease;
        }
        
        .countdown.active {
            opacity: 1;
            transform: scale(1);
            animation: pulse 1s infinite alternate;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 62, 0, 0.7); }
            100% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 62, 0, 0); }
        }
        
        .shake {
            animation: shake 0.5s linear;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        
        /* Arkaplan efekti */
        .bg-effect {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0.1;
            background: 
                radial-gradient(circle at 20% 30%, var(--primary) 0%, transparent 20%),
                radial-gradient(circle at 80% 70%, var(--secondary) 0%, transparent 20%);
            animation: bgPulse 15s infinite alternate;
        }
        
        @keyframes bgPulse {
            0% { transform: scale(1); opacity: 0.1; }
            50% { transform: scale(1.2); opacity: 0.15; }
            100% { transform: scale(1); opacity: 0.1; }
        }
    </style>
</head>
<body>
    <div class="bg-effect"></div>
    
    <div class="login-container" id="loginContainer">
        <div class="countdown" id="countdown">5</div>
        <h1 class="title">PATLAYAN GİRİŞ</h1>
        
        <div class="input-group">
            <i class="fas fa-user"></i>
            <input type="text" class="form-input" placeholder="Kullanıcı Adı" id="username">
        </div>
        
        <div class="input-group">
            <i class="fas fa-lock"></i>
            <input type="password" class="form-input" placeholder="Şifre" id="password">
        </div>
        
        <a href="#" class="forgot-link">Şifremi Unuttum?</a>
        
        <button class="btn" id="loginBtn">GİRİŞ YAP</button>
    </div>

login de bomba

Recomendado

Animação Star Trails

Mortal Kombat

dança de formas interativas

HTML

CSS

JS

Recomendado

Animação Star Trails

Mortal Kombat

dança de formas interativas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS