Open In App

Design a transparent login/Sign Up webpage using HTML and CSS

Improve
Improve
Like Article
Like
Save
Share
Report

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" />
        <script src="https://kit.fontawesome.com/5845bc1bb6.js"
                crossorigin="anonymous"></script>
        <link href=
"https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@600&display=swap"
              rel="stylesheet" />
        <style>
            /*CSS Reset*/
            * {
                margin: 0px;
                padding: 0px;
            }
            /*Styling the body*/
            body {
                background: url(
                  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:



Last Updated : 06 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads