How to Create a Login Page – HTML CSS

In this tutorial, We are going to learn how to create a Login page. The most common use of a login page is if you want to customize or tailor information to a particular person or group. It also comes in handy when some people need to see a portion of the site and others should not. That’s the most common use.

Create a Login Page with HTML and CSS

I’m styling it inside a head tag in a style tag. In the body, I’m taking a div class name as avatar & log and only styling that. This styling is known as internal styling.

Here I am providing the code to get the Login Page. You can customize it to make changes in the Login Page as per your need.

<!DOCTYPE html>
<html>
  <head>	
    <title> LOGIN Form</title>
    <meta charset="utf-8">
   	 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="css/bootstrap.min.css">
      <link rel="stylesheet" href="css/bootstrap.css">
 	    <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
 	    <style>
       body{
          margin:0;
          padding:0;
          background:url("log.jpg");
          background-size: cover;
          font-family: sans-serif;
           }
      .log{	width:1366px;
          height:696px;
          
          }
      .loginbox{	width: 320px;
          height: 450px;
          background: #000;
          color: #fff;
          top:20%;
          left:36%;
          position:absolute;
          transform: translate{-50%,-50%}
          box-sizing: border-box;
          padding: 70px 30px;
          opacity:.7;
               }
      .avatar{	width: 100px;
          height: 100px;
          border-radius:50%;
          position:absolute;
          top:-14%;
          left:calc(50% - 50px);
             }
      h1{		margin:0;
          padding: 0 0 20px;
          text-align: center;
          font-size: 30px;
          font-family:AR JULIAN;
          color:red;
        }		
      .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:#fb2525;
          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:12px;
          line-height:20px;
          color: darkgrey;
      }
      .loginbox a:hover
      {	
        color:#ffc107;
      }

      .active{
        color:#fff;
        background:#e02626;
        border-radius:4px;
      }
 	    </style>
  </head>
  <body>
    <img class="log">
    <div class="loginbox">
    <img src="avatar1.jpg" class="avatar">
    <h1>Login Here</h1>
    
    <form>
    <p> Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p> Password</p>
    <input type="password" name="" placeholder="Enter Password"><br>
    <input type="submit" name="" value="Login">
    <a href="#">Lost your password?</a><br>
    <a href="#">Don't have an acoount?</a>
    </form>
    </div>
    <script src="js/jquery-2.1.4.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/ajax-utils.js"></script>
      <script src="js/script.js"></script>
  </body>
</html>

As you can see I have used two images in the page here is the link you can easily download that images and after applying this code also an output image use it as per your need:

Here are the images:

login page background image

background image of the login page

Here the image avatar file for your login page:

login page image avatar file

avatar for your login page

Here the final screenshot of your login page:



create a logon page using html and css

Final screenshot of your login page

Leave a Reply

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