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

906 Metehan

Ouvrir dans l'éditeur Video Publiez votre code

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

Recommandé

12 October 2025

Animation de chargement CSS Structure HTML

1 March 2023

Animation de texte de liens

11 February 2026

Intégrer le jeu SnowRider3D Unity (CDN)

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

JS

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

Recommandé

Animation de chargement CSS Structure HTML

Animation de texte de liens

Intégrer le jeu SnowRider3D Unity (CDN)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS