Creating a Login Form
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login Form</title>
<link rel = "stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<nav>
<input class="menu-btn" type="checkbox" id="menu-btn">
<label class="menu-icon" for="menu-btn">
<span class="nav-icon"></span>
</label>
<ul class="menu">
<li><a href="/" class="Active">Login</a></li>
<li><a href="/register" class="Active">Register</a></li>
</ul>
</nav>
<div class="form">
<p>Login</p>
<form>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button>login</button>
<p class="message">Not Registerd? <a href="/register">Create an Account</a></p>
</form>
</div>
</body>
</html>
CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #000000;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 5px 10px 30px rgba(0, 0, 0, 0.336);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 1;
background-color: #0f0f0f;
}
nav ul {
display: flex;
}
nav ul li a {
font-family: calibri;
height: 40px;
line-height: 43px;
margin: 3px;
padding: 0px 22px;
display: flex;
font-size: 1rem;
text-transform: uppercase;
font-weight: 500;
color: #ffffff;
letter-spacing: 1px;
border-radius: 3px;
transition: 0.2s ease-in-out;
}
nav ul li a:hover {
background-color: #dd003f;
color: #ffffff;
box-shadow: 5px 10px 30px rgba(198, 64, 64, 0.411);
transition: all ease 0.2s;
}
nav .menu-btn,
.menu-icon {
display: none;
}
.form{
display: flex;
z-index: 1;
background-color: #ffffff;
opacity: 99%;
max-width: 260px;
margin: 200px auto 100px;
padding: 10px 45px 30px 45px;
justify-content: center;
align-items: center;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.2), 0.5px 5px 0 rgba(0,0,0,0.24);
border-radius: 10px;
}
Python Flask Integration
from flask import Flask, render_template
app=Flask(__name__)
@app.route('/')
def home():
return render_template('login.html')
@app.route('/register')
def about():
return render_template('register.html')
if __name__ == "__main__":
app.run(debug=True)
Experiencing issues with CSS rendering in the login form creation project facilitated by Flask. Despite modifications to the navbar and background styling, the alignment of the form remains askew. Troubleshooting is ongoing to address these discrepancies. It's important to note that the CSS file is being called through Flask, differing from conventional HTML implementations.