Modelo de página de login HTML CSS do SEAT Leon

905 Metehan

Abrir no Editor Video Publique Seu Código

Modelo de página de login HTML CSS do SEAT Leon

Recomendado

12 December 2025

Estrutura HTML do Jogo da Velha

20 February 2026

Modelo HTML para portfólio de desenvolvedor com fundo animado

6 November 2024

Modelo de site de portfólio de desenvolvedor

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

Recomendado

Estrutura HTML do Jogo da Velha

Modelo HTML para portfólio de desenvolvedor com fundo animado

Modelo de site de portfólio de desenvolvedor

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS