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

909 Metehan

Abrir no Editor Video Publique Seu Código

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

Recomendado

30 September 2025

Animação de carregamento CSS com ondas e ondulações

13 November 2024

menu de navegação

24 July 2025

Estrutura de Stickman HTML com gancho de agarrar

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

Animação de carregamento CSS com ondas e ondulações

menu de navegação

Estrutura de Stickman HTML com gancho de agarrar

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS