7. Gráfico Presidentes

by Ernesto Cabral

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Infografia -->
<div class=container>    
    <div class="proyectos-per-gobierno"> 
            <h1 class="text-center"><strong>Montos contratados con cada gobierno
          </strong></h1>

        <section class="presidentes">
            <div class="row">
              <div class="col-md-4">
                  <div class="card-president">
                     <div class="title">
                         Alejandro Toledo
                     </div>
                     <img class="miniatura img-circle" src="http://i.imgur.com/cXfRmsL.png" data-toggle="tooltip" data-placement="right" title="Alejandro Toledo Manrique">

                     <div class="monto">Monto total</div>
                     <div class="monto-cant">S/ 3'987,503,372.00</div>

                 </div> <!-- end .card-president-->

                 <div class="time"><i class="fa fa-clock-o" data-toggle="tooltip" data-placement="top" title="Años de gobierno"></i>2001-2006</div>


                 <!-- Nav tabs -->
                 <div class="nav-center">
                   <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#tab_contratos_tol" aria-controls="tab_contratos_tol" role="tab" data-toggle="tab">Contratos</a></li>
                    <li role="presentation"><a href="#tab_concesiones_tol" aria-controls="tab_concesiones_tol" role="tab" data-toggle="tab">Concesiones</a></li>
                  </ul>
                 </div>

                 <!-- Tab panes -->
                 <div class="tab-content">

                  <div role="tabpanel"...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);

body {
    font-family: 'Open Sans', sans-serif;
     
}

.h1 {
  font-family: calibre, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:bold;
}

.proyectos-per-gobierno{
	font-family: 'Open Sans', sans-serif;	
	height: auto;
	color:#333333;
}

.proyectos-per-gobierno h2{
   font-size:25px;
   font-weight: 600;
   line-height: 1.3;
   text-align:center
}

.proyectos-per-gobierno span.fuente{
	font-size:17px;
	font-weight: 300;
  color:#FFF;
	background-color:#D7191F; 
	padding:5px;
  display:block;
  width:20%;
  margin:0 auto;
  text-align:center 
  
}

section.presidentes{
  
  padding:20px 0px;
}
.proyectos-per-gobierno .card-president{   
	padding:15px;
	text-align: center;  
  background-color:#F7F7F7;
  border-radius:4px;
  line-height:1;

}

.proyectos-per-gobierno .card-president .title{   
   font-size:18px;
   font-weight: 600;
   line-height: 1;
}


.proyectos-per-gobierno .card-president img.miniatura{   
   width:81px;
   height: 81px;
   margin:10px 0px;
}


.proyectos-per-gobierno .card-president div.monto{   
   font-weight: 300;
   font-size:16px;   
   line-height:2;
}


.proyectos-per-gobierno .card-president div.monto-cant{   
   font-weight: 600;
   font-size:18px;   
  
}

.proyectos-per-gobierno .time{   
   font-weight: 600;
   font-size:18px;   
   color:#F45B5B;
   padding:5px 0px;
   text-align:center
}

.proyectos-per-gobierno .time i{   
   padding-right:3px;
}


div.monto-big{  
  font-weight: 300;
  font-size:15px; 
  text-align: center;
}



 ul.proyectos{   
   font-weight: 400;
   font-size:14px;    
   list-style-type: none;
   padding-top:5px;
}

 ul.proyectos li{
	text-indent: -1.4em;
  line-height:2;
}

 ul.proyectos li:before{
	font-family: 'FontAwesome';
	content: '\f0c8';
	float: left;
	width: 1.4em;
}

 ul.proyectos li.contrato:before{
	color:#ff4c4c;	
}

 ul.proyectos li.concesion:before{
	color:#73b0c2;
}

/* Tabs...

JavaScript

$(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
});