Facebook Instagram Youtube
  • Home
  • Blog
  • HTML & CSS
    • Login Forms
    • Website Designs
    • Navigation Bars
    • Sidebar Menu
    • Card Designs
    • More
      • CSS Buttons
      • Glowing Effects
      • Social Media Buttons
      • Preloader or Loaders
      • Neumorphism Designs
  • JavaScript
    • Form Validation
    • Image Sliders
    • API Projects
    • JavaScript Games
    • Canvas Projects
  • PHP
  • Contact us
Search
CodingNepal CodingNepal
  • Home
  • Blog
    • 10 Easy JavaScript Games for Beginners with Source Code

      10 Easy JavaScript Games for Beginners with Source Code

      10 Best JavaScript Projects with Free Source Code JavaScript Projects for Beginners

      Top 10 JavaScript Projects for Beginners with Source Code

      Top 10 Profile Card Template Designs in HTML & CSS

      Top 10 Profile Card Template Designs in HTML & CSS

      Top 10 Website Templates Design in HTML CSS & JavaScript

      10+ Website Templates Design in HTML CSS and JavaScript

      Top 5 Sidebar Menu Templates in HTML CSS & JavaScript

      Top 15 Sidebar Menu Templates in HTML CSS & JavaScript

  • HTML & CSS
    • Login Forms
    • Website Designs
    • Navigation Bars
    • Sidebar Menu
    • Card Designs
    • More
      • CSS Buttons
      • Glowing Effects
      • Social Media Buttons
      • Preloader or Loaders
      • Neumorphism Designs
  • JavaScript
    • Form Validation
    • Image Sliders
    • API Projects
    • JavaScript Games
    • Canvas Projects
  • PHP
  • Contact us
Home HTML and CSS Transparent Login Form HTML CSS & JavaScript

Transparent Login Form HTML CSS & JavaScript

By
CodingNepal
-
April 25, 2020
Transparent Login Form HTML CSS and JavaScriptHello friends, today in this blog you’ll learn how to create an Amazing Transparent Login Form using HTML CSS, and Javascript. In the previous blog, I have shared how to create a Login and Registration Form in HTML & CSS and now it’s time to create a simple but amazing transparent login form html css.

 
I’m sure you have seen many login form html template on many websites. Simply, A login form is a set of inputs used to authenticate or validate a user before access to the restricted page. The login form carries a field for the username and another for the password.

In this design [Login Form HTML CSS], as you can see in the image preview, this is an Amazing Transparent Login Form which is created using HTML CSS & JavaScript. Javascript is only used to toggle show or hide passwords. In this login form, there is an image, a form, some texts, and some social media icons. You can change this form according to your requirements if you have basic knowledge of html and css.

This is a Login Form that has no backend unification. You can use backend language like PHP to make this login form functional and dynamic. If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial of this form [Login Form HTML CSS]

Video Tutorial of Transparent Login Form HTML CSS

 
I hope after watching this video you’ve understood the basic codes, concepts behind creating this login form. You can change the position of this form and image very easily, you need to change some position property values. If you like this login form and want to get the source codes of this form then don’t worry, you can easily copy from the given code boxes or easily download source code files from the given download button.

I’ve already shared many login form html templates and you’ve missed it then don’t worry click here to view all popular login form html template and I believe you’ll just love it

You might like this:

  • Animated Login Form HTML & CSS
  • Neumorphism Login Form HTML & CSS
  • Glowing Inputs Login Form HTML CSS
  • Multi-Step Form HTML CSS & JavaScript

Transparent Login Form HTML CSS [Source Codes]

To create this form [Transparent Login Form HTML CSS]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the given codes in your files.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Transparent Login Form HTML CSS</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="bg-img">
         <div class="content">
            <header>Login Form</header>
            <form action="#">
               <div class="field">
                  <span class="fa fa-user"></span>
                  <input type="text" required placeholder="Email or Phone">
               </div>
               <div class="field space">
                  <span class="fa fa-lock"></span>
                  <input type="password" class="pass-key" required placeholder="Password">
                  <span class="show">SHOW</span>
               </div>
               <div class="pass">
                  <a href="#">Forgot Password?</a>
               </div>
               <div class="field">
                  <input type="submit" value="LOGIN">
               </div>
            </form>
            <div class="login">
               Or login with
            </div>
            <div class="links">
               <div class="facebook">
                  <i class="fab fa-facebook-f"><span>Facebook</span></i>
               </div>
               <div class="instagram">
                  <i class="fab fa-instagram"><span>Instagram</span></i>
               </div>
            </div>
            <div class="signup">
               Don't have account?
               <a href="#">Signup Now</a>
            </div>
         </div>
      </div>
      <script>
         const pass_field = document.querySelector('.pass-key');
         const showBtn = document.querySelector('.show');
         showBtn.addEventListener('click', function(){
          if(pass_field.type === "password"){
            pass_field.type = "text";
            showBtn.textContent = "HIDE";
            showBtn.style.color = "#3498db";
          }else{
            pass_field.type = "password";
            showBtn.textContent = "SHOW";
            showBtn.style.color = "#222";
          }
         });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins:400,500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}
.bg-img{
  background: url('bg.jpg');
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.bg-img:after{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.7);
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  text-align: center;
  padding: 60px 32px;
  width: 370px;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,0.04);
  box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);
}
.content header{
  color: white;
  font-size: 33px;
  font-weight: 600;
  margin: 0 0 35px 0;
  font-family: 'Montserrat',sans-serif;
}
.field{
  position: relative;
  height: 45px;
  width: 100%;
  display: flex;
  background: rgba(255,255,255,0.94);
}
.field span{
  color: #222;
  width: 40px;
  line-height: 45px;
}
.field input{
  height: 100%;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #222;
  font-size: 16px;
  font-family: 'Poppins',sans-serif;
}
.space{
  margin-top: 16px;
}
.show{
  position: absolute;
  right: 13px;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  display: none;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
}
.pass-key:valid ~ .show{
  display: block;
}
.pass{
  text-align: left;
  margin: 10px 0;
}
.pass a{
  color: white;
  text-decoration: none;
  font-family: 'Poppins',sans-serif;
}
.pass:hover a{
  text-decoration: underline;
}
.field input[type="submit"]{
  background: #3498db;
  border: 1px solid #2691d9;
  color: white;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
}
.field input[type="submit"]:hover{
  background: #2691d9;
}
.login{
  color: white;
  margin: 20px 0;
  font-family: 'Poppins',sans-serif;
}
.links{
  display: flex;
  cursor: pointer;
  color: white;
  margin: 0 0 20px 0;
}
.facebook,.instagram{
  width: 100%;
  height: 45px;
  line-height: 45px;
  margin-left: 10px;
}
.facebook{
  margin-left: 0;
  background: #4267B2;
  border: 1px solid #3e61a8;
}
.instagram{
  background: #E1306C;
  border: 1px solid #df2060;
}
.facebook:hover{
  background: #3e61a8;
}
.instagram:hover{
  background: #df2060;
}
.links i{
  font-size: 17px;
}
i span{
  margin-left: 8px;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 16px;
  font-family: 'Poppins',sans-serif;
}
.signup{
  font-size: 15px;
  color: white;
  font-family: 'Poppins',sans-serif;
}
.signup a{
  color: #3498db;
  text-decoration: none;
}
.signup a:hover{
  text-decoration: underline;
}

That’s all, now you’ve successfully created an Amazing Transparent Login Form using HTML CSS & Javascript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

  • TAGS
  • HTML Form
  • Login Form
  • Login Form Design
  • Login Form HTML CSS
  • login form html template
  • Login Page
  • Transparent Login Form
Share
Facebook
WhatsApp
Twitter
Copy URL
    Previous articleResponsive Dropdown Menu Bar using HTML & CSS
    Next articleResponsive Footer Section Design with HTML & CSS
    CodingNepal

    RELATED ARTICLESMORE FROM AUTHOR

    How to Create Responsive Fiverr Website in HTML CSS and JavaScript

    How to Create Responsive Fiverr Website in HTML and CSS

    Create A Responsive Coffee Website in HTML and CSS

    Create A Responsive Coffee Website in HTML and CSS

    Create Beautiful Responsive Cards in HTML and CSS

    How to Create Responsive Cards in HTML and CSS

    Recent Posts

    Build An AI Image Generator Website in HTML CSS and JavaScript

    Build An AI Image Generator Website in HTML CSS and JavaScript

    December 15, 2023
    How to Create Responsive Fiverr Website in HTML CSS and JavaScript

    How to Create Responsive Fiverr Website in HTML and CSS

    October 11, 2023
    Create A Responsive Coffee Website in HTML and CSS

    Create A Responsive Coffee Website in HTML and CSS

    October 1, 2023
    Create Beautiful Responsive Cards in HTML and CSS

    How to Create Responsive Cards in HTML and CSS

    September 23, 2023
    Create A Responsive Footer in HTML and CSS Only

    Create A Responsive Footer Section in HTML and CSS

    September 16, 2023

    Featured Post

    Build An Image Editor in HTML CSS & JavaScript

    Build An Image Editor in HTML CSS & JavaScript

    CodingNepal - July 15, 2022 11

    Categories

    • HTML and CSS225
    • Javascript168
    • JavaScript Projects97
    • Login Form51
    • Card Design43
    • Navigation Bar35
    • Website Designs25
    • Image Slider21
    • CSS Buttons20
    • Sidebar Menu17
    • JavaScript Games16
    • API Projects15
    • Preloader or Loader15
    • Form Validation14
    • PHP12
    CodingNepal
    ABOUT US
    CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP... Read more
    FOLLOW US
    Facebook Instagram Youtube
    • About us
    • Terms & Conditions
    • Privacy policy
    • Contact us
    Copyright © 2024 CodingNepal All Rights Reserved

    AdBlock Detected

    Ad