WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Liebe und respektiere die Natur
1122
Metehan
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
25 June 2025
Ein Code von Mete
12 August 2024
10 December 2025
Wie eine Stoffpuppe getroffen
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lüks Yaşam</title> <style> body { margin: 0; padding: 0; height: 100vh; background-image: url('https://www.istockphoto.com/tr/foto%C4%9Fraf/luxury-sports-car-and-yachts-at-puerto-banus-in-marbella-gm616255418-107151133'); background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: Arial, sans-serif; } .login-container { background-color: rgba(255, 255, 255, 0.9); padding: 40px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); } input { display: block; margin: 10px 0; padding: 10px; width: 250px; border: 1px solid #ddd; border-radius: 5px; } button { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } h2 { text-align: center; color: #333; margin-bottom: 20px; } </style> </head> <body> <div class="login-container"> <h2>Giriş Yap</h2> <form> <input type="email" placeholder="E-posta" required> <input type="password" placeholder="Şifre" required> <button type="submit">Giriş</button> </form> </div> <script> // Form gönderimini dinle document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); // Formun normal gönderimini engelle // Form verilerini al const email = document.querySelector('input[type="email"]').value; const password = document.querySelector('input[type="password"]').value; // Form validasyonu if (!email || !password) { alert('Lütfen tüm alanları doldurun!'); return; } // E-posta formatı kontrolü const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { alert('Geçerli bir e-posta adresi giriniz!'); return; } // Şifre uzunluğu kontrolü if (password.length < 6) { alert('Şifre en az 6 karakter olmalıdır!'); return; } // Başarılı giriş simülasyonu console.log('Giriş bilgileri:', { email: email, password: password }); // Giriş başarılı mesajı alert('Giriş başarılı!'); // Form alanlarını temizle document.querySelector('form').reset(); }); // Input alanları için animasyon efekti const inputs = document.querySelectorAll('input'); inputs.forEach(input => { input.addEventListener('focus', function() { this.style.transform = 'scale(1.02)'; this.style.transition = 'all 0.3s ease'; }); input.addEventListener('blur', function() { this.style.transform = 'scale(1)'; }); }); // Buton hover efekti için ek JavaScript document.querySelector('button').addEventListener('mouseover', function() { this.style.opacity = '0.8'; }); document.querySelector('button').addEventListener('mouseout', function() { this.style.opacity = '1'; }); </script> </body> </html>
CSS
Copy
body { margin: 0; padding: 0; height: 100vh; background-image: url('https://images.pexels.com/photos/1173777/pexels-photo-1173777.jpeg'); background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: Arial, sans-serif; } .login-container { background-color: rgba(255, 255, 255, 0.8); padding: 40px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); } input { display: block; margin: 10px 0; padding: 10px; width: 250px; border: 1px solid #ddd; border-radius: 5px; background-color: rgba(255, 255, 255, 0.9); /* Giriş alanlarının arka planını daha açık yaptık */ } button { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } h2 { text-align: center; color: #333; margin-bottom: 20px; }
JS
Copy
// Form gönderimini dinle document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); // Formun normal gönderimini engelle // Form verilerini al const email = document.querySelector('input[type="email"]').value; const password = document.querySelector('input[type="password"]').value; // Form validasyonu if (!email || !password) { alert('Lütfen tüm alanları doldurun!'); return; } // E-posta formatı kontrolü const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { alert('Geçerli bir e-posta adresi giriniz!'); return; } // Şifre uzunluğu kontrolü if (password.length < 6) { alert('Şifre en az 6 karakter olmalıdır!'); return; } // Başarılı giriş simülasyonu console.log('Giriş bilgileri:', { email: email, password: password }); // Giriş başarılı mesajı alert('Giriş başarılı!'); // Form alanlarını temizle document.querySelector('form').reset(); }); // Input alanları için animasyon efekti const inputs = document.querySelectorAll('input'); inputs.forEach(input => { input.addEventListener('focus', function() { this.style.transform = 'scale(1.02)'; this.style.transition = 'all 0.3s ease'; }); input.addEventListener('blur', function() { this.style.transform = 'scale(1)'; }); }); // Buton hover efekti için ek JavaScript document.querySelector('button').addEventListener('mouseover', function() { this.style.opacity = '0.8'; }); document.querySelector('button').addEventListener('mouseout', function() { this.style.opacity = '1'; });
