<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container" id="features">
<div class="row">
<div class="col-md-4 feature">
<img src="http://jkassessoriaempresarial.com.br/theme/jk/images/target.png" alt=""> <h3>MISSÃO</h3>
<div class="title_border"></div>
<p>Oferecer todo suporte necessário à realização das expectativas de nossos clientes e colaboradores, superando a suas perspectivas continuamente e contribuindo para o desenvolvimento econômico, social e profissional.</p>
</div>
<div class="col-md-4 feature">
<img src="http://jkassessoriaempresarial.com.br/theme/jk/images/graph.png" alt=""> <h3>VISÃO</h3>
<div class="title_border"></div>
<p>Ser reconhecida por sua consultoria especializada e preventiva, a fim de estar á frente dos novos cenários mercadológicos, para auxiliar seus clientes estrategicamente nas melhores e mais seguras tomadas de decisões.</p>
</div>
<div class="col-md-4 feature">
<img src="http://jkassessoriaempresarial.com.br/theme/jk/images/team.png" alt=""> <h3>VALORES</h3>
<div class="title_border"></div>
<p>Foco do cliente, excelência, inovação, respeito ao ser humano, qualidade, melhoria contínua, honestidade, profissionalismo, ética.</p>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Nunito');
*{
font-family: 'Nunito', sans-serif;
}
#features {
margin-top:20px;
}
.feature, .feature i, .feature h3, .feature .title_border {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.feature {
background:#FFFFFF;
text-align:center;
padding:20px;
border: solid 1px #cccccc;
}
.feature p {
margin-top:20px;
margin-bottom:30px;
}
.feature i{
font-size:80px;
color:#FFFFFF;
background:#1E825F;
padding:30px;
border-radius:50%;
border: solid 3px #1E825F;
}
.feature h3 {
color:#1E825F;
}
.feature:hover {
background:#F5F5F5;
-webkit-transform: translate(0,1em);
-moz-transform: translate(0,1em);
-o-transform: translate(0,1em);
-ms-transform: translate(0,1em);
transform: translate(0,1em);
}
.feature:hover i{
color:#1E825F;
border-color:#1E825F;
background:#FFFFFF;
}
.feature:hover .title_border {
background-color:#1E825F;
width:50%;
}
.feature .title_border {
width: 0%;
height: 3px;
background:#1E825F;
margin: 0 auto;
margin-top: 12px;
margin-bottom: 8px;
}
