Responsive Login Page using HTML and CSS

Responsive Login Page using HTML and CSS

Responsive Login Page using HTML and CSS

If you want to create a Responsive Login Page using HTML and CSS then this tutorial will help you. Here I will show you in a few steps how to create a Responsive Login Form.

The login form we have designed here is like a complete GitHub website. You must have heard the name GitHub if you have just started your journey in the world of programming. I have created this Responsive Login Page like the login form of the GitHub website.

Earlier I designed many more types of HTML login pages but it is completely different. You can create this Responsive Login Page using Simple HTML and CSS.

Responsive Login Page

Below I have given a demo that will help you to know how this HTML login page works. If you only want to download the source code, you can use the download button at the bottom of the article. You will also find the source code in the demo section below.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, this design is made entirely like the GitHub login form. First an icon, then a heading, then a box containing the space to input the user name and password. At the end of it all, there is a small box to create a new account.

This login page is fully responsive. This will allow you to use it directly on your website.

How to create a responsive Login Form 

Now I have shown step by step how I have created Responsive Login Page using HTML and CSS. For this, you must have a basic idea about HTML CSS. 

If you just want the source code, you can use the download button below. However, if you are a beginner, please follow the tutorial below.

Step 1: Basic structure of login form

We have created the basic structure of this login form using the following HTML and CSS codes.

<div class=”wrapper”>
</div>

The webpage was originally designed using the following codes and added a background color.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
outline: none;
font-family: ‘Open Sans’, sans-serif;
}
body{
font-size: 14px;
background-color: #f9f9f9;
}

An area of this login form has been created using the following CSS. Area max-width 310px has been used here. Margins are used to place the form along the middle of the webpage.

.wrapper{
max-width: 310px;
width: 100%;
height: auto;
margin: 40px auto;
}

Step 2: Add logo to login page

Now I have added an icon at the very top of the login page. I have used the icon of the GitHub website here.

<div class=”logo”>
  <img src=”https://i.imgur.com/gr4XvFZ.png” alt=”GitHub”>
</div>
.wrapper .logo img{
display: block;
width: 48px;
height: 48px;
margin: 0 auto 25px;
}
Basic structure of login form

Step 3: Add a heading

Now I have used a title which can be seen below this image. The color of the heading is black and I have used font-size: 24px to increase the size.

<div class=”title”>
  <p>Sign in to GitHub</p>
</div>
.wrapper .title p{
margin-bottom: 15px;
font-size: 24px;
text-align: center;
color: #333;
}
Add a heading

Step 4: Login page information( Input place and button )

I created the login space using the following HTML and CSS codes. First created two input boxes and a login button. The first input box is to input the email ID and the second input box is to input the password.

<div class=”form”>
  <div class=”input_field”>
    <label>Username or email address</label>
    <input type=”text” class=”input”>
  </div>
  <div class=”input_field”>
    <label>Password</label>
    <input type=”password” class=”input”>
    <a href=”#” class=”forgot”>Forgot password?</a>
   </div>
   <div class=”btn”>
    <input type=”submit” value=”Sign in” class=”sign_btn”>
   </div>
</div>

The background and input box’s label are designed using the following CSS codes.

.wrapper .form{
margin-bottom: 15px;
background-color: #fff;
  border: 1px solid #d8dee2;
  border-radius: 5px;
  padding: 20px;
}
.wrapper .form .input_field{
margin-bottom: 15px;
position: relative;
}
.wrapper .form .input_field label{
display: block;
font-weight: 600;
margin-bottom: 7px;
color: #24292e;
}
Login page information( Input place and button )

The input spaces are designed using the tips below. I have used a border around the input spaces here.

.wrapper .form .input_field .input{
width: 100%;
background: #fff;
  border: 1px solid #d1d5da;
  box-shadow: inset 0 1px 2px rgba(27,31,35,.075);
  border-radius: 3px;
  color: #24292e;
  font-size: 16px;
  line-height: 20px;
  min-height: 34px;
  padding: 6px 8px;
}

The following CSS has been used to design the text of the Forgot Password here. Added here what kind of change will happen if you click on that input box. 

The box-shadow and border color will change when you click on the input box.

.wrapper .form .input_field a.forgot{
position: absolute;
top:  0;
right: 0;
font-size: 12px;
color: #0366d6;
}
.wrapper .form .input_field .input:focus{
border-color: #2188ff;
  box-shadow: inset 0 1px 2px rgba(27,31,35,.075), 0 0 0 2.5px rgba(3,102,214,.3);
}
Responsive Login Page

Step 5: Design the login button

The login button has been designed using the following codes. This button has no specific size. It will depend on the amount of content. 

However, padding has been used to increase the size a bit. I have also used blue as the background color here.

.wrapper .form .sign_btn{
margin-top: 20px;
background-color: #28a745;
border: 1px solid rgba(27,31,35,.2);
width: 100%;
color: #fff;
font-weight: 600;
cursor: pointer;
padding: 6px 12px;
border-radius: 2px;
}
.wrapper .form .sign_btn:hover{
background-color: #279f43;
}
Responsive Login Page using HTML

Step 6: Option to create a new account

I have created a small box to create a new account using the following HTML and CSS codes. If you look at the login form of the GitHub website then you will see this kind of option.

<div class=”create_act”>
  <p>New to GitHub? <a href=”#”>Create an account.</a></p>
</div>
.wrapper .create_act{
border: 1px solid #d8dee2;
  border-radius: 5px;
  padding: 15px 20px;
  text-align: center;
  margin-bottom: 40px;
}
a{
  color: #0366d6;
}
.wrapper .create_act a:hover{
text-decoration: underline;
}
Login Page using HTML and CSS

We hope you find out from this tutorial how I created this Responsive Login Page using HTML and CSS. 

If you can’t attach the above codes, you can take help from the download button below. Be sure to comment on how you like this Responsive HTML Login Form.