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

277 Metehan

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

30 March 2025

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

13 June 2025

ashimadison8 द्वारा लिखित एक कोड

26 March 2025

साइकिल व्यवसाय के लिए लैंडिंग पृष्ठ

HTML

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

अनुशंसित

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

ashimadison8 द्वारा लिखित एक कोड

साइकिल व्यवसाय के लिए लैंडिंग पृष्ठ

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS