WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Senarig une page d'accueil
898
Metehan
Ouvrir dans l'éditeur
Publiez votre code
8 May 2025
lancer une fusée
29 August 2024
Page 404 avec parallaxe
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); } });
