ACCESSO KEVAKIB

326 kevekıbhack

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

14 September 2024

Modulo di Accesso Moderno

20 June 2025

Modulo di registrazione di accesso HTML con effetto carta 3D

25 June 2025

Modulo di accesso e registrazione con sfondo 3D

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>

ACCESSO KEVAKIB

Consigliato

Modulo di Accesso Moderno

Modulo di registrazione di accesso HTML con effetto carta 3D

Modulo di accesso e registrazione con sfondo 3D

HTML

CSS

JS

Consigliato

Modulo di Accesso Moderno

Modulo di registrazione di accesso HTML con effetto carta 3D

Modulo di accesso e registrazione con sfondo 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS