Login Page

Today we are going to discuss that how can we make login page using html CSS.

In this blog we have made login page and you can get the video on that on my YouTube channel.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .{
      background-color: #e2e7e6;
    }

    form {
      border: 3px solid #f1f1f1;
    }

    input[type=text], input[type="password"] {
      width: 100%;
      padding: 12px 12px;
      margin: 8px 0px;
      display: inline-block;
      border: 1px solid #ccc;
    } 

    button {
      background-color: #04aa6d;
      color: white;
      border: none;
      cursor: pointer;
      width: 100%;
      margin: 8px 0; /*(top/bottom) (right/left)*/
      padding: 14px 20px;
    }

    button:hover {
      opacity: 0.8;
    }

    .imgcontainer {
      text-align: center;
      margin: 24px 0 12px 0;
    }
    img.avatar {
      width: 350px;
      border-radius: 50%;
    }

    .container {
      padding: 16px;
    }
    span.psw {
      float: right;
      padding-top: 16px;
    }
  </style>
</head>
<body>
    <form>
      <div class="imgcontainer">
        <img  src="https://static.vecteezy.com/system/resources/previews/007/407/996/original/user-icon-person-icon-client-symbol-login-head-sign-icon-design-vector.jpg" alt="Avatar" class="avatar">
      </div>

      <div class="container">
        <label for="uname"><b>Username</b></label>
        <input type="text" placeholder="Enter username" id="uname" name="uname" required>

        <label for="psw"><b>Username</b></label>
        <input type="password" placeholder="Enter Password" id="psw" name="psw" required>

        <button  type="submit">Login</button>
        <label>
          <input  type="checkbox" checked="remember"> Remember me
        </label>
      </div>

      <div class="container">
        <button type="button">Cancel</button>
        <span class="psw">Forgot <a href="#" style="color: black">Password</a></span>
      </div>
    </form>
</body>
</html>

Login Page

In this blog we are going to make a login page for beginner using HTML & CSS

Table of contents

No headings in the article.