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

2057 btn7

Abrir en el editor Video Publica tu código

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

Recomendado

30 August 2024

Efecto de paralaje del control deslizante

18 May 2024

Recetas de Starbucks

10 October 2025

Estructura HTML del contenedor de animación CSS

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

Efecto de paralaje del control deslizante

Recetas de Starbucks

Estructura HTML del contenedor de animación CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS