Code HTML et CSS de la page de connexion turque

1,326 Metehan

Ouvrir dans l'éditeur Publiez votre code

Code HTML et CSS de la page de connexion turque

Recommandé

12 December 2025

Modèle de jeu Flappy Bird sur toile HTML

7 November 2024

Effet d'animation de survol de texte

11 August 2025

Collection d'animations CSS Circle

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>

CSS