Code HTML et CSS de la page de connexion turque

1,401 Metehan

Ouvrir dans l'éditeur Publiez votre code

Code HTML et CSS de la page de connexion turque

Recommandé

10 July 2025

Animation d'interface flottante CSS

19 September 2025

Exemples de menus déroulants CSS animés

28 August 2025

Site Web d'architecture et de conception avec Tailwind CSS

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