Open In App

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

Last Updated : 06 Jun, 2022
Like Article

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




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.



Complete code: 


<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8" />
        <meta name="viewport"
                       initial-scale=1.0" />
        <script src=""
        <link href=
              rel="stylesheet" />
            /*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;
        <title>Transparent Login Page using HTML/CSS</title>
        <div class="container">
            <div class="row1">
                <div class="row">
                    <i class="fas fa-envelope-square"></i>
                    <input type="email" name="Email"
                           placeholder="Enter your email" />
                <div class="row">
                    <i class="fas fa-key"></i>
                    <input type="password" name="pass"
                           placeholder="Enter your password" />
                <button class="btn">Submit</button>


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


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads