Webleb - Snippet di Codice - Modello HTML/CS per pagina di accesso di lusso

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

Modello HTML/CS per pagina di accesso di lusso

Consigliato

MODULO DI NOLEGGIO AUTO

Sito web di viaggi con bordo invertito

Un codice di Mete

HTML

CSS

JS

Consigliato

MODULO DI NOLEGGIO AUTO

Sito web di viaggi con bordo invertito

Un codice di Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS