This article will discuss the functionality and languages used to set up a Simple log-in page.

Most social media platforms, bank accounts and other individual sites use this log-in page.

The log-in page creates room for a user’s little details for identification and verification to a particular site that one might have claimed to be already registered.

Many times, the log-in page consists of the User’s registered name and password of the registration to that site.

The truth is that anyone can create a Log-in page with HTML and CSS.

Firstly, we will write the basic HTML structure.

https://gist.github.com/Peterimie/6df7e91a6d53897b321fa1934f323d7f

Having done this, we create a form with a background colour, light grey, indicating a user should fill.

Let us create a session for the username and password

https://gist.github.com/Peterimie/6ea3571501cef23f458d2724f45e8c3d
https://gist.github.com/Peterimie/9f0d78f804fd62aadf1fe7eb46b3f8a0

Note that the input type assigned to each placeholder is essential as it will tell the browser what kind of data inserted.

Having done this, the expected output;

We style as follows;

https://gist.github.com/Peterimie/4bc55b02a0303a1321aaa9b8f01791b4

Our output;

Whenever a user inputs his name and password, we are required to see the log-in button and a part where the Remember me button will be to avoid the user logging in multiple times.

Creating and styling the button and the remember me is as follows;
https://gist.github.com/Peterimie/dac103e117d3f45029da826bd22b66a4

Style your button as follows;

https://gist.github.com/Peterimie/9c07b62367fde4e7a56d8a07715eca7a

After this, your output is;

Lastly, we create the Forgot password? Section.

We create it as a link to the PHP server where we can enter other trial log-in details if one has forgotten his original log-in credentials.

https://gist.github.com/Peterimie/4e8959a4174aca8d990be0e1d828e873
As we can see above, I decided to float the Forgot password to the right to make it look more professional. Here is the output;

Here is our User’s interface for the log-in page.

When you input your username and password, you click the log-in button.

Our code shows that the log-in detail is functioning correctly.