Tutorial Simple login page - HTML CSS

f0rget · 03-29-2023, 11:51 PM

html + css

Code:
<!DOCTYPE html>
<html>
<head>
	<title>Login Form</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<form>
			<h2>Login</h2>
			<div class="inputBox">
				<input type="text" name="" required="">
				<label>Username or Email</label>
			</div>
			<div class="inputBox">
				<input type="password" name="" required="">
				<label>Password</label>
			</div>
			<input type="submit" name="" value="Login">
			<div class="remember">
				<label><input type="checkbox" name="">Remember me</label>
				<a href="#">Forgot Password?</a>
			</div>
		</form>
	</div>
</body>
</html>

Code:
body {
	background-color: #360033;
	background-image: linear-gradient(120deg, #360033, #0b8793);
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
}

.container {
	background-color: rgba(255,255,255,0.9);
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	margin: 150px auto;
	max-width: 500px;
	padding: 30px;
}

h2 {
	color: #360033;
	font-size: 28px;
	margin-bottom: 30px;
	text-align: center;
}

input[type="text"],
input[type="password"] {
	background: none;
	border: none;
	border-bottom: 2px solid #360033;
	color: #360033;
	font-size: 18px;
	margin-bottom: 20px;
	outline: none;
	padding: 10px 0;
	width: 100%;
}

input[type="submit"] {
	background-color: #360033;
	border: none;
	border-radius: 25px;
	color: #fff;
	cursor: pointer;
	font-size: 18px;
	margin-top: 20px;
	padding: 15px 30px;
	transition: background-color 0.5s;
	width: 100%;
}

input[type="submit"]:hover {
	background-color: #0b8793;
}

.remember {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
}

.remember label {
	color: #360033;
	font-size: 16px;
}

.remember a {
	color: #360033;
	font-size: 16px;
	text-decoration: none;
}

RansowMare · 07-21-2023, 03:50 AM

Damn, very nice login bro

f0rget · 07-22-2023, 01:42 AM

(07-21-2023, 03:50 AM)RansowMare Wrote: Damn, very nice login bro

welcome <3

CyberXor1337 · 09-25-2023, 02:25 PM

design is simple and nice keep it up