Login Form with using only HTML & CSS

Hello Friends, Today in this blog you can learn how to create a Beautiful Login Form using only HTML & CSS. Earlier I have shared a blog on how to create a Sign-in Form and now I'm going to create a Login Form.

Login Form [Source Codes]

To create this program (Login Form). First, you can create two files, one is HTML File and the second is CSS File. After creating these files just copy and paste the given codes into your file. Also, you can download the source code

HTML Code

<!DOCTYPE html>
<html lang="en" dir="ltr">
<!--powered by Coding Info-->
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <title>Login Form</title>
  </head>
  <body>
    <div class="loginbox">
      <img src="user.svg" alt="user" class="avatar">
      <h1>Login Form</h1>
      <form class="">
        <p>Username</p>
        <input type="text" name="" placeholder="Enter Username">
        <p>Password</p>
        <input type="password" name="" placeholder="Enter Password">
        <input type="submit" name="" value="Login">
        <a href="#">Lost your password?</a><br>
        <a href="#">Don't have an account?</a>
      </form>
    </div>
  </body>
</html>

CSS Code

body, html {
  margin: 0;
  padding: 0;
  background: url(img.jpg);
  background-size: cover;
  background-position: center;
  height: 100%;
  font-family: sans-serif;
}
.loginbox {
  width: 320px;
  height: 420px;
  background: #000;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
  padding: 70px 30px;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: -50px;
  left: calc(50% - 50px);
}
h1{
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p{
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input{
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"], input[type="password"]{
  border: none;
  border-bottom: 1px solid #fff;
  background: transparent;
  outline: none;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"]{
  border: none;
  outline: none;
  height: 40px;
  background: #dbdbdb;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover{
  cursor: pointer;
  background: #ffc107;
  color: #000;
}
.loginbox a{
  text-decoration: none;
  font-size: 15px;
  line-height: 20px;
  color: darkgrey;
}
.loginbox a:hover{
  color: #ffc107;
}

Login Form [Source Codes]

HTML Code

CSS Code

Post a Comment

Post a Comment

About Us

Contact form

Login Form with using only HTML & CSS

Login Form [Source Codes]

HTML Code

CSS Code

Recommended Posts

Post a Comment

Post a Comment

Contact form