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

822 Metehan

Abrir en el editor Publica tu código

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

Recomendado

24 January 2025

Cuadro de registro/inicio de sesión de rotación 3D

15 October 2024

Acerca de la página

28 May 2025

Formulario de inicio de sesión futurista

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

Cuadro de registro/inicio de sesión de rotación 3D

Acerca de la página

Formulario de inicio de sesión futurista

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS