How to design login page in html

How to design login page in html

April 18, 2025
by cdzn809
Coding
4870 Views

<!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

Leave a Reply Cancel reply