Plantilla HTML CSS para la página de inicio de sesión del SEAT León

1,149 Metehan

Abrir en el editor Publica tu código

Plantilla HTML CSS para la página de inicio de sesión del SEAT León

Recomendado

11 October 2025

Animación de carga CSS: Cargador circular

28 August 2024

Forma de idea

18 December 2025

Arena del rey del coche

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