Plantilla de formulario de inicio de sesión más sencilla

1552 btn7

Abrir en el editor Publica tu código

Plantilla de formulario de inicio de sesión más sencilla

Recomendado

30 March 2025

Un código de ytr3d3

7 November 2024

Formulario de inicio de sesión

24 June 2025

Bienes Raíces de Élite: Apartamentos, Villas, Casas en Venta y Alquiler

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <body class="align">

<div class="grid">
  
      <form action="/" method="post" class="form login">
  
        <header class="login__header">
          <h3 class="login__title">Login</h3>
        </header>
  
        <div class="login__body">
  
          <div class="form__field">
            <input type="email" placeholder="Email" required>
          </div>
  
          <div class="form__field">
            <input type="password" placeholder="Password" required>
          </div>
  
        </div>
  
        <footer class="login__footer">
          <input type="submit" value="Login">
  
          <p><span class="icon icon--info">?</span><a href="#">Forgot Password</a></p>
        </footer>
  
      </form>
  
    </div>
  
  </body>
</body>
</html>

CSS

.align {
  display: grid;
  place-items: center;
}
:root {
  --gridMaxWidth: 24em;
  --gridWidth: 90%;
}
.grid {
  inline-size: var(--gridWidth);
  margin-inline: auto;
  max-inline-size: var(--gridMaxWidth);
}
.icon {
  block-size: 1.25em;
  display: inline-block;
  inline-size: 1.25em;
  line-height: 1.25em;
  margin-right: 0.625em;
  text-align: center;
  vertical-align: middle;
}
.icon--info {
  background-color: #e5e5e5;
  border-radius: 50%;
}
:root {
  --bodyBackgroundColor: #eaeaea;
  --bodyColor: #999;
  --bodyFontFamily: "Helvetica", "Arial";
  --bodyFontFamilyFallback: sans-serif;
  --bodyFontSize: 0.875rem;
  --bodyFontWeight: 400;
  --bodyLineHeight: 1.5;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
body {
  background-color: var(--bodyBackgroundColor);
  font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback);
  font-size: var(--bodyFontSize);
  font-weight: var(--bodyFontWeight);
  line-height: var(--bodyLineHeight);
  margin: 0;
  min-block-size: 100vh;
}
:root {
  --anchorColor: inherit;
  --anchorHoverColor: #1dabb8;
}
a {
  color: var(--anchorColor);
  text-decoration: none;
  transition: color 0.3s;
}
a:hover {
  color: var(--anchorHoverColor);
}
fieldset {
  border: none;
  margin: 0;
}
input {
  appearance: none;
  border: none;
  font: inherit;
  margin: 0;
  outline: none;
  padding: 0;
}
input[type="submit"] {
  cursor: pointer;
}
.form input[type="email"],
.form input[type="password"] {
  inline-size: 100%;
}
:root {
  --loginBorderRadius: 0.25em;
  --loginHeaderBackgroundColor: #282830;
  --loginInputBorderRadius: 0.25em;
}
.login__header {
  background-color: var(--loginHeaderBackgroundColor);
  border-top-left-radius: var(--loginBorderRadius);
  border-top-right-radius: var(--loginBorderRadius);
  color: #fff;
  padding: 1.5em;
  text-align: center;
  text-transform: uppercase;
}
.login__title {
  font-size: 1rem;
  margin: 0;
}
.login__body {
  background-color: #fff;
  padding: 1.5em;
  position: relative;
}
.login__body::before {
  background-color: #fff;
  content: "";
  height: 0.5em;
  left: 50%;
  margin-left: -0.25em;
  margin-top: -0.25em;
  position: absolute;
  top: 0;
  transform: rotate(45deg);
  width: 0.5em;
}
.login input[type="email"],
.login input[type="password"] {
  border: 0.0625em solid #e5e5e5;
  padding: 1em 1.25em;
}
.login input[type="email"] {
  border-top-left-radius: var(--loginInputBorderRadius);
  border-top-right-radius: var(--loginInputBorderRadius);
}
.login input[type="password"] {
  border-bottom-left-radius: var(--loginInputBorderRadius);
  border-bottom-right-radius: var(--loginInputBorderRadius);
  border-top: 0;
}
.login input[type="submit"] {
  background-color: #1dabb8;
  border-radius: var(--loginInputBorderRadius);
  color: #fff;
  font-weight: 700;
  order: 1;
  padding: 0.75em 1.25em;
  transition: background-color 0.3s;
}
.login input[type="submit"]:focus,
.login input[type="submit"]:hover {
  background-color: #198d98;
}
.login__footer {
  align-items: center;
  background-color: #fff;
  border-bottom-left-radius: var(--loginBorderRadius);
  border-bottom-right-radius: var(--loginBorderRadius);
  display: flex;
  justify-content: space-between;
  padding-bottom: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.login__footer p {
  margin: 0;
}

Recomendado

Un código de ytr3d3

Formulario de inicio de sesión

Bienes Raíces de Élite: Apartamentos, Villas, Casas en Venta y Alquiler

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS