WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Ejemplo de código HTML de la página de inicio de sesión en turco
1,436
Metehan
Abrir en el editor
Publica tu código
0
Recomendado
26 March 2026
Comparación de diseños HTML entre Roblox y Fortnite
10 August 2024
Filtro de galería
6 September 2025
Plantilla HTML de portafolio de desarrollador
HTML
Copy
Giriş Sayfası
Hoş Geldiniz
Kullanıcı Adı:
Şifre:
Giriş Yap
CSS
Copy
body { margin: 0; font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; /* Yedek arka plan rengi */ overflow: hidden; /* Taşmayı engelle */ } .background-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("arka_plan.jpg"); /* Kendi fotoğrafının URL'sini buraya ekle */ background-size: cover; background-position: center; filter: blur(5px); /* Arka planı bulanıklaştır (isteğe bağlı) */ z-index: -1; /* Arka plana gönder */ } .login-container { background-color: rgba(255, 255, 255, 0.8); /* Yarı saydam beyaz arka plan */ padding: 30px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); text-align: center; width: 350px; } .login-container h1 { margin-bottom: 20px; color: #333; } .input-group { margin-bottom: 15px; text-align: left; } .input-group label { display: block; margin-bottom: 5px; color: #555; } .input-group input { width: calc(100% - 12px); padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; width: 100%; } button:hover { background-color: #0056b3; } .error { color: red; margin-top: 10px; }
JS
Copy
document.getElementById('login-form').addEventListener('submit', function(event) { event.preventDefault(); // Sayfa yenilenmesini engelle const username = document.getElementById('username').value; const password = document.getElementById('password').value; const errorMessage = document.getElementById('error-message'); if (username === 'kullanici' && password === 'sifre') { // Başarılı giriş alert('Giriş Başarılı!'); // Yönlendirme veya başka işlemler burada yapılabilir } else { // Hata mesajı göster errorMessage.textContent = 'Kullanıcı adı veya şifre yanlış.'; } });