Menu ajustado

enderecos/templates/form.html

@@ -1,11 +1,11 @@
 {% extends "base.html" %}
 {% block title %}
-    Cadastro Endereço
+Cadastro Endereço
 {% endblock title %}
 {% block content %}
-    <form method="post" action="{% url 'cadastro_endereco' %}">
-        <h1>Cadastro de Endereço</h1>
-        {% csrf_token %}
-        <button type="submit">Confirmar</button>
-    </form>
-{% endblock content %}
+<form method="post" action="{% url 'cadastro_endereco' %}">
+    <h1>Cadastro de Endereço</h1>
+    {% csrf_token %}
+    <button type="submit">Confirmar</button>
+</form>
+{% endblock content %}

index.html

@@ -28,7 +28,8 @@ <h1>Cadastre-se</h1>
                 <div class="input-group">
                     <div class="input-box">
                         <label for="firstname">Primeiro Nome</label>
-                        <input id="firstname" type="text" name="firstname" placeholder="Digite seu primeiro nome" required>
+                        <input id="firstname" type="text" name="firstname" placeholder="Digite seu primeiro nome"
+                            required>
                     </div>
 
                     <div class="input-box">
@@ -53,7 +54,8 @@ <h1>Cadastre-se</h1>
 
                     <div class="input-box">
                         <label for="confirmPassword">Data do transporte</label>
-                        <input id="confirmPassword" type="password" name="confirmPassword" placeholder="Data do transporte" required>
+                        <input id="confirmPassword" type="password" name="confirmPassword"
+                            placeholder="Data do transporte" required>
                     </div>
 
                 </div>

main/views.py

@@ -7,4 +7,4 @@ def home(request):
 
     # return redirect('login')
 
-    return render(request, "base.html", {})
+    return render(request, "home.html", {})

templates/base.html

@@ -26,16 +26,14 @@
                 <li>
                     <a href="{% url 'lista_usuarios' %}">Usuários</a>
                 </li>
-                <li>
-                    <span>Olá {{ user.username }}!</span>
-                </li>
-                <li>
+                <li class="rightli" style="float:right">
+                    <span style="color: white;">Olá {{ user.username }}!</span>
                     <a href="{% url 'logout' %}">Log off</a>
                 </li>
             </ul>
         </form>
         {% comment %} <img src="{% static 'img/image.png' %}" alt=""> {% endcomment %}
-        <div id="container">
+        <div class="container">
             {% block content %}
             {% endblock content %}
         </div>

templates/static/css/styles.css

@@ -1,3 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&family=Open+Sans:wght@300;400;500;600&display=swap');
+
+body {
+    margin: 0px;
+    padding: 0px;
+    box-sizing: border-box;
+    font-family: 'Inter', sans-serif;
+}
+
+.rightli {
+    float: right;
+}
 
 ul.horizontal {
     list-style-type: none;
@@ -24,7 +36,7 @@ ul.horizontal li a:hover:not(.active) {
 }
 
 ul.horizontal li a.active {
-    background-color:#04AA6D;
+    background-color: #04AA6D;
 }
 
 ul.horizontal2 {
@@ -56,12 +68,14 @@ ul.horizontal2 a.active {
     color: white;
     background-color: #04AA6D;
 }
+
 .width94 {
-width:94%;
+    width: 94%;
 }
+
 @media screen and (max-width: 600px) {
     .width94 {
-       width:100%;
+        width: 100%;
     }
 }
 
@@ -82,16 +96,16 @@ ul.vertical li a {
 
 ul.vertical li a:hover:not(.active) {
     background-color: #555;
-    color:white;
+    color: white;
 }
 
 ul.vertical a.active {
     background-color: #04AA6D;
-    color:white;
+    color: white;
 }
 
 ul.gray {
-border: 1px solid #e7e7e7;
+    border: 1px solid #e7e7e7;
     background-color: #f3f3f3;
 }
 
@@ -111,33 +125,36 @@ ul.gray li a.active {
     color: white;
     background-color: #008CBA;
 }
+
 .rightli {
-float:right;
+    float: right;
 }
 
 @media screen and (max-width: 408px) {
     .rightli {
-       display:none;
+        display: none;
     }
 }
 
 ul.ex {
-width:90%;
+    width: 90%;
 }
+
 @media screen and (max-width: 600px) {
     ul.ex {
-       width:100%;
+        width: 100%;
     }
 }
 
 ul.divider li {
     float: left;
-    border-right:1px solid #bbb;
+    border-right: 1px solid #bbb;
 }
 
 ul.divider li:last-child {
     border-right: none;
 }
+
 ul.border {
     border: 1px solid #555;
 }
@@ -154,3 +171,14 @@ ul.border li {
 ul.border li:last-child {
     border-bottom: none;
 }
+
+.container {
+    margin: 1em auto;
+    text-align: center;
+    width: 80%;
+    height: 80vh;
+    display: flex;
+
+
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.212);
+}

usuarios/templates/login.html

@@ -32,5 +32,4 @@
         </div>
     </form>
 </body>
-
 </html>

usuarios/views.py

@@ -3,38 +3,43 @@
 
 
 def login(request):
-    return render(request, 'login.html')
+    return render(request, "login.html")
+
 
 # @login_required(login_url='/auth/login')
 
 
 def logout(request):
-    return render(request, 'login.html')
+    return render(request, "login.html")
+
 
 # @login_required(login_url='/auth/login')
 
 
 def listar(request):
 
-    return render(request, 'lista.html')
+    return render(request, "lista.html")
+
 
 # @login_required(login_url='/auth/login')
 
 
 def cadastrar(request):
 
-    return render(request, 'forms.html')
+    return render(request, "forms.html")
+
 
 # @login_required(login_url='/auth/login')
 
 
 def editar(request, id):
 
-    return render(request, 'forms.html')
+    return render(request, "forms.html")
+
 
 # @login_required(login_url='/auth/login')
 
 
 def excluir(request, id):
 
-    return render(request, 'lista.html')
+    return render(request, "lista.html")