Skip to content
Related Articles

Related Articles

Design a transparent login/Sign Up webpage using HTML and CSS
  • Difficulty Level : Expert
  • Last Updated : 15 Dec, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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" />
        <link rel="stylesheet" href="style.css" />
        <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>

chevron_right


Explanation:



We have put the login form in a class called container and we have placed each input tag in a seperate 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

filter_none

edit
close

play_arrow

link
brightness_4
code

/*CSS Reset*/
*{
    margin:0px;
    padding: 0px;
}
/*Stling the body*/
body{
    background: url(imgurl) 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;
}

chevron_right


Complete code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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;
            }
            /*Stling 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>

chevron_right


Expalnation:

  • 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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :