Um código por smartfunction263

Abrir no Editor Video Publique Seu Código

Recomendado

13 June 2025

Modelo de site de portfólio HTML CSS JavaScript

30 March 2025

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

Um código por smartfunction263

Recomendado

Um Código por ashimadison8

Modelo de site de portfólio HTML CSS JavaScript

Um código por ytr3d3

HTML

CSS

JS

Recomendado

Um Código por ashimadison8

Modelo de site de portfólio HTML CSS JavaScript

Um código por ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS