{% block body %} {% if session['logged_in'] %} You're logged in already! {% else %} <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" /> <style> .bg{ background: url(../static/img/bg.jpg); background-repeat:no-repeat; background-size :cover ; filter: blur(7px); position: absolute; top: -30px; left: -30px; z-index: -1; width: calc(100vw + 60px); height: calc(100vh + 60px); } .container{ background-color: #FFFFFF; width: 400px; height: 500px; margin: 7em auto; border-radius: 1.5em; box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14); } .signin-heading{ padding-top: 5px; color: #8C55AA; font-family: 'Ubuntu', sans-serif; font-weight: bold; font-size: 23px; text-align: center; } .username, .email, .password, .re-password{ width: 76%; color: rgb(38, 50, 56); font-weight: 700; font-size: 14px; letter-spacing: 1px; background: rgba(136, 126, 126, 0.04); padding: 10px 20px; border: none; border-radius: 20px; outline: none; box-sizing: border-box; border: 2px solid rgba(124, 16, 97, 0.02); margin-bottom: 50px; margin-left: 46px; text-align: center; margin-bottom: 27px; font-family: 'Ubuntu', sans-serif; } .btn{ width: 50%; border: none; border-radius: 20px; box-sizing: border-box; border: 2px solid #8C55AA; margin-bottom: 50px; margin-left: 90px; padding: 10px 20px; } .btn:hover{ background: #8C55AA; transition: .5s; cursor: pointer; color: #fff; } .signup{ display: flex; justify-content: center; align-items: center; } ul{ position: absolute; display: flex; left: 65%; } li{ padding: 10px; margin: 10px; } a{ text-decoration: none; list-style: none; font-weight: bold; font-family: 'ink free'; } .main_menu a{ color: #fff; font-size: 300; } li :hover{ color: #8C55AA; transition: .5s; } h1{ font-family: 'ink free'; } .main_menu h1{ color: #fff; } </style> <section class="bg"></section> <div class="container"> <section class="signin-heading"> <h1>Sign In</h1> </section> <form action="/login" method="POST"> <input type="text" placeholder="Username" class="username" name="username" required> <input type="password" placeholder="Password" class="password" name="password" required> <button type="submit" class="btn">Sign In</button> </form> <a href="/signup" class="signup"> Sign Up</a> {% endif %} {% endblock %} jjj