Ejemplo de código HTML de la página de inicio de sesión en turco

952 Metehan

Abrir en el editor Video Publica tu código

Ejemplo de código HTML de la página de inicio de sesión en turco

Recomendado

30 August 2025

Animación CSS: barra de progreso y gotas

15 October 2024

Calculadora iOS

5 August 2025

Calculadora de hipotenusa: HTML, JavaScript, Canvas

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;
}

Recomendado

Animación CSS: barra de progreso y gotas

Calculadora iOS

Calculadora de hipotenusa: HTML, JavaScript, Canvas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS