Transparent Login Form using HTML and CSS ( Source Code)

Blogger Leb
October 15, 2020
0
Transparent Login Form using HTML and CSS ( Source Code) 

Hello, friends in this article I am going to tell you how to create a transparent login form using only HTML and CSS programming language. The difference between a simple login form and a transparent login form is very common. In the case of the transparent login form, the background behind it is not very clear, but it can be seen lightly, but in the case of the normal login form, the background behind it is not visible in any way. So the translation login form is much more beautiful. If you want to create a transparent login form using only HTML and CSS programming language, I will help you with this task. I am Shantanu Jana a web designer. I will tell you how you can easily create HTML and CSS login forms.

 You can easily use this form on your website or any of your projects. Below I have given the source code of this login form so that you can easily learn how to create a transparent login form using that code. And how to turn a login form into a login of a transfer. This login form will help you increase your HTML and CSS knowledge.

  You can watch the live demo of this transparent login form by clicking on the demo option above. If you want to download the source code of this transfer login form. However, you can download the CSS and HTML code by clicking on the download button above.

Watch the Image on how to make a Transparent Login Form using HTML CSS

how to make a Transparent Login Form using HTML CSS

 Hopefully from the image above you can easily understand which elements are used to create a transparent login form. I have shown in the image above very easily and nicely which HTML tags can be used to create a login form. Then I will give you the source code needed to create the form below so that you can create this transparent login form yourself. General HTML and CSS programming languages ​​have been used for this. I have given these two codes(HTML, CSS) below and very nicely show you how to create a transparent login form using these in your web site or project. Therefore, even if you do not have any programming knowledge.


Some information about the transparent login form


  •  The background on the back of this transparent login form is completely and clearly visible.
  •   First, there is the place to give the email ID or username, then there is the place to give the password.
  •  Below is the login button and here is the option of forgetting the password. If the user forgets his password, this option will allow him to return his password
  •  Below are the options to share in media such as Facebook, Instagram, Twitter, Google. You can share with your social media account by clicking on that button.
  • There is also a sign-in option below, which means that if you or your user does not have an account, the user can create a new account by clicking on that option.
  •  All in all this login form is completely beautiful and professional which will attract the attention of you and your user.

Transparent Login Form Using HTML and CSS[Source Code⇩]

Hopefully from the video above you can fully understand how to make and work this transparent login form. If you want to try this code yourself, you can. That is why I have given the source code below. First of all, you create an HTML file (rename.html) and a CSS file (rename.css). Then you put the HTML code in the HTML file and the CSS code in the CSS file. Be sure to link the HTML and cis code to each other (<link rel="stylesheet" href="sidebar.css">).

Also if you want to put HTML and CSS code in a file, you can do that. For that, give HTML code in body tags (<body></body>) and CSS code in head tags. Then your program will work beautifully. If you encounter any problems, you can take the help of the video above.


Note:  I would especially request you to download the codes by clicking on the download button above. Because I had some problems with uploading these codes from Google. So I have added some comments in these codes. If you copy these codes and use them in your web site or project, you can delete those comments if you want. However, there will be no problem if not excluded.


HTML TAGS (<body> Add Code </body>)

This code is an HTML code (rename.html). Put this code in the head tags of your project and also in the head tags in the HTML file.

 
    <form action="/" class="login">
      <header>Login</header>
      <div class="field"><span class="fa fa-user"></span><input type="text" placeholder="Email or User Name"></div>
      <div class="field"><span class="fa fa-lock"></span><input type="password" placeholder="Password"></div>
      <!--<span class="foot"><i class="fa fa-shopping-bag"></i>Buy Now</span>
        <span class="foot"><i class="fa fa-shopping-cart"></i>Add TO Cart</span>
      -->
      <div class="forgot-password"><a href="/">Forgot password?</a></div>
      <input type="submit" class="submit" value="LOGIN"></input>
      <span class="login-form-copy">Or login with</span>
      <div class="social-icons">
        <!--<li>COLOR</li>
          <li class="yellow"></li>
          <li class="black"></li>
          <li class="blue"></li>
        </ul>-->
        <div class="social-icon facebook"><span class="fa fa-facebook"></span></div>
        <div class="social-icon instagram"><span class="fa fa-instagram"></span></div>
        <div class="social-icon twitter"><span class="fa fa-twitter"></span></div>
        <!--<span class="foot"><i class="fa fa-shopping-bag"></i>Buy Now</span>
        <span class="foot"><i class="fa fa-shopping-cart"></i>Add TO Cart</span>
      -->
        <div class="social-icon google"><span class="fa fa-google"></span></div>
        <div class="social-icon linkedin"><span class="fa fa-linkedin"></span></div>
      </div><!--<i class="fa fa-search"></i>
        <i class="fa fa-user"></i>
        <i class="fa fa-shopping-cart"></i>-->
    <span class="logn-form-copy">Don't have an account? <a href="/" class="login-form__sign-up">Sign up</a></span>
    </form>
       

       


CSS CODE (<head><style> Add code</style></head>)

This code is a CSS code (rename.css). You enter this code in the style tags in the head tags of your project. Also, you put in the style tags in the CSS file.

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

body {
  display: flex;
  justify-content: center;
  font-family: 'Kumbh Sans', sans-serif;
  background-image: url("https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg");
  background-position: center;
  background-size: cover;
  height: 600px;
}
/*.right {
  content: "";
  height: 395px;
  width: 550px;
  background-color: #2a2f40;
  z-index: 3;
  margin-left: 200px;
}*/
.login {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px 0;
  width: 380px;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-family: 'Montserrat',sans-serif;
  box-shadow: -4px 4px 12px 1px rgba(0,0,0,0.4);
}

.login header {
  margin-bottom: 25px;
  font-weight: 600;
  font-size: 33px;
  font-weight: 600;
  margin: 0 0 35px 0;
}
/*.right {
  content: "";
  height: 395px;
  width: 550px;
  background-color: #2a2f40;
  z-index: 3;
  margin-left: 200px;
}*/
.field {
  background-color: #fff;
  width: 100%;
  margin-bottom: 15px;
  display: flex;
}

.field span {
  color: #222;
  width: 40px;
  line-height: 45px;
  text-align: center;
}
/*.right {
  content: "";
  height: 395px;
  width: 550px;
  background-color: #2a2f40;
  z-index: 3;
  margin-left: 200px;
}*/
.field input {
  width: 100%;
  height: 45px;
  font-size: 1.1rem;
  padding: 5px;
  color: #34495e;
  border: none;
}

.field input::placeholder {
  color: #95a5a6;
}

input:focus, input:active, input:hover {
  outline: none;
}
/*.right {
  content: "";
  height: 395px;
  width: 550px;
  background-color: #2a2f40;
  z-index: 3;
  margin-left: 200px;
}*/
.forgot-password {
  width: 100%;
  margin-bottom: 15px;
}

.forgot-password a {
  color: #FFF;
  text-decoration: none;
}

.forgot-password a:hover {
  text-decoration: underline;
}
/*content: "";
  height: 395px;
  width: 330px;
  display: flex;*/
.submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 45px;
  margin-bottom: 45px;
  font-family: 'Poppins',sans-serif;
  font-size: 1.2rem;
  color: #fff;
  background-color: #0074D9;
  border: none;
  transition: all 0.1s linear;
}/*.right {
  content: "";
  height: 395px;
  width: 550px;
  background-color: #2a2f40;
  z-index: 3;
  margin-left: 200px;
}*/

.submit:hover {
   cursor: pointer;
   background-color: #0070d1;
}

.login-form-copy {
  margin-bottom: 15px;
}

.login-form__sign-up {
  text-decoration: none;
  color: #3498db;
}

.login-form__sign-up:hover {
  text-decoration: underline;
}
/*content: "";
  height: 395px;
  width: 330px;
  display: flex;*/
.social-icons {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 15px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  margin-bottom: 35px;
}/*.right {
  content: "";
  height: 395px;
  width: 550px;
  background-color: #2a2f40;
  z-index: 3;
  margin-left: 200px;
}*/

.facebook {
  background-color: #3b5998;
}

.instagram {
  background-color: #F56040;
}

.twitter {
  background-color: #00acee;
}
/*.product-info {
  position: absolute;
  margin-left: 245px;
  height: 394px;
  width: 305px;
  z-index: 10;
}*/
.google {
  background-color: #DB4437;
}

.linkedin {
  background-color: #2867B2;
}



 Hopefully, you have learned very nicely from the above article and learned how to create a transparent login form using only HTML and CSS programming languages. You can easily create this project yourself using these codes. If you have any other problems, please let me know in the comments. I will try to solve your problem.

❤Sharing is caring❤



Tags
Share to other apps

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)
To Top