<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login Form</title>
</head>
<body>
<div class="box">
<center>
<h2>Login Form</h2>
<form action="scripts.php">
<input type="text" placeholder="Username">
<input type="password" placeholder="passwprd">
<input type="submit" value="Submit">
</form>
</center>
</div>
</body>
</html>
<style>
body{
margin:0px auto;
background-image: url("bg.jpg");
background-size: 100%;
}
h2{
font-size:30px;
text-transform: uppercase;
}
.box{
width:85%;
margin:0px auto;
background-color: #9cffffb5;
passing:100px 10px;
margin-top:100px;
text-align: center;
}
center{
text-align: center;
}
form{}
input{
padding:10px;
border:0;
margin-top:10px;
}
input[type="text"],input[type="password"]{
width:90%;
}
input[type="submit"]{
width:96%;
background-color: #000;
color:#fff;
}
input[type="submit"]:hover{
width:96%;
background-color: #f00;
color:#fff;
}
</style>
Video reference is better to understand
