Exemple de code HTML pour une page de connexion turque

1,375 Metehan

Ouvrir dans l'éditeur Publiez votre code

Exemple de code HTML pour une page de connexion turque

Recommandé

21 August 2024

Page de chargement animée

12 December 2025

Exemple de code pour un interrupteur à bascule fluide en CSS

21 July 2023

Formulaire avec arrière-plan vidéo

HTML

CSS

body {
    margin: 0;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0; /* Yedek arka plan rengi */
    overflow: hidden; /* Taşmayı engelle */
}

.background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("arka_plan.jpg"); /* Kendi fotoğrafının URL'sini buraya ekle */
    background-size: cover;
    background-position: center;
    filter: blur(5px); /* Arka planı bulanıklaştır (isteğe bağlı) */
    z-index: -1; /* Arka plana gönder */
}

.login-container {
    background-color: rgba(255, 255, 255, 0.8); /* Yarı saydam beyaz arka plan */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 350px;
}

.login-container h1 {
    margin-bottom: 20px;
    color: #333;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

.input-group input {
    width: calc(100% - 12px);
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

button:hover {
    background-color: #0056b3;
}

.error {
    color: red;
    margin-top: 10px;
}