login de bomba

Abrir no Editor Publique Seu Código

Recomendado

17 May 2025

Exemplo de código HTML da página de login em turco

HTML

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

emoji dançando

Barra lateral

Exemplo de código HTML da página de login em turco

HTML

CSS

JS

Recomendado

emoji dançando

Barra lateral

Exemplo de código HTML da página de login em turco

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS