INICIO DE SESIÓN DE KEVAKIB

1030 kevekıbhack

Abrir en el editor Video Publica tu código

Recomendado

28 June 2025

Navegación de la barra lateral HTML del panel de control de OMIC EST

4 December 2024

Un código de fastcloud893

21 January 2025

Inicio de CodePen Estrellas y velocidad Warp

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>

INICIO DE SESIÓN DE KEVAKIB

Recomendado

Navegación de la barra lateral HTML del panel de control de OMIC EST

Un código de fastcloud893

Inicio de CodePen Estrellas y velocidad Warp

HTML

CSS

JS

Recomendado

Navegación de la barra lateral HTML del panel de control de OMIC EST

Un código de fastcloud893

Inicio de CodePen Estrellas y velocidad Warp

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS