INICIO DE SESIÓN DE KEVAKIB

Abrir en el editor Video Publica tu código

Recomendado

3 March 2023

Formulario de inicio de sesión HTML (francés)

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

Animación de texto fluida

Un código de alejandrokundrah

Formulario de inicio de sesión HTML (francés)

HTML

CSS

JS

Recomendado

Animación de texto fluida

Un código de alejandrokundrah

Formulario de inicio de sesión HTML (francés)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS