WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Senarig una home page
1074
Metehan
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
21 January 2025
CodePen Home Stelle e velocità di curvatura
21 October 2024
Input a una cifra con un elemento
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); } });
