Modello HTML/CS per pagina di accesso di lusso

898 Metehan

Apri nell'Editor Video Pubblica il Tuo Codice

Modello HTML/CS per pagina di accesso di lusso

Consigliato

18 December 2025

Codice di incorporamento del gioco HTML5 BitLife Life Simulator

21 July 2025

Nesso di dati cyberpunk

12 September 2025

Slider di immagini HTML CSS JavaScript

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

Consigliato

Codice di incorporamento del gioco HTML5 BitLife Life Simulator

Nesso di dati cyberpunk

Slider di immagini HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS