Plantilla HTML de página de inicio de sesión en turco

1004 Metehan

Abrir en el editor Video Publica tu código

Plantilla HTML de página de inicio de sesión en turco

Recomendado

9 December 2025

Diseño de formulario de inicio de sesión animado con CSS

4 August 2025

Sinfonía del agotamiento

13 December 2024

Un código de creativefunction305

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giriş Sayfası</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <div class="login-content">
            <div class="login-logo">Giriş Yap</div>
            
            <div id="errorMessage" class="error-message"></div>
            
            <form id="loginForm">
                <div class="input-group">
                    <input 
                        type="text" 
                        id="username" 
                        placeholder="Kullanıcı Adı" 
                        required
                    >
                </div>
                
                <div class="input-group">
                    <input 
                        type="password" 
                        id="password" 
                        placeholder="Şifre" 
                        required
                    >
                </div>
                
                <button type="submit" class="login-btn">Giriş Yap</button>
            </form>

<div class="social-login">
                <button class="social-btn google-btn">Google</button>
                <button class="social-btn facebook-btn">Facebook</button>
            </div>
        </div>
    </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-attachment: fixed;
}

.login-container {
    width: 100%;
    max-width: 380px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 20px;
}

.login-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, #5d3fd3, transparent);
    animation: rotate 4s linear infinite;
    z-index: 1;
}

.login-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    margin: 5px;
    border-radius: 15px;
    z-index: 2;
}

.login-content {
    position: relative;
    z-index: 3;
}

.login-logo {
    font-size: 2.5rem;
    font-weight: bold;
    color: #5d3fd3;
    margin-bottom: 30px;
}

.input-group {
    margin-bottom: 20px;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    outline: none;
    transition: all 0.3s ease;
}

.input-group input:focus {
    border-color: #5d3fd3;
    box-shadow: 0 0 10px rgba(93,63,211,0.2);
}

.login-btn {
    width: 100%;
    padding: 12px;
    background-color: #5d3fd3;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.login-btn:hover {
    background-color: #4a32a8;
    transform: translateY(-3px);
}

.error-message {
    color: #ff4757;
    margin-bottom: 15px;
    display: none;
}

.social-login {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.social-btn {
    width: 45%;
    padding: 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.social-btn:hover {
    transform: scale(1.05);
}

.google-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
}

.facebook-btn {
    background-color: #3b5998;
    color: white;
}

@media (max-width: 480px) {
    .login-container {
        width: 90%;
        padding: 20px;
    }

.login-logo {
        font-size: 2rem;
    }

.social-login {
        flex-direction: column;
    }

.social-btn {
        width: 100%;
        margin-bottom: 10px;
    }
}

@keyframes rotate {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
    }
}

JS

document.getElementById('loginForm').addEventListener('submit', validateLogin);

Recomendado

Diseño de formulario de inicio de sesión animado con CSS

Sinfonía del agotamiento

Un código de creativefunction305

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS