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.
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.
- img director
- index.html file
- 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;
} 
Pingback: css html com Login Sign In Account Page Guide http form - trustba.com
Hurrah, that’s what I was exploring for, what a data!
existing here at this webpage, thanks admin of
this web page.