Código de formulario de inicio de sesión HTML CSS

824 bachir123

Abrir en el editor Publica tu código

Código de formulario de inicio de sesión HTML CSS

Recomendado

26 January 2025

El juego de pelota por diversión (por el Sr.)

9 February 2024

Inicio de Sesión/Registro

HTML

CSS

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #333;
}

.login-container {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.login-box {
  text-align: center;
}

h2 {
  margin-bottom: 1.5rem;
  font-size: 2rem;
  color: #333;
}

.input-group {
  margin-bottom: 1.5rem;
  text-align: left;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
}

input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

input:focus {
  border-color: #6a11cb;
  outline: none;
}

button {
  width: 100%;
  padding: 0.75rem;
  background: #6a11cb;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #2575fc;
}

.extra-links {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
}

.extra-links a {
  color: #6a11cb;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.extra-links a:hover {
  color: #2575fc;
}

Código de formulario de inicio de sesión HTML CSS

Recomendado

Un código de Redllowge

El juego de pelota por diversión (por el Sr.)

Inicio de Sesión/Registro

HTML

CSS

JS

Recomendado

Un código de Redllowge

El juego de pelota por diversión (por el Sr.)

Inicio de Sesión/Registro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS