Un código de smartfunction263

1,881 Metehan

Abrir en el editor Publica tu código

Recomendado

10 December 2025

Código fuente de JavaScript del juego de la serpiente HTML Canvas

10 June 2025

Un código de alejandrokundrah

19 September 2025

Animación CSS: Movimiento de figuras burocráticas

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

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