<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; 
  -moz-border-radius: 50%; -webkit-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';
      }
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.