Añadiendo una imagen de fondo

Si tienen error al cargar los statics, como me sucedió, deben agregar lo siguiente en “settings . py”

STATICFILES_DIRS = [
    BASE_DIR / "static"
    ]

Les haré la vida super fácil:
Si quieren hacer algo más o menos como lo hice en esta imagen, de manera super sencilla, les recomendaré 3 herramientas que genera código CSS por ustedes (muy util para agilizar el front-end):

Las herramientas que usé son:

• Glassmorphism generator se trata de un generador del efecto ‘cristal’, se ve muy chulo.
• UI Gradientes genera gradientes de colores bonitos, quedan bien para el fondo de la página
• Animista genera código de animaciones CSS
  Todas las herramientas obvio les ofrecen una vista previa de cómo sería el resultado.

Para que vean cómo quedó el código, fue así para styles.css:

body {
  background: #4b6cb7;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #182848, #4b6cb7);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #182848, #4b6cb7);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-family: Arial, Helvetica, sans-serif;
}

.color-change-2x:hover {
  -webkit-animation: color-change-2x 2s linear infinite alternate both;
  animation: color-change-2x 2s linear infinite alternate both
}

@-webkit-keyframes color-change-2x {
  0% {
    background: #19dcea
  }

  100% {
    background: #b22cff
  }
}

@keyframes color-change-2x {
  0% {
    background: #19dcea
  }

  100% {
    background: #b22cff
  }
}

li {
  -webkit-backdrop-filter: blur(8.5px);
  backdrop-filter: blur(8.5px);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  list-style: none;
  margin: 30px 0;
  padding: 5px;
  width: fit-content;
}

li:hover {
  cursor: pointer;
}

li a {
  color: #ffffff;
  font-size: 2em;
  text-decoration: none;
}

Y la única modificación al index.html:

{% load static %}
<link rel="stylesheet" href="{% static 'polls/style.css' %}" />

{% if latest_question_list %}
<ul>
  {% for question in latest_question_list %}
  <li class="color-change-2x">
    <a href="{% url 'polls:detail' question.id %}"
      >{{ question.question_text }}</a
    >
    {% comment %} polls sale del app_name y detail sale del name de la vista en
    urls.py {% endcomment %}
  </li>
  {% endfor %}
</ul>
{% else %}
<p>No polls are available.</p>
{% endif %}

Nunca paren de aprender, esto es muy fácil 😃

Puntos extras si saben la referencia 💙

Yo el agregue un poco de estilo con un div:

#contenido {
    background-color: gray;
    width: 80%;
    margin: 0 auto;
    border-radius: 10px;
}

li a {
    color: green;
}

body {
    background: white url("./images/background.gif") no-repeat;
}

Este es el style.css que llevo hasta ahora

y aquí es donde envidio a toda esa gente que se sabe un putero de etiquetas CSS y sacas unas páginas de la puta jajajajaj xD

Muy buenas estas clases

Si entendí bien de estas dos clases, cuando se desarrolla en Django, ¿no se utiliza la estructura de archivos como se hace tradicionalmente cuando solo se usa html, css y javascript? Esto es, ¿no se debe importar los estilos con instrucciones html como toda la vida?

Yo lo decidí centrar para tenerlo mejor ubicado