How To Create Transparent Login Page Design – HTML & CSS
Hi, my Friends, Today’s blog post will teach you how to use HTML, CSS, and JavaScript to construct an amazing transparent login form. It’s time to make a straightforward yet gorgeous translucent login form in HTML and CSS. In my last blog, I explained how to create a Login and Registration Form in HTML and CSS.
You have probably seen a lot of login form html templates on various websites. A login form, expressed simply, is a series of inputs used to verify or authenticate a person prior to granting them access to a restricted website. There are two fields on the login form: one 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 without a unified backend. A backend language like PHP may be used to create a dynamic and effective login form. In case you’re having trouble comprehending what I’m saying. A comprehensive video explanation on this form may be viewed here: [Login Form HTML CSS].
Video Tutorial of Transparent Login Form HTML CSS
I’m hoping that after viewing this video, you have a basic understanding of the principles and scripts used to create this login form. This form’s and the image’s positions are very readily adjustable; just adjust a few position property values. Don’t worry if you enjoy this login form and would like to obtain the source codes for it; you can just copy from the provided code boxes or download the source code files by clicking the provided 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:
- How to Build an Image Generator Site Using AI Technology
- How To Create a Random Joke Generator with HTML, CSS, and JavaScript
- How To Build A Dictionary App in HTML CSS & JavaScript
- How To Creative Personal Portfolio Website Design with HTML, CSS & JavaScript
Transparent Login Form HTML CSS [Free 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.
[…] How To Create Transparent Login Page Design – HTML & CSS […]
[…] How To Create Transparent Login Page Design – HTML & CSS […]
erectalis tadalafil
How To Create Transparent Login Page Design – HTML & CSS – NerdyTutorials.Com