"Showcase"
Bootstrap 3.3.0 Snippet by ViniciusDAlves

<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; }

Related: See More


Questions / Comments: