WEBLEB
Home
AI Editor
Community Chat
Login
Pro
English
English
Français
Español
Luxury Login Page HTML/CSS Template
1,459
Metehan
0
Remix
Open In Editor
Fullscreen
Discuss
Publish Your Code
0
Recommended
18 October 2024
Page web de Modern
10 September 2024
NETFLIX LOADING PAGE
17 April 2026
Movie Website HTML Template
HTML
Copy
Lüks Yaşam
Giriş Yap
Giriş
CSS
Copy
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; }
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.transition = 'all 0.3s ease'; });