Download raw (2.2 KB)

{% extends "base3.html" %}


{% block content %}

<style>

/*ul*/.product-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 2;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.product-list img {
    height: 400px;
}

.product-list + .product-list img {
    height: 200px;
}

.product-list li {
    /*width: 300px;*/
    /*height: 400px;*/
    font-size: 10px;
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
}

.product-list label {
    outline: 8px solid #2A85A4;
    outline-offset: -4px;
    padding: 4px;
    display: block;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
        text-align: center;
}

.product-list span {
    /* border-top: 8px solid #2A85A4; */
    display: block;
    /* background-color: white; */
    color: black;
    position: relative;
    text-align: left;
    /* padding: 8px; */
    font-family: "Alfphabet-Condensed";
    font-size: 24px;
    outline: 8px solid #2a85a4;
    line-height: 48px;
    padding-left: 72px;
    background-color: white;
}

.product-list input:checked + label span:before {
    /* outline: 4px solid white; */
    /* outline-offset: -8px; */
    background-color: #fffd73;
}
.product-list span:before {
    content: "  ";
    display: inline-block;
    background-color: white;
    width: 48px;
    height: 48px;
    /* margin-right: 24px; */
    position: absolute;
    left: 0;
    top: 0;
    outline: 8px solid #2A85A4;
}

.product-list input:checked + label {
    background-color: #fffd73;
}

.product-list input {
    display: none;
}

.product-list img {
    padding: 30px; 
}

</style>

<article>
    <header>
        <h1>Moi aussi je veux soutenir Médor!</h1>
    </header>

    <p>Waouw, en plus je peux sélectionner plusieurs éléments et même offrir <em>Médor</em> en cadeau&thinsp;!</p>

    <form method="post" action="" class="jadore" style="clear: both">
        {% csrf_token %}
        {{ wizard.management_form }}
        {{ form.non_field_errors  }}

        {{ form.subscriptions }} 
        {{ form.per_items }}

        <div class="jadore__btn_set">
            <input class="jadore__btn" type="submit" value="continuer" />
        </div>
    </form>
</article>
{% endblock %}