Responsive Login Form

Publish Your Code

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

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

Responsive Login Form

Recommended

Material Login Form Template

Liquid Drop Login Page HTML Template

Simple Login Form

index.html

styles.css

main.js

Recommended

Material Login Form Template

Liquid Drop Login Page HTML Template

Simple Login Form

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js