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
331
Metehan
Abrir no Editor
Publique Seu Código
Recomendado
20 September 2025
Demonstração de fogos de artifício animados em CSS, vaga-lumes e girassóis
6 March 2025
Um código por lebdev
6 October 2025
Animação de erro 404 CSS
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Giriş Sayfası</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="background-image"></div> <div class="login-container"> <h1>Hoş Geldiniz</h1> <form id="login-form"> <div class="input-group"> <label for="username">Kullanıcı Adı:</label> <input type="text" id="username" name="username" required> </div> <div class="input-group"> <label for="password">Şifre:</label> <input type="password" id="password" name="password" required> </div> <button type="submit">Giriş Yap</button> <div id="error-message" class="error"></div> </form> </div> <script src="script.js"></script> </body> </html>
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ış.'; } });
