तुर्की लॉगिन पृष्ठ HTML और CSS कोड

अनुशंसित

10 May 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>

तुर्की लॉगिन पृष्ठ HTML और CSS कोड

अनुशंसित

एक कोड jrj332790 द्वारा

Roblox लॉगिन पेज HTML CSS

सहराविलौए द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

एक कोड jrj332790 द्वारा

Roblox लॉगिन पेज HTML CSS

सहराविलौए द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS