<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<link rel="stylesheet" href="http://jrain.oscitas.netdna-cdn.com/tutorial/css/fontawesome-all.min.css">
</head>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="serviceBox">
<div class="service-icon">
<i class="fa fa-globe"></i>
</div>
<div class="service-content">
<h3>Derecho a la comunicación y la participación</h3>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="serviceBox light_green">
<div class="service-icon">
<i class="fa fa-globe"></i>
</div>
<div class="service-content">
<h3>Economia solidaria e Inclusiva</h3>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="serviceBox red">
<div class="service-icon">
<i class="fa fa-globe"></i>
</div>
<div class="service-content">
<h3>Dinamización deportiva en centros penitenciarios de Andalucía</h3>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="serviceBox yellow">
<div class="service-icon">
<i class="fa fa-globe"></i>
</div>
<div class="service-content">
<h3>Orientación e Intermediación laboral para el empleo</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="serviceBox red">
<div class="service-icon">
<i class="fa fa-globe"></i>
</div>
<div class="service-content">
<h3>Derecho a la comunicación y la participación</h3>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="serviceBox">
<div class="service-icon">
<i class="fa fa-globe"></i>
</div>
<div class="service-content">
<h3>Economia solidaria e Inclusiva</h3>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="serviceBox light_green">
<div class="service-icon">
<i class="fa fa-globe"></i>
</div>
<div class="service-content">
<h3>Dinamización deportiva en centros penitenciarios de Andalucía</h3>
</div>
</div>
</div>
</div>
</div>
.serviceBox{
text-align: center;
padding:70px 20px;
border-bottom:4px solid hsl(189, 100%, 40%);
/*background:hsl(0, 0%, 20%);*/
background: hsl(0, 0%, 100%);
float:left;
transition:all 0.5s ease-in-out;
margin: 0 -15px;
height: 100%;
}
.serviceBox.light_green{
border-bottom:4px solid hsl(100, 58%, 68%);
}
.serviceBox.yellow{
border-bottom:4px solid hsl(48, 99%, 66%);
}
.serviceBox.red{
border-bottom:4px solid hsl(7, 80%, 62%);
}
.serviceBox .service-icon i{
color: hsl(189, 100%, 40%);
font-size: 48px;
text-align: center;
}
.serviceBox.light_green .service-icon i{
color:hsl(100, 58%, 68%);
}
.serviceBox.yellow .service-icon i{
color:hsl(48, 99%, 66%);
}
.serviceBox.red .service-icon i{
color:hsl(7, 80%, 62%);
}
.serviceBox .service-content h3{
color: hsl(189, 100%, 40%);
font-size:23px;
}
.serviceBox.light_green .service-content h3{
color:hsl(100, 58%, 68%);
}
.serviceBox.yellow .service-content h3{
color:hsl(48, 99%, 66%);
}
.serviceBox.red .service-content h3{
color:hsl(7, 80%, 62%);
}
.serviceBox .service-content p{
color:#fff;
}
.serviceBox:hover .service-content h3, .serviceBox:hover .service-icon i{
color:#fff;
}
.serviceBox:hover{
background:hsl(189, 100%, 40%);
transition:all 0.5s ease-in-out;
color:#fff;
}
.serviceBox.light_green:hover{
background:hsl(100, 58%, 68%);
}
.serviceBox.yellow:hover{
background:hsl(48, 99%, 66%);
}
.serviceBox.red:hover{
background:hsl(7, 80%, 62%);
}
@media screen and (max-width: 990px){
.serviceBox{
margin-bottom: 30px;
}
}
@media screen and (max-width: 767px){
.serviceBox{
margin: 0 0 30px 0;
}
}
