How To Create Transparent Login Form In HTML CSS3?

Create Transparent Login Form In HTML CSS

Create transparent login form in HTML CSS is very easy. In previous tutorial I have teach you how to create simple admin login form in html and css. Now in this tutorial you will learn how to create transparent login form in html css.

create transparent login form in html css

To create transparent login form in html css. Your project look like this.

If you not download any text editor first you should download the best text editor click here.

  1. img director
  2. index.html file
  3. syle.css file

We are creating this transparent login form just using simple css classes. Its not more complicated. You can create it in just 10 to 15 minutes. Follow these steps:-

Step 01. Open Index.html file and write the following code.

<html>
<head>
<title>Admin Login Form</title>
<head>
<link rel="stylesheet" href="style.css">
<h1 style="text-align: center; color: orange;">Admin Login Form</h1>
</head>
</head>
<body>
<div class="contact-form">
<div>
<h1 style="text-align: center; color:navy;">Login Detail</h1>
</div>
<div class="img-icon"></div>
<form>
<div class="form-data">
<label>Enter Email</label><br>
<input type="email" class="form-control" name="email"><br><br>
<label>Enter Password</label><br>
<input type="password" class="form-control" name="password">
</div>
<div class="footer">
<button type="submit">Login</button>
<a style="color: orange;" href="www.gss-technoloy.com">Sign Up Click Here</a>
</div>
</form>
</div>
</body>
</html>

Step  02. Open you style.css file and past the following code on it.

 

body{

background-image: url('img/fakurian-design-nY14Fs8pxT8-unsplash.jpg');
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-size: cover;

}
h1{
margin-top: 10px
}
.contact-form{
background-image: url('img/html login2 img.png');
background-repeat:round;
width: 350px;
height: 500px;
border-radius: 30px;
position:absolute;
margin-top: 50px;
margin-left: 480px;
opacity: 80%;
font-family: Arial, Helvetica, sans-serif;
color: white;
border:2px solid;
border-color: orange;



}
.img-icon{
background-image: url('img/lock icon.png');
background-repeat:round;
width: 100px;
height: 100px;
position: absolute;
margin-top: 0px;
margin-left: 120px;

}
.form-data{
padding-left: 100px;
position: absolute;
margin-top: 150px;

}
label{
color:white;
}
.form-control {
border: none;
border-bottom: 2px solid orange;
display: block;
width: 100%;
height: 43px;
font-size: 15px;
background: none;
}
button {
border: none;
background: none;
color: #fff;
width: 100px;
height: 33px;
border: 2px solid #fff;
cursor: pointer;


}


.footer{
padding-left: 100px;
margin-top: 350px;
position: absolute;

}

This Post Has One Comment

Leave a Reply