Project Introduction:
In this article, we will discuss how to design a transparent login webpage using HTML and CSS.
Project Structure:
- index.html
- style.css
index.html
Explanation:
We have put the login form in a class called container and we have placed each input tag in a separate div with class row so that each input tag occupies the full line. We have also added a vector image to the input tags and the source of it is given below.
style.css
Complete code:
css
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF -8 " />
<meta name="viewport"
content="width=device-width,
initial-scale= 1.0 " />
crossorigin="anonymous"></script>
<link href=
rel="stylesheet" />
<style>
/*CSS Reset*/
* {
margin : 0px ;
padding : 0px ;
}
/*Styling the body*/
body {
background : url (
https://write.geeksforgeeks.org/wp-content/uploads/space_background_for_infinite_scroll_example.png) no-repeat center center fixed ;
background- size : cover;
}
/*Styling the name LogIn*/
h 1 {
border-bottom : 3px solid blue ;
margin-bottom : 10px ;
color : black ;
font-weight : bold ;
background : none ;
margin-right : 105px ;
margin-top : 50px ;
font-family : "Baloo Bhai 2 ", cursive ;
}
/*Styling the class container*/
.container {
width : 100% ;
height : 100 vh;
display : flex;
justify- content : center ;
flex- direction : column;
align-items: center ;
}
.row 1 {
position : absolute ;
left : 33% ;
}
/*Styling and positioning the login form*/
.row {
position : relative ;
}
.row input {
position : relative ;
left : 25px ;
margin : 10px ;
padding : 10px ;
width : 80% ;
outline : none ;
background : none ;
border : 0px ;
font-weight : bold ;
border-bottom : 3px solid blue ;
font-family : "Baloo Bhai 2 ", cursive ;
}
.row i {
position : absolute ;
margin-top : 10px ;
padding : 10px ;
}
/*Styling the buttons in the login*/
.btn {
width : 4 rem;
border-radius: 15px ;
background : none ;
margin-right : 105px ;
background-color : black ;
color : blanchedalmond;
outline : none ;
font-family : "Baloo Bhai 2 ", cursive ;
cursor : pointer ;
}
.btn:hover {
background-color : blue ;
color : white ;
}
</style>
<title>Transparent Login Page using HTML/CSS</title>
</head>
<body>
<div class="container">
<div class="row 1 ">
<h 1 >LogIn</h 1 >
<div class="row">
<i class="fas fa-envelope- square "></i>
<input type="email" name="Email"
placeholder="Enter your email" />
</div>
<div class="row">
<i class="fas fa-key"></i>
<input type="password" name="pass"
placeholder="Enter your password" />
</div>
<button class="btn">Submit</button>
</div>
</div>
</body>
</html> |
Explanation:
- Styling the body: We have put a background image in the body and in order to cover the full screen we have assigned the background-size to cover .
- Styling the name Log In: We have assigned proper margins to it with proper blue border. We have assigned the font-family of it to Baloo Bhai 2 and in order to make it transparent we have set the background to none.
- Styling the class container: We have made the container class a flexbox and then we have positioned the login form to the center of the webpage.
- Styling the login form: After centering the login form, now we have positioned it according to our needs. We have also set the font-family to Baloo Bhai 2. In order to make it transparent we have set the background to none. We have also added vector images in-front of the input tags.
- Button style styling: We have assigned a proper width to the button. We have the outline of it to none. We have changed the cursor to pointer whenever the user hovers over the button.
Output: