login.html file:
{% extends "base.html" %}
{% block content %}
<div class="container login-page-form">
<form id="login-form" action="/auth/login" method="post">
<div class="form-group">
<label for="Email">Email Address</label>
<input type="text" id="email" class="form-control" name="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" class="form-control" name="password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
{% endblock %}
main.css file:
#login-form {
margin-top: 25px
}
.login-page-form {
max-width: 200px;
}
I have provided the code snippet for the HTML and CSS files. Bootstrap is being used to style the HTML page, with additional custom CSS properties such as setting a maximum width for the form.