Código HTML y CSS de la página de inicio de sesión en turco

Abrir en el editor Publica tu código

Recomendado

29 September 2024

Barra de navegación responsiva premium de CodePen Home

10 June 2025

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Giriş sayfası">
    <meta name="author" content="Webleb">
    <title>Webleb - Giriş Yap</title>
    <link rel="stylesheet" href="/css/styles.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(to right, #2980b9, #2c3e50);
            color: #ecf0f1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .login-container {
            background-color: #34495e;
            padding: 50px;
            border-radius: 15px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            text-align: center;
            width: 100%;
            max-width: 400px;
        }
        .login-container h1 {
            margin-bottom: 30px;
            font-size: 28px;
            color: #ecf0f1;
        }
        .input-group {
            margin-bottom: 30px;
            position: relative;
        }
        .input-group input {
            width: 100%;
            padding: 15px 10px;
            background: #2c3e50;
            border: none;
            border-radius: 5px;
            color: #ecf0f1;
            font-size: 16px;
            outline: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .input-group label {
            position: absolute;
            top: 50%;
            left: 15px;
            transform: translateY(-50%);
            font-size: 16px;
            color: #bdc3c7;
            transition: 0.3s;
            pointer-events: none;
        }
        .input-group input:focus ~ label,
        .input-group input:not(:placeholder-shown) ~ label {
            top: -10px;
            left: 10px;
            background-color: #34495e;
            padding: 0 5px;
            font-size: 14px;
            color: #3498db;
        }
        .login-btn {
            display: inline-block;
            width: 100%;
            padding: 15px;
            margin-top: 20px;
            background-color: #3498db;
            border: none;
            border-radius: 5px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .login-btn:hover {
            background-color: #2980b9;
        }
        .forgot-password {
            display: block;
            margin-top: 20px;
            font-size: 14px;
            color: #bdc3c7;
            text-decoration: none;
            transition: color 0.3s;
        }
        .forgot-password:hover {
            color: #3498db;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h1>Giriş Yap</h1>
        <form>
            <div class="input-group">
                <input type="text" name="username" required placeholder=" " id="username">
                <label for="username">Kullanıcı Adı</label>
            </div>
            <div class="input-group">
                <input type="password" name="password" required placeholder=" " id="password">
                <label for="password">Şifre</label>
            </div>
            <button class="login-btn" type="submit">Giriş Yap</button>
            <a href="#" class="forgot-password">Şifremi Unuttum?</a>
        </form>
    </div>
</body>
</html>

Código HTML y CSS de la página de inicio de sesión en turco

Recomendado

efecto revelador

Barra de navegación responsiva premium de CodePen Home

Un código de Mete

HTML

CSS

JS

Recomendado

efecto revelador

Barra de navegación responsiva premium de CodePen Home

Un código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS