WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Modello HTML/CS per pagina di accesso di lusso
558
Metehan
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
2 June 2025
MODULO DI NOLEGGIO AUTO
30 November 2024
Sito web di viaggi con bordo invertito
29 May 2025
Un codice di Mete
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'; });