Matrix es un directorio de páginas de inicio

1,565 Metehan

Abrir en el editor Publica tu código

Matrix es un directorio de páginas de inicio

Recomendado

31 October 2025

Efecto de texto con fallo CSS

26 August 2025

Plantilla HTML para sitio web de películas

14 March 2026

Fútbol aleatorio

HTML

CSS

body {

background-color: #f9e74d; /* Arka plan rengi */

background-image: repeating-linear-gradient(

45deg,

rgba(255, 255, 255, 0.3) 0%,

rgba(255, 255, 255, 0.3) 25%,

rgba(255, 255, 255, 0.5) 25%,

rgba(255, 255, 255, 0.5) 50%

); /* Matris deseni */

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

.login-container {

background-color: white;

padding: 40px;

border-radius: 15px;

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);

text-align: center;

width: 350px;

}

h1 {

color: #333;

margin-bottom: 20px;

}

.input-group {

margin-bottom: 15px;

}

input[type="text"], input[type="password"] {

width: 100%;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

transition: border-color 0.3s;

}

input[type="text"]:focus, input[type="password"]:focus {

border-color: #f9d74d; /* Sarı ton */

outline: none;

}

button {

background-color: #f9e74d; /* Sarı ton */

border: none;

padding: 10px;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

transition: background-color 0.3s;

}

button:hover {

background-color: #e6c72e; /* Daha koyu sarı */

}

#message {

color: red;

margin-top: 10px;

}

.footer {

margin-top: 20px;

}

.footer p {

color: #666;

}

.footer a {

color: #f9e74d;

text-decoration: none;

}

.footer a:hover {

text-decoration: underline;

}