No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

A帽adiendo una imagen de fondo

10/17
Recursos

Aportes 10

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Si tienen error al cargar los statics, como me sucedi贸, deben agregar lo siguiente en 鈥渟ettings . 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 鈥榗ristal鈥, 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