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

867 alejandrokundrah

Abrir en el editor Publica tu código

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

Recomendado

26 June 2025

Sitio de comercio electrónico HTML, Tailwind CSS, Compras

21 January 2024

Código de Icono Social en 3D

25 March 2025

Un código de andrej.social.network

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

Recomendado

Sitio de comercio electrónico HTML, Tailwind CSS, Compras

Código de Icono Social en 3D

Un código de andrej.social.network

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS