<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="flip">
<div class="card">
<div class="face front">
<div class="showcase-unit">
<p> <a href="#" class="fliper-btn"><span class="glyphicon glyphicon-info-sign"></span></a></p>
<div class="img-showcase">
<img class="img-showcase-item" src="http://genesis3d.com.br/wp-content/uploads/2017/02/Prototipagem1-min.png">
</div>
<div class="description-showcase">
<p class="description-item">Impressão Rápida</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:50%">
<div class="progress-title">Resistência</div>
</div>
</div>
<div class="btn-block-showcase">
<a href="http://genesis3d.com.br/produto/servico-impressao-3d-impressao-rapida/" class="btn btn-primary btn-info btn-showcase"><span class="glyphicon glyphicon-shopping-cart"></span> Orçamento</a>
</div>
</div>
</div>
<div class="face back">
<div class="showcase-unit">
<p> <a href="#" class="fliper-btn"><span class="glyphicon glyphicon-share-alt"></span></a></p>
<div class="text">
<ul class="square">
<div class="title">Aplicações</div>
<li class="text">Modelos que não requeiram detalhes.</li>
<li class="text">Modelos funcionais, peças de reposição para modelismo e para projetos que não requeiram alta precisão ou acabamento detalhado.</li>
<li class="text">Protótipos iniciais e provas de conceito.</li>
<div class="title">Informações Técnicas</div>
<li class="text">Altura de Camada: 0.3mm</li>
<li class="text">Espessura mínima: 1mm</li>
<li class="text">Dimensões máximas de impressão: 260x200x250mm (CxLxA)</li>
<li class="text">Máximo Overhang para impressão sem suporte: 60°</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="flip">
<div class="card2">
<div class="face front">
<div class="showcase-unit">
<p> <a href="#" class="fliper-btn2"><span class="glyphicon glyphicon-info-sign"></span></a></p>
<div class="img-showcase">
<img class="img-showcase-item" src="http://genesis3d.com.br/wp-content/uploads/2017/02/Standard1-min.png">
</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:40%">
<div class="progress-title">Resistência</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="face back">
<div class="showcase-unit">
<p> <a href="#" class="fliper-btn2"><span class="glyphicon glyphicon-share-alt"></span></a></p>
<div class="text">
<ul class="square">
<div class="title">Aplicações</div>
<li class="text">Action figures que não possuam muitos detalhes.</li>
<li class="text">Utensílios decorativos, gadgets, cases, pequenos suportes.</li>
<li class="text">Maquetes, modelos funcionais, peças de reposição para modelismo.</li>
<li class="text">Protótipos finais.</li>
<div class="title">Informações Técnicas</div>
<li class="text">Altura de Camada: 0.2mm</li>
<li class="text">Espessura mínima: 1mm</li>
<li class="text">Dimensões máximas de impressão: 260x200x250mm (CxLxA)</li>
<li class="text">Máximo Overhang para impressão sem suporte: 45°</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="flip">
<div class="card3">
<div class="face front">
<div class="showcase-unit">
<p> <a href="#" class="fliper-btn3"><span class="glyphicon glyphicon-info-sign"></span></a></p>
<div class="img-showcase">
<img class="img-showcase-item" src="http://genesis3d.com.br/wp-content/uploads/2017/02/Alta_resolucao_alternativo1-min.png">
</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="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:70%">
<div class="progress-title">Resistência</div>
</div>
</div>
<div class="btn-block-showcase">
<a href="http://genesis3d.com.br/produto/servico-impressao-3d-alta-resolucao/" class="btn btn-primary btn-info btn-showcase"><span class="glyphicon glyphicon-shopping-cart"></span> Orçamento</a>
</div>
</div>
</div>
<div class="face back">
<div class="showcase-unit">
<p> <a href="#" class="fliper-btn3"><span class="glyphicon glyphicon-share-alt"></span></a></p>
<div class="text">
<ul class="square">
<div class="title">Aplicações</div>
<li class="text">Utensílios decorativos, artísticos e action figures que contenham grande nível de detalhes.</li>
<li class="text">Gadgets, cases, pequenos suportes que necessitem de precisão.</li>
<li class="text">Produtos finais e para revenda.</li>
<div class="title">Informações Técnicas</div>
<li class="text">Altura de Camada: 0.1mm</li>
<li class="text">Espessura mínima: 1mm</li>
<li class="text">Dimensões máximas de impressão: 260x200x250mm (CxLxA)</li>
<li class="text">Máximo Overhang para impressão sem suporte: 40°</li>
</ul>
</div>
</div>
</div>
</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: 75%;
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;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 35px;
max-width: 220px;
-webkit-transition-duration: 700ms;
-moz-transition-duration: 700ms;
-o-transition-duration: 700ms;
transition-duration: 700ms;
}
.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;
}
.flip {
-webkit-perspective: 800;
perspective: 800;
position: absolute;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
width: 100%;
z-index: 1;
}
.flip .card .back {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
}
.flip .card2.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card2 {
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card2 .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}
.flip .card2 .front {
position: absolute;
width: 100%;
z-index: 1;
}
.flip .card2 .back {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.inner{margin:0px !important;}
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
}
.flip .card3.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card3 {
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card3 .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}
.flip .card3 .front {
position: absolute;
width: 100%;
z-index: 1;
}
.flip .card3 .back {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.inner{margin:0px !important;}
.fliper-btn {
float:right;
color: #E46305;
}
.fliper-btn2 {
float:right;
color: #E46305;
}
.fliper-btn3 {
float:right;
color: #E46305;
}
.title{
font-weight: bold;
font-family: 'Electrolize', sans-serif;
}
.text{
font-size:80%;
font-weight: bold;
font-family: 'Electrolize', sans-serif;
text-align: left;
justify-content: center;
margin: 0;
padding-left: 0;
}
.square{
list-style-type: square;
}
$('.fliper-btn').click(function(){
$('.flip').find('.card').toggleClass('flipped');
});
$('.fliper-btn2').click(function(){
$('.flip').find('.card2').toggleClass('flipped');
});
$('.fliper-btn3').click(function(){
$('.flip').find('.card3').toggleClass('flipped');
});
