Hello Coder! A very warm welcome to Codewithrandom, In today's blog in which we are going to create a Login Page In HTML and CSS With Code. We are going to make a Stylish Login Form Page Design for a website. For now, we are only considering email and password as input to log in.
A Login Page is one of the most important pages on a website or app since it allows authorized users to access the entire site or a subset of the site. The login or sign-up page is the initial page that users view on login-protected sites. A signup or login page should be visually appealing, user-friendly, and easy to use.
So. Let's start with the code but before proceeding to the code let's check.
Html Login Page Source Code:-:-
In HTML we design the basic layout of the website.I hope you are concerned with the basics of HTML like div tag, input tag, and HTML form.
In this Login Page, we are adding two input tags one for email and the second one for password. we are adding an input tag of the checkbox attribute so that when the checkbox is pressed then we open the popup.
First, we want to add script-src then in the body we want to add a checkbox, and the id is shown class is show btn for label view form.
For cross sign/icon we are using Fontawesome CDN(Content-Delivery-Network) link to integrate it.
then inside the form tag, we insert two input tag and their respective label tag.
then for the login form div class is data and the label is email or phone.
Then another div class is data and the label is password.
The last div class is the forgotten password which anchor tags and Signup now.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Popup Login Form Design | CodingNepal</title> -->
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="center">
<input type="checkbox" id="show" />
<label for="show" class="show-btn">View Form</label>
<div class="container">
<label
for="show"
class="close-btn fas fa-times"
title="close"
></label>
<div class="text">Login Form</div>
<form action="#">
<div class="data">
<label>Email or Phone</label>
<input type="text" required />
</div>
<div class="data">
<label>Password</label>
<input type="password" required />
</div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a>
</div>
<div class="btn">
<div class="inner"></div>
<button type="submit">login</button>
</div>
<div class="signup-link">
Not a member? <a href="#">Signup now</a>
</div>
</form>
</div>
</div>
</body>
</html>
CSS Code For Login Page Design:-
Now the layout of the login page is ready but still, it is not perfect and not completely ready because we need to implement it in such a way that on default the login form is disappeared and when we click on the checkbox it shows us the login page and on clicking the cross it disappears.
For that, on default, we will apply the display property of the container class to none so it disappears and when the check box is checked then set the display property of the container class to block.
Hope you have gone through the basic concepts of styling with CSS like css selectors,border-box,flex-box, and pseudo selectors.
Here we want to design the html code for making the website beautiful and responsive you can see the output of css.
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
width: 100%;
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.show-btn {
background: #fff;
padding: 10px 20px;
font-size: 20px;
font-weight: 500;
color: #3498db;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.show-btn,
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="checkbox"] {
display: none;
}
.container {
display: none;
background: #fff;
width: 410px;
padding: 30px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
#show:checked ~ .container {
display: block;
}
.container .close-btn {
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.container .close-btn:hover {
color: #3498db;
}
.container .text {
font-size: 35px;
font-weight: 600;
text-align: center;
}
.container form {
margin-top: -20px;
}
.container form .data {
height: 45px;
width: 100%;
margin: 40px 0;
}
form .data label {
font-size: 18px;
}
form .data input {
height: 100%;
width: 100%;
padding-left: 10px;
font-size: 17px;
border: 1px solid silver;
}
form .data input:focus {
border-color: #3498db;
border-bottom-width: 2px;
}
form .forgot-pass {
margin-top: -8px;
}
form .forgot-pass a {
color: #3498db;
text-decoration: none;
}
form .forgot-pass a:hover {
text-decoration: underline;
}
form .btn {
margin: 30px 0;
height: 45px;
width: 100%;
position: relative;
overflow: hidden;
}
form .btn .inner {
height: 100%;
width: 300%;
position: absolute;
left: -100%;
z-index: -1;
background: -webkit-linear-gradient(
right,
#56d8e4,
#9f01ea,
#56d8e4,
#9f01ea
);
transition: all 0.4s;
}
form .btn:hover .inner {
left: 0;
}
form .btn button {
height: 100%;
width: 100%;
background: none;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
}
form .signup-link {
text-align: center;
}
form .signup-link a {
color: #3498db;
text-decoration: none;
}
form .signup-link a:hover {
text-decoration: underline;
}
Step1:We will first use the import link to import some new fonts from Google Fonts, and then use the font-family attribute to modify the fonts from the default fonts.
Now, we’ll utilise the universal selector property to set the box-sizing to “border-box,” the margin and padding to “zero,” and the font family to “Poppins” as our new body fonts.
We will add a linear gradient backdrop to our body, and we will do it by setting the background property to a combination of light blue and dark purple.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
width: 100%;
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
Step2: We will now set the background to "white," and we also added a padding of 20 px, using the class selector (.show-btn). The button also has a box shadow added to it.
To choose something, we'll utilise the tag selector. Next, we'll change the display to "block," the position to "absolute," and the right property to 20 px.
Similarly Style has been added to the form. Simply read the code.
.show-btn {
background: #fff;
padding: 10px 20px;
font-size: 20px;
font-weight: 500;
color: #3498db;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.show-btn,
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="checkbox"] {
display: none;
}
.container {
display: none;
background: #fff;
width: 410px;
padding: 30px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
#show:checked ~ .container {
display: block;
}
.container .close-btn {
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.container .close-btn:hover {
color: #3498db;
}
.container .text {
font-size: 35px;
font-weight: 600;
text-align: center;
}
.container form {
margin-top: -20px;
}
.container form .data {
height: 45px;
width: 100%;
margin: 40px 0;
}
form .data label {
font-size: 18px;
}
form .data input {
height: 100%;
width: 100%;
padding-left: 10px;
font-size: 17px;
border: 1px solid silver;
}
form .data input:focus {
border-color: #3498db;
border-bottom-width: 2px;
}
form .forgot-pass {
margin-top: -8px;
}
form .forgot-pass a {
color: #3498db;
text-decoration: none;
}
form .forgot-pass a:hover {
text-decoration: underline;
}
form .btn {
margin: 30px 0;
height: 45px;
width: 100%;
position: relative;
overflow: hidden;
}
form .btn .inner {
height: 100%;
width: 300%;
position: absolute;
left: -100%;
z-index: -1;
background: -webkit-linear-gradient(
right,
#56d8e4,
#9f01ea,
#56d8e4,
#9f01ea
);
transition: all 0.4s;
}
form .btn:hover .inner {
left: 0;
}
form .btn button {
height: 100%;
width: 100%;
background: none;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
}
form .signup-link {
text-align: center;
}
form .signup-link a {
color: #3498db;
text-decoration: none;
}
form .signup-link a:hover {
text-decoration: underline;
}
Finally...The login Page Design is ready.
The Login Page is responsive as well as beautiful. Hope you may like it /if any doubt comments in the comment box.If you have any queries related to the code or the blog then feel free to comment. You can visit our other blog for some ideas and knowledge.
THANK YOU!
Written by - Sayali Kharat and Himanshu Singh
Top comments (0)