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
1394
Metehan
Abrir en el editor
Video
Publica tu código
0
Recomendado
30 March 2025
Un código de ytr3d3
31 October 2025
Portafolio de desarrollador: Servicios de diseño y desarrollo web
20 April 2025
Un código de Metehan
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); } });
