Design a transparent login/Sign Up webpage using HTML and CSS
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*/ h1 { 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: 100vh; display: flex; justify-content: center; flex-direction: column; align-items: center; } .row1 { 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: 4rem; 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="row1"> <h1>LogIn</h1> <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:
Please Login to comment...