Login page
In today's blog we are going to see how we can make a login page using HTML and CSS.5
Photo by Firmbee.com on Unsplash
Table of contents
No headings in the article.
In today's blog we are going to see how we can make a login page using HTML and CSS.5
The basic requirement to make a login page using HTML is to have. Opening tag that is <html lang="en"> Followed by It will require a head section where we can tell the code that these are the things that are going to be used in the CSS and JavaScript and all.
<!DOCTYPE html>
<html lang="en">
After completing this, now we are going to make the body part where all the written content is going to be present.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
1st we directly not use the input statement for the user to enter the username. First, we will make a container that is login-container. This container helps us to give suitable changes to the website that we are going to make and all the content that we are going to use on the website it for the login page to be is going to be present in this container only. First of all, we will tell that it is our login page, so we will write the login page header content. Followed by it we will start making a form. So 1st we will make another Dove named as.input-group. Here we will take input from the user for the username, specifying the type as text.We will repeat this process for password but in that time we will use type as password.
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
Till now we have successfully made Half of our login page. Now we will simply just add a button. That will submit the form.
Structure of our login page has been successfully made. Now we are going to make a style sheet where we can do a complete styling of our page. First of all, we will initialize for the whole page by. * This will tell that we're going to give Sterling to the whole page.
<button type="submit">Login</button>
After giving styling to the whole page, we will give the styling to Body We will define the. Styling of the body of the file, such as its color. Display what will be its expected height and all other things. Now we will add styling to ours divs that we have made.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
h2 {
margin-bottom: 20px;
color: #333;
}
.input-group {
margin-bottom: 15px;
text-align: left;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
color: #555;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
margin-top: 5px;
}
input:focus {
border-color: #007BFF;
outline: none;
}
button {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
Now we will add input to the file where we can design the OR give height to the input and here, we will add input: focus. This will help us to give a styling whenever we would click on the. Writing box. It would focus and it would show To us in a highlighted way. Similarly, we will give a styling to the buttons also. Using the properties. Of, however, our focus that would enhance the display of our login page Making it more attractive.