"Showcase"
Bootstrap 3.3.0 Snippet by ViniciusDAlves

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Angular

Questions / Comments: