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,176
Metehan
Abrir en el editor
Publica tu código
0
Recomendado
1 March 2023
Animación de texto para enlaces
17 April 2025
Un código de Mete Han
16 June 2025
Un código de daniel_pindou_7
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ış.'; } });