HTML CSS Beautiful User Login Form Template

HTML CSS Beautiful User Login Form

HTML CSS Beautiful user login form with help you to creaate your own css classes. this is basic concept to creating html css user login form with css class.

Creating web application you first you need to download and install text editor I recommended you to download Sublime text editor which is best for coding.

<html>
<head>
<title>HTML FORM</title>
<head>
<link rel="stylesheet" href="style.css">
<h1 style="text-align: center; color: azure;">Admin Login Form</h1>
</head>
</head>
<body>
<div class="contact-form">
<div>
<h1 style="text-align: center; color:lime;">Login Detail</h1>
</div>
<div class="img-icon"></div>
<form>
<div class="form-data">
<label>Enter Email</label><br>
<input type="email" name="email"><br><br>
<label>Enter Password</label><br>
<input type="password" name="password">
</div>
<div class="footer">
<button type="submit">Login</button>
<a style="color: lime;" href="www.gss-technoloy.com">Do't Account Click Here</a>
</div>
</form>
</div>
</body>
</html>
html css beautiful user login form

Stp 02: Create style.css file in your project directory and write the following code into it.

body{

background-image: url('img/jeremy-zero-9opiHRPIvR0-unsplash.jpg');
font-family: Verdana, Geneva, Tahoma, sans-serif;

}
.contact-form{
background-image: url('img/linux.jpeg');
background-repeat:round;
width: 600px;
height: 400px;
position:absolute;
margin-top: 50px;
margin-left: 350px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
box-shadow: 5px -15px 10px #CCC;

border: solid 1px #555;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
.img-icon{
background-image: url('img/user_icon_001.jpg');
background-repeat:round;
width: 100px;
height: 100px;
position: absolute;
margin-top: 10px;
margin-left: 250px;

}
.form-data{
padding-left: 200px;
position: absolute;
margin-top: 120px;

}
.footer{
padding-left: 200px;
margin-top: 250px;
position: absolute;

}

This Post Has 3 Comments

Leave a Reply