लक्ज़री लॉगिन पेज HTML/CSS टेम्पलेट

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

19 October 2024

3D घूर्णन लॉगिन साइनअप फ़ॉर्म HTML CSS

27 June 2025

<!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>
</body>
</html>

CSS

JS

// 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';
});

लक्ज़री लॉगिन पेज HTML/CSS टेम्पलेट

अनुशंसित

एनिमेटेड HTML लॉगिन फ़ॉर्म

3D घूर्णन लॉगिन साइनअप फ़ॉर्म HTML CSS

पोर्टफोलियो वेबपेज उदाहरण

HTML

CSS

JS

अनुशंसित

एनिमेटेड HTML लॉगिन फ़ॉर्म

3D घूर्णन लॉगिन साइनअप फ़ॉर्म HTML CSS

पोर्टफोलियो वेबपेज उदाहरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS