Webleb - UI Elements - Luxury Login Page HTML/CSS Template

HTML

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

Luxury Login Page HTML/CSS Template

Recommended

Home Rent Car Landing Page

Bakery HTML Website Template

Gradient Login Form HTML CSS

HTML

CSS

JS

Recommended

Home Rent Car Landing Page

Bakery HTML Website Template

Gradient Login Form HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS