Modèle HTML et CSS pour la page de connexion de la SEAT Leon

1,019 Metehan

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML et CSS pour la page de connexion de la SEAT Leon

Recommandé

18 December 2025

Pied de page d'attribution CSS : Fixe, Centré, Transparent

6 June 2025

CARTE DE CONNEXION

26 June 2025

Blog technologique : technologie, produits et idées créatives

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEAT Leon - Giriş</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }

body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/api/placeholder/1920/1080');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

.login-container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 2.5rem;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            width: 100%;
            max-width: 420px;
            transition: transform 0.3s ease;
        }

.login-container:hover {
            transform: translateY(-5px);
        }

.logo {
            text-align: center;
            margin-bottom: 2rem;
        }

.logo h1 {
            color: #000;
            font-size: 2rem;
            font-weight: 300;
            letter-spacing: 2px;
            margin-bottom: 0.5rem;
        }

.form-group {
            margin-bottom: 1.8rem;
            position: relative;
        }

.form-group label {
            position: absolute;
            left: 45px;
            top: 50%;
            transform: translateY(-50%);
            color: #666;
            transition: all 0.3s;
            pointer-events: none;
            font-size: 0.95rem;
        }

.form-group input {
            width: 100%;
            padding: 1.2rem 1rem 1.2rem 45px;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s;
            background: rgba(0, 0, 0, 0.05);
        }

.form-group input:focus {
            background: rgba(0, 0, 0, 0.08);
            outline: none;
        }

.form-group input:focus + label,
        .form-group input:not(:placeholder-shown) + label {
            top: 0;
            left: 10px;
            background: white;
            padding: 0 5px;
            font-size: 0.8rem;
            color: #000;
        }

.form-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #666;
        }

.submit-btn {
            width: 100%;
            padding: 1.2rem;
            background: #000;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
            letter-spacing: 1px;
            margin-top: 1rem;
            text-transform: uppercase;
        }

.submit-btn:hover {
            background: #333;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

.links {
            margin-top: 1.8rem;
            text-align: center;
            font-size: 0.9rem;
            display: flex;
            justify-content: space-around;
        }

.links a {
            color: #333;
            text-decoration: none;
            transition: all 0.3s;
            position: relative;
            padding-bottom: 3px;
        }

.links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #000;
            transition: width 0.3s;
        }

.links a:hover::after {
            width: 100%;
        }

.links a:hover {
            color: #000;
        }

@media (max-width: 480px) {
            .login-container {
                margin: 1rem;
                padding: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="logo">
            <h1>LEON</h1>
        </div>
        <form>
            <div class="form-group">
                <input type="email" id="email" placeholder=" ">
                <label for="email">E-posta Adresi</label>
                <i class="fas fa-envelope"></i>
            </div>
            <div class="form-group">
                <input type="password" id="password" placeholder=" ">
                <label for="password">Şifre</label>
                <i class="fas fa-lock"></i>
            </div>
            <button type="submit" class="submit-btn">Giriş Yap</button>
        </form>
        <div class="links">
            <a href="#">Şifremi Unuttum</a>
            <a href="#">Yeni Hesap Oluştur</a>
        </div>
    </div>
</body>
</html>

CSS

/* Reset ve genel stiller */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background-image.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Login container stilleri */
.login-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 420px;
    transition: transform 0.3s ease;
}

.login-container:hover {
    transform: translateY(-5px);
}

/* Logo stilleri */
.logo {
    text-align: center;
    margin-bottom: 2rem;
}

.logo h1 {
    color: #000;
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

/* Form grup stilleri */
.form-group {
    margin-bottom: 1.8rem;
    position: relative;
}

.form-group label {
    position: absolute;
    left: 45px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    transition: all 0.3s;
    pointer-events: none;
    font-size: 0.95rem;
}

.form-group input {
    width: 100%;
    padding: 1.2rem 1rem 1.2rem 45px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s;
    background: rgba(0, 0, 0, 0.05);
}

.form-group input:focus {
    background: rgba(0, 0, 0, 0.08);
    outline: none;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
    top: 0;
    left: 10px;
    background: white;
    padding: 0 5px;
    font-size: 0.8rem;
    color: #000;
}

.form-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
}

/* Buton stilleri */
.submit-btn {
    width: 100%;
    padding: 1.2rem;
    background: #000;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 1rem;
    text-transform: uppercase;
}

.submit-btn:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Link stilleri */
.links {
    margin-top: 1.8rem;
    text-align: center;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-around;
}

.links a {
    color: #333;
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
    padding-bottom: 3px;
}

.links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    transition: width 0.3s;
}

.links a:hover::after {
    width: 100%;
}

.links a:hover {
    color: #000;
}

/* Responsive tasarım */
@media (max-width: 480px) {
    .login-container {
        margin: 1rem;
        padding: 2rem;
    }
}

// Form doğrulama ve animasyon işlemleri
document.addEventListener('DOMContentLoaded', function() {
    // Form elementlerini seç
    const form = document.querySelector('form');
    const emailInput = document.querySelector('#email');
    const passwordInput = document.querySelector('#password');
    const submitBtn = document.querySelector('.submit-btn');

// Form gönderim işlemi
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Form doğrulama
        if (validateForm()) {
            // Loading efekti
            submitBtn.innerHTML = 'Giriş Yapılıyor...';
            submitBtn.disabled = true;
            
            // API çağrısı simülasyonu
            setTimeout(() => {
                submitBtn.innerHTML = 'Giriş Başarılı!';
                submitBtn.style.background = '#28a745';
                
                // Yönlendirme simülasyonu
                setTimeout(() => {
                    window.location.href = '/dashboard';
                }, 1000);
            }, 2000);
        }
    });

// Form doğrulama fonksiyonu
    function validateForm() {
        let isValid = true;
        
        // Email doğrulama
        if (!emailInput.value || !isValidEmail(emailInput.value)) {
            showError(emailInput, 'Geçerli bir email adresi giriniz');
            isValid = false;
        } else {
            removeError(emailInput);
        }
        
        // Şifre doğrulama
        if (!passwordInput.value || passwordInput.value.length < 6) {
            showError(passwordInput, 'Şifre en az 6 karakter olmalıdır');
            isValid = false;
        } else {
            removeError(passwordInput);
        }
        
        return isValid;
    }

// Email format doğrulama
    function isValidEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }

// Hata mesajı gösterme
    function showError(input, message) {
        const formGroup = input.parentElement;
        if (!formGroup.querySelector('.error-message')) {
            const errorDiv = document.createElement('div');
            errorDiv.className = 'error-message';
            errorDiv.style.color = '#dc3545';
            errorDiv.style.fontSize = '0.8rem';
            errorDiv.style.marginTop = '5px';
            errorDiv.textContent = message;
            formGroup.appendChild(errorDiv);
        }
        input.style.borderColor = '#dc3545';
    }

// Hata mesajını kaldırma
    function removeError(input) {
        const formGroup = input.parentElement;
        const errorDiv = formGroup.querySelector('.error-message');
        if (errorDiv) {
            formGroup.removeChild(errorDiv);
        }
        input.style.borderColor = '';
    }

// Input focus animasyonları
    const inputs = document.querySelectorAll('.form-group input');
    inputs.forEach(input => {
        // Focus olduğunda container'a active class ekle
        input.addEventListener('focus', function() {
            this.parentElement.classList.add('active');
        });

// Focus kaldırıldığında ve input boşsa active class'ı kaldır
        input.addEventListener('blur', function() {
            if (!this.value) {
                this.parentElement.classList.remove('active');
            }
        });
    });
});

// Parola göster/gizle fonksiyonu
const togglePassword = document.querySelector('.toggle-password');
if (togglePassword) {
    togglePassword.addEventListener('click', function() {
        const password = document.querySelector('#password');
        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
        password.setAttribute('type', type);
        this.classList.toggle('fa-eye-slash');
    });
}