<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 ---------->
<link href="https://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet">
<div class="nest">
<div class="container showcase-main">
<div class="row showcase-row">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="showcase-unit">
<div class="img-showcase">
<img class="img-showcase-item" src="http://www.javelin-tech.com/3d-printer/wp-content/uploads/2015/06/other-marine-propeller.jpg">
</div>
<div class="description-showcase">
<p class="description-item">Prototipagem</p>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active progress-bar-info" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">
<div class="progress-title">Custo</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<div class="progress-title">Qualidade</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
<div class="progress-title">Velocidade</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped activ progress-bar-info" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">
<div class="progress-title">Custo</div>
</div>
</div>
<div class="btn-block-showcase">
<a href="http://genesis3d.com.br/index.php/produto/servico-impressao-3d-prototipagem/" class="btn btn-primary btn-info btn-showcase"><span class="glyphicon glyphicon-shopping-cart"></span> Orçamento</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="showcase-unit">
<div class="img-showcase">
<img class="img-showcase-item" src="http://www.digitalmeetsculture.net/wp-content/uploads/2015/04/3D-printing.jpeg">
</div>
<div class="description-showcase">
<p class="description-item">Standard</p>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
<div class="progress-title">Custo</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
<div class="progress-title">Qualidade</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<div class="progress-title">Velocidade</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active progress-bar-info" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">
<div class="progress-title">Custo</div>
</div>
</div>
<div class="btn-block-showcase">
<a href="http://genesis3d.com.br/index.php/produto/servico-impressao-3d/" class="btn btn-primary btn-info btn-showcase"><span class="glyphicon glyphicon-shopping-cart"></span> Orçamento</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="showcase-unit">
<div class="img-showcase">
<img class="img-showcase-item" src="http://www.techandtrick.com/wp-content/uploads/2015/03/3d-printing.jpg">
</div>
<div class="description-showcase">
<p class="description-item">Alta Qualidade</p>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
<div class="progress-title">Custo</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active progress-bar-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%">
<div class="progress-title">Qualidade</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">
<div class="progress-title">Velocidade</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active progress-bar-info" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">
<div class="progress-title">Custo</div>
</div>
</div>
<div class="btn-block-showcase">
<a href="http://genesis3d.com.br/index.php/produto/servico-impressao-3d-alta-qualidade/" class="btn btn-primary btn-info btn-showcase"><span class="glyphicon glyphicon-shopping-cart"></span> Orçamento</a>
</div>
</div>
</div>
</div>
</div>
</div>
.nest {
background: #333130;
height: 400px;
width: 1600px;
vertical-align: middle;
position: relative;
}
.showcase-main {
background: #e9e9f0;
/*height: 90%;
width: 60%;*/
height: auto;
width: auto;
padding: 0px 0px 0px 0px;
/*position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
}
.showcase-row {
height: 100%;
width: 100%;
margin: 0;
/*margin-top: 2%;
margin-bottom: 2%;*/
padding: 15px;
}
.showcase-unit {
background: #fff;
height: auto;
width: 100%;
border-radius: 4px;
-webkit-box-shadow: 10px 10px 31px -13px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 31px -13px rgba(0,0,0,0.75);
box-shadow: 10px 10px 31px -13px rgba(0,0,0,0.75);
/*padding: 4px 4px 4px 4px;*/
margin: auto;
margin-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
max-width: 220px;
-webkit-transition-duration: 700ms;
-moz-transition-duration: 700ms;
-o-transition-duration: 700ms;
transition-duration: 700ms;
}
.showcase-unit:hover {
background: #fff;
height: auto;
width: 100%;
border-radius: 4px;
-webkit-box-shadow: 10px 10px 31px -10px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 31px -10px rgba(0,0,0,0.75);
box-shadow: 10px 10px 31px -10px rgba(0,0,0,0.75);
/*padding: 4px 4px 4px 4px;*/
margin: auto;
margin-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
max-width: 220px;
}
.img-showcase {
/*background: #bbb;*/
height: 105px;
position: relative;
margin-top: 10px;
}
.img-showcase-item {
width: 105px;
height: 105px;
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.description-showcase {
/*background: #ccc;*/
text-align: center;
margin-top: 4%;
height: auto;
}
.description-item {
font-family: 'Electrolize', sans-serif;
}
.progress {
width: 100%;
margin: 0 auto;
margin-top: 10px;
height: 25px;
border-radius: 6px;
}
.progress-bar {
width: 100%;
/*background: #E46305;*/
}
.progress-title {
width: 133px;
height: 100%;
float: left;
margin-left: 10px !important;
margin-top: 1px;
text-align: left !important;
color: #fff;
text-shadow: 1px 0px 2px rgba(150, 150, 150, 1);
font-weight: bold;
font-family: 'Electrolize', sans-serif;
}
.progress-value {
width: 50%;
float: right;
margin-right: 5%;
text-align: right;
color: #000;
}
.btn-block-showcase {
width: 100%;
height: 32px;
margin-top: 10px;
position: relative;
}
.btn-showcase {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Electrolize', sans-serif;
background: #E46305;
border-color: #E46305;
}
.btn-showcase {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Electrolize', sans-serif;
background: #E46305 !important;
border-color: #E46305 !important;
}
.btn-showcase:visited {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Electrolize', sans-serif;
/*background: #E46305 !important;
border-color: #E46305 !important;*/
color: #fff;
}
.btn-showcase:hover {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Electrolize', sans-serif;
background: #19a6e4 !important;
border-color: #19a6e4 !important;
color: #fff;
}
