WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Exemplo de código HTML da página de login em turco
25
Metehan
Abrir no Editor
Publique Seu Código
Recomendado
25 May 2025
Um Código de Liamgilles76
20 May 2025
Um Código de Gregory
16 June 2025
Um Código por 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ış.'; } });