WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Luxury Login Page HTML/CSS Template
1,152
Metehan
Open In Editor
Publish Your Code
0
Recommended
22 July 2025
Samsung Galaxy S24 Ultra Landing Page
16 January 2025
Movie Website Landing Page Example
18 September 2024
Login button
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'; });