I want .Input to be in the center, I mean username and passwor, that is, the entire block except the header
img shows exactly what is needed
you need to make in the center so that it looks like logging in using username and password
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="logo">
<h1 class="logo-name">PinqWest</h1>
</div>
<div class="Input">
<form action="#" method="post">
<h2 class="welcome">Welcome!</h2>
<input type="text" class="username" placeholder="username" required>
<br><br>
<input type="password" class="password" placeholder="password" required>
<br><br>
<button type="submit" class="enter">Enter</button>
</form>
<input type="checkbox" class="remember"> Remember me
<br>
<a href="#" class="forget">Forget password?</a>
<br>
<div class="register">Don't have an account? <a class="register-link" href="#">Register</a></div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logo{
background-color: #333;
padding: 10px;
}
.logo-name{
color: white;
text-align: center;
}
.Input{
display: flexbox;
margin: auto;
justify-content: center;
align-items: center;
height: 100vh;
}
New contributor
Dezer sniPer is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.