Plantilla de página de inicio de sesión HTML

1,803 0 alejandrokundrah Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Plantilla de página de inicio de sesión HTML

Recomendado

19 October 2026

Juego de correr sin fin en 3D con HTML y JavaScript

22 April 2023

Menú desplegable con CSS

23 August 2025

Portafolio de desarrolladores web: HTML, CSS, JavaScript

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-box {
  width: 350px;
  padding: 40px;
  background-color: #f0f0f0;
  border-radius: 20px;
  box-shadow: 
    10px 10px 20px rgba(0, 0, 0, 0.1),
    -10px -10px 20px rgba(255, 255, 255, 0.9);
}

.login-box h2 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.input-group {
  position: relative;
  margin-bottom: 25px;
}

.input-group input {
  width: 100%;
  padding: 15px;
  border: none;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.1),
    inset -3px -3px 6px rgba(255, 255, 255, 0.9);
  outline: none;
  color: #333;
}

.input-group input::placeholder {
  color: #999;
}

button {
  width: 100%;
  padding: 15px;
  border: none;
  background-color: #4CAF50;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 
    5px 5px 10px rgba(0, 0, 0, 0.1),
    -5px -5px 10px rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

button:hover {
  background-color: #45a049;
}

button:active {
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.1),
    inset -3px -3px 6px rgba(255, 255, 255, 0.9);
}

.links {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.links a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.links a:hover {
  text-decoration: underline;
}

Comments 0

…