Formulario de inicio de sesión responsivo

7,736 dev_b

Abrir en el editor Publica tu código

Formulario de inicio de sesión responsivo

Recomendado

23 August 2025

Página de inicio de sesión HTML CSS con diseño de huella digital

19 May 2025

juego de respuestas

30 August 2024

Botón con efecto de desplazamiento de Drácula animado

HTML

<html>
<head>
  <meta charset="utf-8" />
  <title>Webleb</title>
  <link href="/css/styles.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="align">
  <div class="grid">
    <form  method="POST" class="form login">
      <div class="form_field">
        <label><i class="fa fa-user" style="color: #606468;"></i></label>
        <input type="text" name="username" class="form_input" placeholder="Username" required>
      </div>
      <div class="form_field">
        <label><i class="fa fa-lock" style="color: #606468;"></i></label>
        <input type="password" name="password" class="form_input" placeholder="Password" required>
      </div>
      <div class="form_field">
        <button class="submitButton" type="submit">Submit</button>
      </div>
    </form>
    <p class="text--center">Not a member? <a href="https://www.web-leb.com/code">Register</a></p>
  </div>
</body>
</html>

CSS

.align{
  display: grid;
  place-items: center;
}
.grid {
  inline-size: 90%;
  margin-inline: auto;
  max-inline-size: 20rem;
}
* {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  font-size: 100%;
}
body {
  background: -webkit-linear-gradient(to right, #ffffff, #abbaab);
  background: linear-gradient(to right, #ffffff, #abbaab); 
  color: #606468;
  font-family: "Open Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  min-block-size: 100vh;
}
a {
  color: #606468;
  outline: 0;
  text-decoration: none;
}
input {
  background-image: none;
  border: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  transition: background-color 0.3s;
}
input[type="submit"] {
  cursor: pointer;
  text-decoration: none;
}
.form {
  display: grid;
  gap: 0.875rem;
}
.form input[type="password"],
.form input[type="text"],
.submitButton {
  inline-size: 100%;
}
.form_field {
  display: flex;
}
.form_input {
  flex: 1;
}
.login {
  color: #eee;
}
.login label,
.login input[type="text"],
.login input[type="password"],
.submitButton {
  border-radius:0.25rem;
  padding: 1rem;
}
.login label {
  background-color: #363b41;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  padding-inline: 1.25rem;
}
.login input[type="password"],
.login input[type="text"] {
  background-color: #3b4148;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.login input[type="password"]:hover,
.login input[type="text"]:hover {
  background-color: #434a52;
}
.submitButton {
  background-color: #270cbf;
  color: #eee;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
}
.submitButton:hover {
  background-color: #3200e6;
}
p {
  margin-block: 1.5rem;
}
.text--center {
  text-align: center;
}