WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Senarig una página de inicio
1076
Metehan
Abrir en el editor
Publica tu código
Recomendado
23 August 2025
El tiempo en Turquía: pronóstico del tiempo instantáneo para 7 días
10 May 2025
Un código de jrj332790
13 November 2024
Menú de navegación
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Secure Login Portal</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet"> <style> /* Root Variables */ :root { --primary-color: #00BFFF; --secondary-color: #141414; --text-color: #FFFFFF; --input-bg: rgba(255, 255, 255, 0.1); --button-glow: rgba(0, 191, 255, 0.8); --background-glow: rgba(0, 191, 255, 0.4); } /* General Reset */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto Mono', monospace; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #141414, #000000); overflow: hidden; color: var(--text-color); } .background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-image: url('https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80'); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(5px); opacity: 0.8; } .login-container { background: rgba(0, 0, 0, 0.8); padding: 50px; border-radius: 20px; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8); position: relative; width: 400px; animation: fadeIn 1.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .login-container h1 { font-size: 36px; margin-bottom: 30px; letter-spacing: 2px; color: var(--primary-color); text-transform: uppercase; text-shadow: 0 0 10px var(--button-glow); } .input-group { margin-bottom: 30px; position: relative; } .input-group input { width: 100%; padding: 20px; border: none; border-radius: 10px; background: var(--input-bg); color: var(--text-color); font-size: 16px; outline: none; transition: 0.3s; box-shadow: 0 0 10px var(--button-glow); } .input-group input:focus { border: 1px solid var(--primary-color); box-shadow: 0 0 15px var(--button-glow); } .input-group label { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.7); pointer-events: none; transition: 0.3s; text-shadow: 0 0 5px var(--button-glow); } .input-group input:focus + label, .input-group input:valid + label { top: 0; font-size: 14px; color: var(--primary-color); text-shadow: 0 0 10px var(--button-glow); } .login-btn, .signup-btn { width: 100%; padding: 20px; border: none; border-radius: 10px; font-size: 18px; font-weight: bold; cursor: pointer; margin-top: 20px; position: relative; overflow: hidden; transition: 0.3s; background: linear-gradient(90deg, var(--primary-color), #00FFFF); color: var(--text-color); box-shadow: 0 0 15px var(--button-glow); text-shadow: 0 0 10px var(--button-glow); } .login-btn:hover { background: linear-gradient(90deg, #00FFFF, var(--primary-color)); box-shadow: 0 0 20px var(--button-glow); } .signup-btn { background: var(--text-color); color: var(--primary-color); text-shadow: 0 0 10px var(--button-glow); } .signup-btn:hover { background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 20px var(--button-glow); } .forgot-password { display: block; margin-top: 20px; font-size: 14px; text-decoration: none; color: rgba(255, 255, 255, 0.8); text-shadow: 0 0 5px var(--button-glow); } .forgot-password:hover { text-decoration: underline; color: var(--primary-color); } </style> </head> <body> <div class="background"></div> <div class="login-container"> <h1>Secure Login</h1> <form> <div class="input-group"> <input type="text" id="username" required> <label for="username">Username</label> </div> <div class="input-group"> <input type="password" id="password" required> <label for="password">Password</label> </div> <button type="submit" class="login-btn">Log In</button> <button type="button" class="signup-btn">Sign Up</button> <a href="#" class="forgot-password">Forgot Password?</a> </form> </div> </body> </html>
CSS
Copy
/* General Reset */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background: url('1000006351.gif') no-repeat center center fixed; background-size: cover; overflow: hidden; color: var(--text-color); } .background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .background .circle { position: absolute; width: 200px; height: 200px; background: var(--primary-color); opacity: 0.5; border-radius: 50%; animation: float 5s infinite ease-in-out alternate; } .background .circle:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; } .background .circle:nth-child(2) { top: 60%; left: 40%; animation-delay: 2s; } .background .circle:nth-child(3) { top: 30%; left: 80%; animation-delay: 4s; } @keyframes float { to { transform: translateY(-20px) scale(1.2); } } /* Login Container */ .login-container { background: rgba(0, 0, 0, 0.85); padding: 40px; border-radius: 15px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); position: relative; width: 400px; animation: fadeIn 1.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .login-container h1 { font-size: 36px; margin-bottom: 20px; letter-spacing: 2px; color: var(--primary-color); text-transform: uppercase; } /* Input Group */ .input-group { margin-bottom: 20px; position: relative; } .input-group input { width: 100%; padding: 15px; border: none; border-radius: 5px; background: var(--input-bg); color: var(--text-color); font-size: 16px; outline: none; transition: 0.3s; box-shadow: 0 0 5px var(--button-glow); } .input-group input:focus { border: 1px solid var(--primary-color); box-shadow: 0 0 10px var(--button-glow); } .input-group label { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.7); pointer-events: none; transition: 0.3s; } .input-group input:focus + label, .input-group input:valid + label { top: 0; font-size: 12px; color: var(--primary-color); } /* Buttons */ .login-btn, .signup-btn { width: 100%; padding: 15px; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 10px; position: relative; overflow: hidden; transition: 0.3s; background: linear-gradient(90deg, var(--primary-color), #ff6161); color: var(--text-color); box-shadow: 0 0 10px var(--button-glow); } .login-btn:hover { background: linear-gradient(90deg, #ff6161, var(--primary-color)); box-shadow: 0 0 15px var(--button-glow); } .signup-btn { background: var(--text-color); color: var(--primary-color); } .signup-btn:hover { background: rgba(255, 255, 255, 0.9); } .forgot-password { display: block; margin-top: 15px; font-size: 14px; text-decoration: none; color: rgba(255, 255, 255, 0.8); } .forgot-password:hover { text-decoration: underline; } </style>
JS
Copy
document.addEventListener('DOMContentLoaded', () => { const matrix = document.getElementById('matrix'); const columns = 30; // Kolon sayısı const rows = 20; // Satır sayısı for (let i = 0; i < columns; i++) { const column = document.createElement('div'); column.className = 'column'; column.style.left = `${i * 3}vw`; // Kolon aralığı column.style.animationDuration = `${Math.random() * 10 + 5}s`; for (let j = 0; j < rows; j++) { const char = document.createElement('span'); char.textContent = "NETFLIX"; char.style.setProperty('--delay', j + i); column.appendChild(char); } matrix.appendChild(column); } });
