{% extends 'base.html' %}
{% load url from future %}
{% load custom_tags %}
{% block contenido %}
<style>
input[type="checkbox"]{
height:50px;
width:100px;
}
.checkboxtext{
font-size: 28px;
}
#derecha{
position:relative;
margin-left:400px;
}
#espacio{
height:60px;
}
#factura{
margin-left:26px;
font-size:16px;
}
#espacio1{
height:10px;
}
#respuesta{
margin-left:26px;
font-size:16px;
}
<pre><code>.carousel{
width:100%;
}
.panes{
width:<mark>400</mark>%;
}
.panes > li{
width:<mark>25</mark>%;
}</code></pre>
@keyframes carousel{
0% { left:0; }
11% { left:0; }
12.5% { left:-100%; }
23.5% { left:-100%; }
25% { left:-200%; }
36% { left:-200%; }
37.5% { left:-300%; }
48.5% { left:-300%; }
50% { left:-400%; }
61% { left:-400%; }
62.5% { left:-300%; }
73.5% { left:-300%; }
75% { left:-200%; }
86% { left:-200%; }
87.5% { left:-100%; }
98.5% { left:-100%; }
100% { left:0; }
}
</style>
<h1 style="text-align:center;">Bienvenido</h1>
<input type="checkbox" name="optiona" id="opta" value="Ventas" />
<span class="checkboxtext">
Ventas
</span><br>
<div id="espacio1"></div>
<input type="checkbox" name="optionb" id="optb" value="Devoluciones"/>
<span class="checkboxtext">
Devoluciones
</span><br>
<div id="espacio1"></div>
<input type="checkbox" name="optionc" id="optc" value="Garantias"/>
<span class="checkboxtext">
Garantias
</span></br>
<div id="espacio"></div>
<div id="factura">¿Requiere factura?
<input type="radio" name="radio" value="si">Si</input>
<input type="radio" name="radio" value="no">No</input>
</div>
<div id="respuesta"></div>
<div id="derecha">
<div class=carousel>
<ul class=panes>
<li>
<img src="{{ STATIC_URL }}/img/documentacion/oferta.jpg" height="350px">
</li>
<!-- <li>
<img src=pane-02.jpg alt="">
</li>
<li>
<img src=pane-03.jpg alt="">
</li>
<li>
<img src=pane-04.jpg alt="">
</li>
<li>
<img src=pane-05.jpg alt="">
</li> -->
</ul>
</div>
</div>
{% endblock %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#factura input[type=radio]").on('change', function () {
var respuesta = $(this).val();
if (respuesta == "si") {
$("#respuesta").html("algo si");
} else{
$("#respuesta").html("algo no");
}
});
});
</script>