Unable to apply Login Form Css to HTML

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.

Answer №1

Upon reviewing your CSS, I have identified some issues related to the use of flex box for styling. By default, the flex-direction property sets the direction to row, but it appears that you intend for it to be in the column direction. If you also wish to center everything, including p tags and text, you would need to apply text-align. I have provided a detailed example snippet below.

@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;
    flex-direction: column;
    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;
    align-content: 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;
}

div.form > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
<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 Registered? <a href="/register">Create an Account</a></p>
    </form>
  </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unresolved Issue: Jquery Modal Fails to Activate on Subsequent Click for Ajax-

When I make an Ajax call, I load HTML into a div. This HTML content contains a jQuery modal that opens when clicked. However, on the first click, the modal opens correctly. On subsequent clicks, I receive the following error in the console: Uncaught Type ...

There is a significant spacing issue between the header and main category when viewed on a mobile device

Experiencing issues with element distances on different screen sizes? While the website looks fine on normal screens, there's a noticeable gap between the header and main sections on mobile devices. See below for the provided HTML and CSS code. ...

Modifying the colors of my navigation links is not within my control

How can I modify my CSS to change the color of the navigation links to white? Below is the code snippet: <div class="col-sm-12"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header" ...

Restricting the embedding of my website to a select few domains

Looking to embed my web app on various websites, but I want to restrict access based on domain. For example, allowing and to embed without issues, while blocking . Is there a way to achieve this? Using iFrames for the embedding process. ...

Determine the width of two inline input fields

Showing two inputs side by side: +------------+ +--------------------------+ | ID='inputA'| | ID='inputB' | +------------+ +--------------------------+ +------------------------------------------+ A ...

Is it possible to implement localStorage for auto-filling multiple forms simultaneously on a single webpage

I have been exploring a code snippet by Ke Yang that uses localStorage to synchronize text in form fields across different fields. I am interested in implementing something similar. On a page where I have a library of downloadable items, there are approxi ...

top margin is functioning properly in Internet Explorer, but not in Google Chrome

margin-top is behaving differently in IE compared to Google Chrome. Two menus are supposed to be displayed one above the other in my design. The issue lies in the line margin-top:30%; within .anothermenu ul. In Chrome, the second menu appears above the f ...

Encountered an error while trying to download a PDF document in React

I'm currently working on adding a button to my website portfolio that allows users to download my CV when clicked. The functionality works perfectly fine on my localhost, but after deploying it to AWS Amplify, I encountered an error. The error occurs ...

Clicking on the Submit button of the post form simply refreshes the page

Every time I try to submit values from an HTML form, the page reloads without any changes. I've double-checked the routes and controller, but everything seems correct. Solution <div class="panel-body"> @if (session('status')) ...

Trouble Loading HTML Template Post Email Dispatch in Django

In my Django project, I have set up functionality to send an email after a form submission using the smtplib module. The email is sent successfully, but for some reason, I'm encountering an issue where the corresponding HTML template (delivery_email_s ...

Personalizing the share button by changing the icon font to an image

I've been working on incorporating this share button into my website.... Although it functions properly as is, I want to switch out the icon font for an image. I attempted to modify certain CSS properties, but encountered some issues. http://jsfidd ...

Using AngularJS to apply custom css to a tag within a directive for creating a Bootstrap sticky footer

Currently, I am in the process of developing my very first AngularJS application with Bootstrap as the responsive framework. In order to achieve a sticky footer, I usually utilize jQuery to determine the outerHeight of the footer and then apply that value ...

Can someone please show me how to position this H1 in the center at the bottom of the div?

Looking for a simple solution to place text at the bottom of a div without turning the entire div into a grid. New to HTML/CSS and struggling with vertical alignment issues... <!DOCTYPE html> <html> <head> <title>Creating an O ...

React Sticky sidebar implementation throughout the various components

My goal is to implement a sticky sidebar that moves smoothly across specific components on my webpage. The challenge I am facing is that the CSS 'sticky' property only allows movement within the component it was created in. So, my question is - w ...

Issues with the functionality of Bootstrap

Upon loading the page, I am encountering an issue with a collapse on the 'main' id. It fails to collapse initially and only functions correctly after being clicked. I have not utilized 'collapse in', so I am unsure why this behavior per ...

Display current weather conditions with the Open Weather API (featuring weather icons)

Hello everyone, I need some help from the community. I am currently working on a weather app using the openweather API. However, I'm facing an issue with displaying the weather conditions icon for each city. I have stored every icon id in a new array ...

Tips for adjusting the font size on the Google Maps mapType controller

Is it possible to adjust the font size of a Google Maps mapType controller using HTML or CSS? I've managed to change the size of the controller, but struggling with the font size. HTML: <div #map id="map" style="height:250px;"></div> C ...

Achieving consistent height for Grid items in Material-UI

I'm looking to achieve equal heights for these grid items without distorting them. Here's the current layout: https://i.sstatic.net/6dPed.jpg This is how I would like it to look: https://i.sstatic.net/BJZuf.jpg My challenge is that adjusting ...

Introducing the World of Wordpress Blogging

How can I create an introduction on my WordPress site similar to the one found at ? I am specifically interested in incorporating the expanding horizon line effect. It seems like it may just be a GIF that plays and then fades into the homepage. Are there ...

Responsive Text and Alignment in the Latest Bootstrap 5

My goal is to center my div element while keeping the text aligned to the left. Here's the code I have: <div class="container"> <div class="row"> <div class="col"> <h1>< ...