WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Senarig uma página inicial
902
Metehan
Abrir no Editor
Publique Seu Código
Recomendado
17 July 2025
Modelo de página HTML de erro 404
1 June 2025
Efeito de controle deslizante de imagem inicial do site
5 June 2025
Página de autenticação Login/Inscrição
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); } });
