<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="dvContenedor">
<div class="dvClasificacion">
<div class="dvEncabezado">
<h2 class="lblTitulo">Los empalagosos</h2>
<p class="lblDescr">Al menos once funcionarios del alto gobierno vienen de empresas u organizaciones que tienen alguna relación con la industria de bebidas azucaradas y comida altamente procesada.</p><br>
<hr><br>
</div>
<div class="dvEncabezado">
<h3 class="lblPrivado">Antes<br>sector privado</h3>
<div class="dvPuerta">
<input type="checkbox" id="switch" onchange="VerActual(this);" /><label for="switch">Toggle</label> </div>
<h3 class="lblPublico">Ahora<br>sector público</h3>
</div>
<div class="dvIndividuo">
<div class="dvAntes">
<img class="imgAntes" src="https://recursosdatoset.files.wordpress.com/2019/09/juan-pablo-uribe2-e1569343169326.jpg">
<h4 class="lblNombre">Juan Pablo Uribe</h4>
<p class="lblCargoA">Director de la Fundación Santa Fe, que recibe donaciones del Grupo Ardila Lülle.</p>
</div>
<div class="dvFlecha">
<svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z" fill="#66616C"/></svg>
</div>
<div class="dvDespues">
<img class="imgDespues" src="https://recursosdatoset.files.wordpress.com/2019/09/juan-pablo-uribe2-e1569343169326.jpg">
<h4 class="lblNombre">Juan Pablo Uribe</h4>
<p class="lblCargoA">Ministro de Salud.</p>
</div>
</div>
<div class="dvIndividuo">
<div class="dvAntes">
<img class="imgAntes" src="https://recursosdatoset.files.wordpress.com/2019/09/maria-carolina-corcione2-e1569258974232.jpg">
<h4 class="lblNombre">Maria Carolina<br>Corcione <br>Morales</h4>
<p class="lblCargoA">Gerente Legal de Unilever para las Américas del Medio.</p>
</div>
<div class="dvFlecha">
<svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z" fill="#66616C"/></svg>
</div>
<div class="dvDespues">
<img class="imgDespues" src="https://recursosdatoset.files.wordpress.com/2019/09/maria-carolina-corcione2-e1569258974232.jpg">
<h4 class="lblNombre">Maria Carolina<br>Corcione <br>Morales</h4>
<p class="lblCargoA">Superintendente Delegada para la Protección del Consumidor.</p>
</div>
</div>
<div class="dvIndividuo">
<div class="dvAntes">
<img class="imgAntes" src="https://recursosdatoset.files.wordpress.com/2019/09/santiago-duran1.jpg">
<h4 class="lblNombre">Santiago Durán</h4>
<p class="lblCargoA">Director de la Cámara de Bebidas de la Asociación Nacional de Empresarios ANDI.</p>
</div>
<div class="dvFlecha">
<svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z" fill="#66616C"/></svg>
</div>
<div class="dvDespues">
<img class="imgDespues" src="https://recursosdatoset.files.wordpress.com/2019/09/santiago-duran1.jpg">
<h4 class="lblNombre">Santiago Durán</h4>
<p class="lblCargoA">Asesor presidencial.</p>
</div>
</div>
<div class="dvIndividuo">
<div class="dvAntes">
<img class="imgAntes" src="https://recursosdatoset.files.wordpress.com/2019/09/angela-maria-orozco-ministra-transporte-e1569016711974.jpg">
<h4 class="lblNombre">Ángela María Orozco</h4>
<p class="lblCargoA">Presidenta Asociación Colombiana de la Industria de Aceites y Grasas Comestibles ASOGRASAS.</p>
</div>
<div class="dvFlecha">
<svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z" fill="#66616C"/></svg>
</div>
<div class="dvDespues">
<img class="imgDespues" src="https://recursosdatoset.files.wordpress.com/2019/09/angela-maria-orozco-ministra-transporte-e1569016711974.jpg">
<h4 class="lblNombre">Ángela María Orozco</h4>
<p class="lblCargoA">Ministra de Transporte.</p>
</div>
</div>
<div class="dvIndividuo">
<div class="dvAntes">
<img class="imgAntes" src="https://recursosdatoset.files.wordpress.com/2019/09/andres_valencia_pinzon-e1569016722546.jpg">
<h4 class="lblNombre">Andrés Valencia Pinzón</h4>
<p class="lblCargoA">Presidente de la Federación Nacional de Avicultores de Colombia.</p>
</div>
<div class="dvFlecha">
<svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z" fill="#66616C"/></svg>
</div>
<div class="dvDespues">
<img class="imgDespues" src="https://recursosdatoset.files.wordpress.com/2019/09/andres_valencia_pinzon-e1569016722546.jpg">
<h4 class="lblNombre">Andrés Valencia Pinzón</h4>
<p class="lblCargoA">Ministro de Agricultura.</p>
</div>
</div>
<div class="dvIndividuo">
<div class="dvAntes">
<img class="imgAntes" src="https://recursosdatoset.files.wordpress.com/2019/09/ricardo-lozano-ministro-medio-ambiente-e1569355533368.jpg">
<h4 class="lblNombre">Ricardo Lozano</h4>
<p class="lblCargoA">Director General del Centro Nacional de Agua de la ANDI.</p>
</div>
<div class="dvFlecha">
<svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z" fill="#66616C"/></svg>
</div>
<div class="dvDespues">
<img class="imgDespues" src="https://recursosdatoset.files.wordpress.com/2019/09/ricardo-lozano-ministro-medio-ambiente-e1569355533368.jpg">
<h4 class="lblNombre">Ricardo Lozano</h4>
<p class="lblCargoA">Ministro de Ambiente y Desarrollo Sostenible.</p>
</div>
</div>
<div class="dvIndividuo">
<div class="dvAntes">
<img class="imgAntes" src="https://recursosdatoset.files.wordpress.com/2019/09/ministra-de-educacion-mavictoria-angulo-e1569343431650.jpeg">
<h4 class="lblNombre">Maria Victoria<br>Angulo</h4>
<p class="lblCargoA">Directora Empresarios por la Educación, organización que trabaja con recursos de responsabilidad social de empresas privadas, como Nutresa.</p>
</div>
<div class="dvFlecha">
<svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z" fill="#66616C"/></svg>
</div>
<div class="dvDespues">
<img class="imgDespues" src="https://recursosdatoset.files.wordpress.com/2019/09/ministra-de-educacion-mavictoria-angulo-e1569343431650.jpeg">
<h4 class="lblNombre">Maria Victoria<br>Angulo</h4>
<p class="lblCargoA">Ministra de Educación.</p>
</div>
</div>
<div class="dvIndividuo">
<div class="dvAntes">
<img class="imgAntes" src="https://recursosdatoset.files.wordpress.com/2019/09/ministro_guillermo_botero-e1569355800104.png">
<h4 class="lblNombre">Guillermo<br>Botero Nieto</h4>
<p class="lblCargoA">Director de la Federación Nacional de Comerciantes.</p>
</div>
<div class="dvFlecha">
<svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z" fill="#66616C"/></svg>
</div>
<div class="dvDespues">
<img class="imgDespues" src="https://recursosdatoset.files.wordpress.com/2019/09/ministro_guillermo_botero-e1569355800104.png">
<h4 class="lblNombre">Guillermo<br>Botero Nieto</h4>
<p class="lblCargoA">Ministro de Defensa.</p>
</div>
</div>
<div class="dvIndividuo">
<div class="dvAntes">
<img class="imgAntes" src="https://recursosdatoset.files.wordpress.com/2019/09/viceministra-educacion-constanza-alarcon-e1569343856181.jpg">
<h4 class="lblNombre">Constanza Liliana<br>Alarcón Párraga</h4>
<p class="lblCargoA">Directora de la Fundación Alpina.</p>
</div>
<div class="dvFlecha">
<svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z" fill="#66616C"/></svg>
</div>
<div class="dvDespues">
<img class="imgDespues" src="https://recursosdatoset.files.wordpress.com/2019/09/viceministra-educacion-constanza-alarcon-e1569343856181.jpg">
<h4 class="lblNombre">Constanza Liliana<br>Alarcón Párraga</h4>
<p class="lblCargoA">Viceministra de Educación.</p>
</div>
</div>
<div class="dvIndividuo">
<div class="dvAntes">
<img class="imgAntes" src="https://recursosdatoset.files.wordpress.com/2019/09/maria-paula-correa-secretaria-privada-e1569344107118.jpg">
<h4 class="lblNombre">Maria Paula Correa</h4>
<p class="lblCargoA">Directora para América Latina de Concordia, organización de empresas privadas para generar alianzas inter-sectoriales con impacto social.</p>
</div>
<div class="dvFlecha">
<svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z" fill="#66616C"/></svg>
</div>
<div class="dvDespues">
<img class="imgDespues" src="https://recursosdatoset.files.wordpress.com/2019/09/maria-paula-correa-secretaria-privada-e1569344107118.jpg">
<h4 class="lblNombre">Maria Paula Correa</h4>
<p class="lblCargoA">Secretaria Privada de Presidencia.</p>
</div>
</div>
<div class="dvIndividuo">
<div class="dvAntes">
<img class="imgAntes" src="https://recursosdatoset.files.wordpress.com/2019/09/karen-abudinen-secretaria-regiones-e1569344300900.jpeg">
<h4 class="lblNombre">Karen Abudinen</h4>
<p class="lblCargoA">Directora Ejecutiva de Nu3, organización que asesora industrias en programas de responsabilidad social, que incluyen alimentación.</p>
</div>
<div class="dvFlecha">
<svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z" fill="#66616C"/></svg>
</div>
<div class="dvDespues">
<img class="imgDespues" src="https://recursosdatoset.files.wordpress.com/2019/09/karen-abudinen-secretaria-regiones-e1569344300900.jpeg">
<h4 class="lblNombre">Karen Abudinen</h4>
<p class="lblCargoA">Alta Consejera Presidencial para las Regiones.</p>
</div>
</div>
<div class="dvEncabezado">
<hr>
<table width="100%"><tbody><tr><td>
<h5 class="lblPrivado">Investigación y elaboración: </h5> </td>
<td width="130px" align="center">
<a href="https://ligacontraelsilencio.com/" target="_blank"> <img src="https://recursosdatoset.files.wordpress.com/2019/09/logo_liga_nr.png" width="80px"/></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Lora:400,700|Fira+Sans:700,900');
#dvContenedor {
width:100%;
text-align:center;
margin-top:3em;
margin-bottom:3em;}
.dvClasificacion { width:40em; max-width:40em; min-width:40em; margin-left:auto; margin-right:auto;}
.dvEncabezado {width:100%; display:table; height:80px; margin-top:0.3em; margin-bottom:0.3em; }
.lblTitulo {text-align:center; font-family: 'Fira Sans', sans-serif; font-size: 3em; line-height:110%; min-width:150px; display:inline-table; text-transform:uppercase; font-weight:400; color:#66616C;}
.lblDescr {font-family: 'Lora', serif; font-size:1.1em; line-height:130%; margin-top:0.3em; margin-bottom:0.3em;}
.lblPrivado, .lblPublico { text-align:center; font-family: 'Fira Sans', sans-serif; font-size: 1.35em; line-height:110%; min-width:100px; display:inline-table; text-transform:uppercase; font-weight:400;}
.lblPrivado {color:#464340;}
.lblPublico {color:#F1604E;}
.dvPuerta {display:inline-table; min-width:100px; max-width:100px; text-align:center; margin:0; padding:0;}
#switch {margin:0; padding:0;}
.dvAntes {display:inline-table; min-width:170px; max-width:170px; margin-left:5em;}
.dvDespues {display:none; min-width:170px; max-width:170px; margin-left:1em;}
.lblNombre {font-family: 'Fira Sans', sans-serif; font-size: 1.1em; line-height:110%; color:#fff; margin-top:0.3em; margin-bottom:0.3em; text-transform:uppercase; padding:10px 3px 10px 3px; text-align:center; font-weight:400;}
.dvAntes .lblNombre {background-color:#464340;}
.dvDespues .lblNombre {background-color:#F1604E;}
.lblCargoA {font-family: 'Lora', serif; font-size:0.8em; line-height:110%; margin-top:0.3em; margin-bottom:0.3em;}
.imgAntes, .imgDespues { min-height:90px;
max-height:90px;
min-width:90px;
max-width:90px;
border-radius: 50%; border-radius: 50%; border-radius: 50%; margin-left:auto; margin-right:auto; margin-top:0.5em; display:block; text-align:center;
padding:5px;}
.imgAntes { border:solid 0.5px #464340; padding:5px; background-color:#C3C6C8;}
.imgDespues { border:solid 0.5px #F1604E; padding:5px; background-color:#F7DCAD; }
.dvIndividuo {text-align:left; width:600px; min-width:470px;}
input[type="checkbox"] {
height: 0;
width: 0;
visibility: hidden;
margin-left:auto;
margin-right:auto;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 80px;
height: 35px;
background: #464340;
display: block;
border-radius: 100px;
position: relative;
top:-28px;
left:10px;
}
label:after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 30px;
height: 30px;
background: #fff;
border-radius: 30px;
transition: 0.3s;
}
input:checked + label {
background: #F1604E;
}
input:checked + label:after {
left: calc(100% - 5px);
transform: translateX(-100%);
}
label:active:after {
width: 100px;
}
.dvFlecha { width:50px; min-width:50px; max-width:50px; display:inline-table; margin-left:2em; margin-right:0; padding:0;}
@media only screen and (max-width: 40em) and (min-device-height: 641px)
{
.dvClasificacion { width:100%; max-width:100%; min-width:100%; margin:0; padding:0;}
.lblPrivado, .lblPublico { font-size: 1.3em; line-height:110%; min-width:110px; width:110px;}
.dvAntes, .dvDespues {min-width:38vw; max-width:38vw; margin-left:0.5em;}
.lblNombre {min-width:100%; width:100%;}
.dvFlecha { width:41px; min-width:41px; max-width:41px; margin-left:0.4em; margin-right:0;}
.imgAntes, .imgDespues { min-height:60px;
max-height:60px;
min-width:60px;
max-width:60px; }
.dvIndividuo {width:98vw; min-width:98vw; max-width:98vw; margin-left:auto; margin-right:auto;}
}
function VerActual(element)
{
if (element.checked)
{
var elementos = document.getElementsByClassName('imgAntes');
var todos = elementos.length;
for (var i = 0; i < todos; i++)
{
elementos[i].style.display = 'none';
}
var Actual = document.getElementsByClassName('dvDespues');
todos = Actual.length;
for (var i = 0; i < todos; i++)
{
Actual[i].style.display = 'inline-table';
}
}
else
{
var elementos = document.getElementsByClassName('imgAntes');
var todos = elementos.length;
for (var i = 0; i < todos; i++)
{
elementos[i].style.display = 'block';
}
var Actual = document.getElementsByClassName('dvDespues');
todos = Actual.length;
for (var i = 0; i < todos; i++)
{
Actual[i].style.display = 'none';
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.