HTML CSS Responsive Login form

HTML CSS Responsive Login form

Posted by admin at September 9, 2019

Responsive html css login form.


Step 1: Create index.html file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
  </head>
  <body>
    <div class="login-form-example">
      <form action="#">
        <div class="imgcontainer">
          <img
            src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjKoJavtcPkAhWMfn0KHU2aDNEQjRx6BAgBEAQ&url=https%3A%2F%2Fwww.audience-view.com%2F&psig=AOvVaw3cuLeusxGNAiJeEtQk0gN5&ust=1568107376762752"
            alt="Login avatar"
            class="avatar"
          />
        </div>
        <div class="container">
          <label for="uname"><b>Username:</b></label>
          <input
            type="text"
            placeholder="Enter username"
            name="uname"
            required
          />

          <label for="psw"><b>Password:</b></label>
          <input
            type="password"
            placeholder="Enter password"
            name="psw"
            required
          />
          <button type="submit">Login</button>
          <label>
            <input type="checkbox" checked="checked" name="remember" /> Remember
            me
          </label>
        </div>

        <div class="container" style="background-color:#f1f1f1">
          <button type="button" class="cancelbtn">Cancel</button>
          <span class="psw">Forget <a href="#">password?</a></span>
        </div>
      </form>
    </div>
  </body>
</html>

Step 2 : Create style.css file

.login-form-example {
  width: 50%;
  margin: auto;
  margin-top: 50px;
}

.login-form-example form {
  box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255),
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);

  padding: 10px;
}
.login-form-example .container label {
  font-size: 20px;
  font-weight: 600;
  color: #444;
}

.login-form-example input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: none;
  outline: none;
  font-size: 20px;
  border-bottom: 2px solid #222;
  border-bottom-color: rgb(138, 135, 135);
  box-sizing: border-box;
}
.login-form-example button {
  background-color: #4caf50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
.login-form-example button:hover {
  opacity: 0.8;
}
.login-form-example .cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.login-form-example .imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  width: 40%;
  margin: auto;
}
.login-form-example img.avatar {
  width: 40%;
  border-radius: 50%;
}

.login-form-example span.psw {
  float: right;
  padding-top: 16px;
}
@media screen and (max-width: 650px) {
  .login-form-example {
    width: 70%;
  }
}
@media screen and (max-width: 500px) {
  .login-form-example span.psw {
    display: block;
    float: none;
  }
  .login-form-example .cancelbtn {
    width: 100%;
  }
  .login-form-example {
    width: 100%;
  }
}


Comments

Write a Reply or Comment

Your email address will not be published. Required fields are marked *