LOGIN KEVAKIB

329 kevekıbhack

Abrir no Editor Publique Seu Código

Recomendado

25 July 2025

Modelo de página de login HTML

12 July 2025

pergunte ao kevakib ai

18 September 2024

Hacker Login (ATUALIZAÇÃO) Edição Turca

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KEVAVİB| Premium Digital Experience</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">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #6366f1;
            --primary-dark: #033105;
            --secondary: #10b981;
            --accent: #f59e0b;
            --dark: #1e293b;
            --light: #f8fafc;
            --glass: rgba(139, 29, 29, 0.15);
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #097520, #961934);
            min-height: 100vh;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--light);
            overflow-x: hidden;
        }
        
        .portal-container {
            position: relative;
            width: 490px;
            min-height: 590px;
            background: rgba(15, 23, 42, 0.7);
            border-radius: 24px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(216, 184, 184, 0.616);
            padding: 40px;
            z-index: 10;
            overflow: hidden;
            transition: all 0.4s ease;
        }
        
        .portal-container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                transparent,
                rgba(80, 7, 109, 0.1),
                transparent
            );
            transform: rotate(45deg);
            z-index: -1;
        }
        
        .logo {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
        }
        
        .logo h1 {
            font-weight: 800;
            font-size: 36px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            
            
            letter-spacing: 1px;
            margin-bottom: 8px;
        }
        
        .logo p {
            color: #94a3b8;
            font-size: 14px;
            font-weight: 500;
        }
        
        .logo-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 15px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
        }
        
        .logo-icon i {
            font-size: 28px;
            color: white;
        }
        
        .tabs {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
        }
        
        .tabs::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
        }
        
        .tab {
            padding: 12px 0;
            font-weight: 600;
            color: #64748b;
            cursor: pointer;
            position: relative;
            flex: 1;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .tab.active {
            color: rgb(17, 123, 131);
        }
        
        .tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40%;
            height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            border-radius: 3px;
        }
        
        .form-container {
            position: relative;
            min-height: 300px;
        }
        
        .form {
            position: absolute;
            width: 100%;
            opacity: 0;
            pointer-events: none;
            transition: all 0.4s ease;
        }
        
        .form.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .input-group {
            position: relative;
            margin-bottom: 20px;
        }
        
        .input-group i {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
            transition: all 0.3s ease;
        }
        
        .form-input {
            width: 100%;
            padding: 16px 20px 16px 48px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.3s ease;
            background: rgba(15, 23, 42, 0.5);
            color: white;
        }
        
        .form-input::placeholder {
            color: #64748b;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
        }
        
        .form-input:focus + i {
            color: var(--primary);
        }
        
        .action-btn {
            width: 100%;
            padding: 16px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(90deg, var(--primary), var(--primary-dark));
            color: white;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
            margin-top: 10px;
            position: relative;
            overflow: hidden;
        }
        
        .action-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: all 0.6s ease;
        }
        
        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(99, 102, 241, 0.6);
        }
        
        .action-btn:hover::before {
            left: 100%;
        }
        
        .forgot-link {
            display: block;
            text-align: right;
            font-size: 13px;
            color: #64748b;
            text-decoration: none;
            margin-top: 10px;
            transition: all 0.3s ease;
        }
        
        .forgot-link:hover {
            color: var(--primary);
        }
        
        .divider {
            display: flex;
            align-items: center;
            margin: 25px 0;
            color: #64748b;
            font-size: 13px;
        }
        
        .divider::before, .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
            margin: 0 10px;
        }
        
        .social-login {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .social-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .social-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
            background: rgba(255, 255, 255, 0.1);
        }
        
        .floating-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }
        
        .shape {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.15;
            animation: float 15s linear infinite;
        }
        
        .shape-1 {
            width: 200px;
            height: 200px;
            background: var(--primary);
            top: -50px;
            left: -50px;
            animation-delay: 0s;
        }
        
        .shape-2 {
            width: 250px;
            height: 250px;
            background: var(--accent);
            bottom: -80px;
            right: -60px;
            animation-delay: 3s;
        }
        
        .shape-3 {
            width: 180px;
            height: 180px;
            background: var(--secondary);
            top: 40%;
            right: -30px;
            animation-delay: 6s;
        }
        
        @keyframes float {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(20px, 20px) rotate(5deg); }
            50% { transform: translate(40px, 0) rotate(0deg); }
            75% { transform: translate(20px, -20px) rotate(-5deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }
        
        .footer {
            text-align: center;
            margin-top: 30px;
            font-size: 12px;
            color: #721622;
        }
        
        .footer a {
            color: #94a3b8;
            text-decoration: none;
            margin: 0 8px;
            transition: all 0.3s ease;
        }
        
        .footer a:hover {
            color: var(--primary);
            text-decoration: underline;
        }
        
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
        }
        
        .particle {
            position: absolute;
            background: white;
            border-radius: 50%;
            opacity: 0.05;
            animation: fall linear infinite;
        }
        
        @keyframes fall {
            0% {
                transform: translateY(-100vh);
            }
            100% {
                transform: translateY(100vh);
            }
        }
        
        .toggle-password {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .toggle-password:hover {
            color: var(--primary);
        }
        
        @media (max-width: 480px) {
            .portal-container {
                width: 90%;
                padding: 30px;
            }
            
            .logo h1 {
                font-size: 28px;
            }
            
            .logo-icon {
                width: 50px;
                height: 50px;
            }
        }

/* Checkbox styling */
        .remember-me {
            display: flex;
            align-items: center;
            margin: 15px 0;
        }
        
        .remember-me input {
            appearance: none;
            width: 18px;
            height: 18px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            margin-right: 10px;
            position: relative;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .remember-me input:checked {
            background: var(--primary);
            border-color: var(--primary);
        }
        
        .remember-me input::after {
            content: '\f00c';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 10px;
            opacity: 0;
            transition: all 0.2s ease;
        }
        
        .remember-me input:checked::after {
            opacity: 1;
        }
        
        .remember-me label {
            color: #94a3b8;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="portal-container">
        <div class="floating-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
        </div>
        
        <div class="particles" id="particles"></div>
        
        <div class="logo">
            <div class="logo-icon">
                <i class="fas fa-shield-alt"></i>
            </div>
            <h1 style="font-family: fantasy ; color: aqua;">KEVAVİB PORTAL</h1>
            <p>Your Gateway to Premium Digital Experience</p>
        </div>
        
        <div class="tabs">
            <div class="tab active" data-tab="login">SIGN IN</div>
            <div class="tab" data-tab="register">REGISTER</div>
        </div>
        
        <div class="form-container">
            
            <form class="form active" id="login-form">
                <div class="input-group">
                    <input type="email" class="form-input" placeholder="Email Address" required>
                    <i class="fas fa-envelope"></i>
                </div>
                
                <div class="input-group">
                    <input type="password" class="form-input" placeholder="Password" required id="login-password">
                    <i class="fas fa-lock"></i>
                    <span class="toggle-password" onclick="togglePassword('login-password')">
                        <i class="fas fa-eye"></i>
                    </span>
                </div>
                
                <div class="remember-me">
                    <input type="checkbox" id="remember">
                    <label for="remember">Remember me</label>
                </div>
                
                <a href="#" class="forgot-link">Forgot password?</a>
                
                <button type="submit" class="action-btn">
                    <span class="relative z-10">SIGN IN</span>
                </button>
                
                <div class="divider">OR CONTINUE WITH</div>
                
                <div class="social-login">
                    <div class="social-btn" title="Sign in with Google">
                        <i class="fab fa-google"></i>
                    </div>
                    <div class="social-btn" title="Sign in with Apple">
                        <i class="fab fa-apple"></i>
                    </div>
                    <div class="social-btn" title="Sign in with GitHub">
                        <i class="fab fa-github"></i>
                    </div>
                    <div class="social-btn" title="Sign in with Twitter">
                        <i class="fab fa-twitter"></i>
                    </div>
                </div>
            </form>
            
            
            <form class="form" id="register-form">
                <div class="input-group">
                    <input type="text" class="form-input" placeholder="Full Name" required>
                    <i class="fas fa-user"></i>
                </div>
                
                <div class="input-group">
                    <input type="email" class="form-input" placeholder="Email Address" required>
                    <i class="fas fa-envelope"></i>
                </div>
                
                <div class="input-group">
                    <input type="password" class="form-input" placeholder="Create Password" required id="register-password">
                    <i class="fas fa-lock"></i>
                    <span class="toggle-password" onclick="togglePassword('register-password')">
                        <i class="fas fa-eye"></i>
                    </span>
                </div>
                
                <div class="input-group">
                    <input type="password" class="form-input" placeholder="Confirm Password" required id="confirm-password">
                    <i class="fas fa-lock"></i>
                    <span class="toggle-password" onclick="togglePassword('confirm-password')">
                        <i class="fas fa-eye"></i>
                    </span>
                </div>
                
                <button type="submit" class="action-btn">
                    <span class="relative z-10">CREATE ACCOUNT</span>
                </button>
                
                <div class="divider">OR CONTINUE WITH</div>
                
                <div class="social-login">
                    <div class="social-btn" title="Sign up with Google">
                        <i class="fab fa-google"></i>
                    </div>
                    <div class="social-btn" title="Sign up with Apple">
                        <i class="fab fa-apple"></i>
                    </div>
                    <div class="social-btn" title="Sign up with GitHub">
                        <i class="fab fa-github"></i>
                    </div>
                    <div class="social-btn" title="Sign up with Twitter">
                        <i class="fab fa-twitter"></i>
                    </div>
                </div>
            </form>
        </div>
        
        <div class="footer">
            <a href="#">Terms of Service</a>
            <a href="#">Privacy Policy</a>
            <a href="#">Help Center</a>
        </div>
    </div>

LOGIN KEVAKIB

Recomendado

Modelo de página de login HTML

pergunte ao kevakib ai

Hacker Login (ATUALIZAÇÃO) Edição Turca

HTML

CSS

JS

Recomendado

Modelo de página de login HTML

pergunte ao kevakib ai

Hacker Login (ATUALIZAÇÃO) Edição Turca

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS