No tienes acceso a esta clase

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

Finalizando los estilos de la vista de detalle

16/17
Recursos

Aportes 17

Preguntas 2

Ordenar por:

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

o inicia sesi贸n.

Minuto 5:09 鉁 鈥淪ilencio inc贸modo, no voy a votar porque esto puede hacer que me despidan鈥 鉁

Esta clase, estas clases, este curso. Son los mejores que hay en Platzi!! 馃挌馃槑

Aporte del CSS de la clase. (agregue uno detalles para una mejora est茅tica)

form {
    background: linear-gradient(
        to right,
        hsl(98, 100%, 62%),
        hsl(204, 100%,  59%)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}
fieldset {
    align-items: center;
    border: 1px solid white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 40px;
}

input[type="submit"] {
    -webkit-text-fill-color: white;
    background-color: hsl(205, 100%, 5%);
    border: 1px solid white;
    font-size: 20px;
    height: 40px;
    margin-top: 20px;
    width: 100%;
    cursor: pointer;
}
input[type="submit"]:hover, input[type="submit"]:active {
    background: linear-gradient(
        to right,
        hsl(98, 100%, 62%),
        hsl(204, 100%,  59%)
    );
}

Este curso ser谩 el inicio de mi primer mill贸n de d贸lares鈥 Gracias Facundo!

results.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'polls/style.css' %}">
    <link rel="stylesheet" href="{% static 'polls/results.css' %}">
    <title>Document</title>
</head>
<body>
    <header>
        <p>{{ question.question_text }}</p>
    </header>
    <ul>
        {% for choice in question.choice_set.all %}
            <li>{{ choice.choice_text }} &nbsp; | &nbsp; {{ choice.votes }} vote{{ choice.votes|pluralize:"s"}}</li>
        {% endfor %}
    </ul>    
    <a href="{% url 'polls:detail' question.id %}">Do you want to vote again?</a>
</body>
</html>

results.css

body{
    display: flex;
    align-items: center;
    justify-content: center;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: 50px;
    padding-top: 100px;

    height: 60px;
    font-size: 62px;   
    color: #71632d;
}

main a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    font-size: 20px;
}

Mis propios estilos:

C贸digo HTML:

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="{% static 'polls/reset.css' %}" />
    <link rel="stylesheet" href="{% static 'polls/style.css' %}" />
    <link rel="stylesheet" href="{% static 'polls/results.css' %}" />
    <title>{{ question.question_text }}</title>
  </head>
  <body>
    <h1 class="h1">{{ question.question_text }}</h1>
    <ul class="choices-list">
      {% for choice in question.choice_set.all %}
      <li>
        {{ choice.choice_text }} -- {{ choice.votes }}
        vote{{choice.votes|pluralize}}
      </li>
      {% endfor %}
    </ul>
    <a href="{% url 'polls:detail' question.id %}" class="vote-again"
      >Vote again?</a
    >
  </body>
</html>

c贸digo CSS:

.h1 {
  font-size: 2em;
  height: 15vh;
  margin-bottom: 50px;
  margin-top: 50px;
}

.choices-list {
  height: 85vh;
}

.choices-list li {
  font-size: 1.2em;
  margin: 50px 0;
  text-decoration: underline;
}

.vote-again {
  align-items: center;
  border-radius: 6px;
  border: 2px solid white;
  color: white;
  display: flex;
  height: 20vh;
  justify-content: center;
  padding: 0 10px;
  text-decoration: none;
}

.vote-again: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: white;
    color: #4b6cb7;
  }

  100% {
    background: #4b6cb7;
    color: white;
  }
}

@keyframes color-change-2x {
  0% {
    background: #4b6cb7;
    color: white;
  }

  100% {
    background: white;
    color: #4b6cb7;
  }
}

Mi css de results:

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

#container {
    background: linear-gradient(
        to right,
        hsl(98, 100%, 62%),
        hsl(204, 100%,  59%)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}
a{
    background: linear-gradient(
        to right,
        hsl(98, 100%, 62%),
        hsl(204, 100%,  59%)
    );
    outline: none;
    text-decoration: none;
    display: inline-block;
    width: 19.5%;
    margin-right: 0.625%;
    text-align: center;
    line-height: 2;
    -webkit-text-fill-color: black;
    border-radius: 10px;

As铆 me quedo 馃槃

Segu铆 la misma plantilla y qued贸 algo talqueas铆 uwU

Mi aporte

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

a{
    text-align: center;
    width: 20%;
    height: 30px;
    margin-top: 20px;

    background: linear-gradient(
        to right,
        hsl(98 100% 62%),
        hsl(204 100% 59%)
    );
    background-color: hsl(204 100% 5%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    border-bottom: 1px solid white;
    font-size: 20px;

}

Tremendo profesor, podr铆a explicar hasta html y css perfectamente.

Premoritorio el mensaje del 5:25, una pena un excelente tutor, hay pocos as铆 que explican con una facilidad impresionante, muy ameno sus curso. gracias Facundo

Mis ultimos toques

  • Agregue un link para volver al index view.
  • Cree un base.html para extenderlo en las otras views. Documentaci贸n aqui
  • Hice unos peque帽os cambios al css para adaptarlo en dispositivos m贸viles.

馃挌Acepto feedback, gracias馃挌


Vistas en dispositivos moviles

Index view

Details view

Results view


base.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% block stylesheet %}
        <link rel="stylesheet" href="{% static 'polls/reset.css' %}">
        <link rel="stylesheet" href="{% static 'polls/style.css' %}">
    {% endblock stylesheet %}
    <title>{% block title %} Premios Platzi App {% endblock title %}</title>
</head>

<body>

    <div id="index">
        {% block index %}
        <a href="{% url 'polls:index' %}" referrerpolicy="origin">Ir al inicio </a>
        {% endblock %}
    </div>

    {% comment "Section content" %}section with the main content{% endcomment %}
    <section id="content">
        {% block content %}{% endblock %}
    </section>
    <footer>
        <a href="https://platzi.com">Platzi</a>
        <a href="#">Contacto</a>
        <a href="#">驴Quires ser profe?</a>
        <a href="#">Politica de Pirvacidad</a>
        <a href="#">Terminos y condiciones</a>
    </footer>
</body>
</html>

index.html

{% extends 'polls/base.html' %}
{% load static %}

<body>
    {% block content %}
    <header>
        <h1>Premios Platzi App</h1>
    </header>
    <main>
        {% if latest_question_list %}
            <ul>
                {% for question in latest_question_list %}
                <li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
                {% endfor %}
            </ul>
            {% else %}
            <p>No polls are available.</p>
            {% endif %}
        </main>
    {% endblock content %}
</body>

detail.html

{% extends 'polls/base.html' %}
{% load static %}

<head>
    {% block stylesheet %}
        <link rel="stylesheet" href="{% static 'polls/style.css' %}">
        <link rel="stylesheet" href="{% static 'polls/detail.css' %}">
    {% endblock stylesheet %}
    <title>{% block title %} {{ question.question_text }} {% endblock title %}</title>
</head>
<body>
    {% block content %}
    <form action="{% url 'polls:vote' question.id %}" method="post">
        {% csrf_token %}
        <fieldset>
            <legend><h1>{{ question.question_text }}</h1></legend>
            {% if error_message %}
                <p><strong>{{ error_message }}</strong></p>
            {% endif %}
            {% for choice in question.choice_set.all %}
                <input 
                id="choice{{ forloop.counter }}"
                name="choice"
                type="radio"
                value="{{ choice.id }}"
                >
                <label for="choice{{ forloop.counter }}">
                    {{ choice.choice_text }}
                </label>
                <br>
            {% endfor %}
        </fieldset>
        <input name="vote" type="submit" value="votar">
    </form>
    {% endblock content %}
</body> 

results.html

{% extends 'polls/base.html' %}
{% load static %}

<head>
    {% block stylesheet %}
        <link rel="stylesheet" href="{% static 'polls/style.css' %}">
        <link rel="stylesheet" href="{% static 'polls/result.css' %}">
    {% endblock stylesheet %}
    <title>{% block title %} {{ question.question_text }} {% endblock title %}</title>
</head>
<body>
    {% block content %}
    <header>
        <h1>{{ question.question_text }}</h1>
    </header>
    <ul>
        {% for choice in question.choice_set.all %}
        <li>
            {{ choice.choice_text }} -- {{ choice.votes }} vote{{choice.votes|pluralize }}
        </li>
        {% endfor %}
    </ul>
    <section id="vote_again">
        <a href="{% url 'polls:detail' question.id %}">驴Te gustaria votar de nuevo?</a>
    </section>
    {% endblock content %}
</body>

style.css

body {
    display: grid;
    grid-template-rows: [Index] 75px [Index-end] auto [Footer] auto [Footer-end];
    grid-column-gap: 10px;

    background-color: hsl(204, 100%, 5%);
    font-family: Arial, Helvetica, sans-serif;
    height: 100vh;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;

    padding-top: 100px;
    padding: 50px;

    color: #71632d;
    font-size: 72px;
    height: 60px;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    padding: 50px 2px;
    width: 100vw;
}

/* Index link*/
#index {
    background: linear-gradient(
        to right,
        hsl(204, 100%, 59%),
        hsl(98, 100%, 62%)
    );
    -webkit-background-clip: text;
    align-self: flex-start;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    padding: 25px 20px;
}

/* Mobile adaptatation 
with a 550px or less
*/
@media only screen and (max-width: 550px) {
    header {
        font-size: 50px
    }
    li {
        font-size: 4.9vw;
        width: 54.5vw;
    }

    footer {
        flex-direction: column;
        font-size: 3.8vw;
    }

    footer a {
        padding-top: 15px;
    }
}

results.css

header {
    font-size: 3.5vw;
}

#vote_again {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    
    padding: 15px 2px;
    width: 100vw;
    font-size: 23px; 
}

As铆 dej茅 el results.css

body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}

form {
    background: linear-gradient(
        to right,
        hsl(98 100% 62%),
        hsl(204 100% 59%)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

body h1 {
    color: white;
}

En mi caso agregue los mismos estilos que se utilizaron para el index

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'polls/reset.css' %}">
    <link rel="stylesheet" href="{% static 'polls/style.css' %}">
    <title>{{question.question_text}}</title>
</head>
<body>
    <h1>{{question.question_text}}</h1>
    <ul>
        {% for choice in question.choice_set.all %}
            <li>{{choice.choice_text}}: {{choice.votes}} vote{{choice.votes|pluralize}}</li>
        {% endfor %}
    </ul>
    <a href="{% url 'polls:detail' question.id %}">Vota de nuevo aqui!</a>
</body>
</html>

Excelente

Trabaj茅 tambi茅n las visualizaciones de details y results con los estilos que creamos, funciona y es coherente a lo que creamos.
Les dejo el c贸digo y c贸mo se ve, mis disculpas si comet铆 alguna burrada de frontend. att: un Data Scientist haciendo su mejor esfuerzo 馃槄

Creating the structure of the details view

We still don鈥檛 have style for for details and results soo we have to make an specific style for them, that鈥檚 why we create an detail.css file

    form {
        background: linear-gradient(
            to right,
            hsl(98, 100%, 62%),
            hsl(204, 100%,  59%)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
    }
    
    h1 {
        font-size: 2em;
        font-weight: bold
    }
    
    fieldset {
        align-items: center;
        border: 1px solid white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px 40px;
    }
    
    input[type="submit"] {
        -webkit-text-fill-color: white;
        background-color: hsl(205, 100%, 5%);
        border: 1px solid white;
        font-size: 20px;
        height: 40px;
        margin-top: 20px;
        width: 100%;
        cursor: pointer;
    }
    input[type="submit"]:hover, input[type="submit"]:active {
        background: linear-gradient(
            to right,
            hsl(98, 100%, 62%),
            hsl(204, 100%,  59%)
        );
    }

detail.html
Notice that we import the style.css and then the detail.css not the reset

    {% load static %}
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        **<link rel="stylesheet" href="{% static 'polls/style.css' %}">
        <link rel="stylesheet" href="{% static 'polls/detail.css' %}">**
        <title> {{question.question_text}} </title>
    </head>
    
    <body>
        <form action="{% url 'polls:vote' question.id %}" method="post">
        {% csrf_token %}
        <fieldset>
            <legend><h1>{{ question.question_text }}</h1></legend>
            {% if error_message %}
                <p><strong>{{ error_message }}</strong></p>
            {% endif %}
            {% for choice in question.choice_set.all %}
                <input 
                    type="radio"
                    name="choice"
                    id="choice{{ forloop.counter }}"
                    value="{{choice.id}}"
                >
                <label for="choice{{ forloop.counter }}">
                    {{choice.choice_text}}
                </label>
                <br>
            {% endfor %}
        </fieldset>
        <input type="submit" value="Votar">
        </form>
    </body>
    
    <!-- <h1>{{question.question_text}}</h1>
    <ul>
    {% for choice in question.choice_set.all %}
        <li>{{ choice.choice_text }}</li>
    {% endfor %}
    </ul> -->

results.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'polls/style.css' %}">
    <link rel="stylesheet" href="{% static 'polls/detail.css' %}">
    <title>Resultados: {{question.question_text}}</title>
</head>

<body>
    <form> <!-- * i added this to correct an error of the h1 visualization 馃槄 */ -->
    <fieldset>
        <legend><h1>Resultados: {{ question.question_text }}</h1></legend>
        <ul>
        {% for choice in question.choice_set.all %}
            <li>{{ choice.choice_text }}: {{ choice.votes }} vote{{ choice.votes|pluralize}} </li>
        {% endfor %}
        </ul>
    <fieldset>
    </form>
    <a href="{% url 'polls:detail' question.id %}">驴Te gustar铆a votar de nuevo?</a>
</body>