"AO Widget"
Bootstrap 3.2.0 Snippet by kimguanzon

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<section id="labels">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="ao">
<div class="ao-date">
<span class="changeby"><span class="glyphicon glyphicon-calendar"></span> Change by:</span>
AUG 30
</div>
<div class="ao-volume">
VOLUME: 20
</div>
</div>
</div>
</div>
</div>
</section>
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
section {
padding: 5%;
}
/*ignore anything above this line*/
.ao {
position: relative;
}
.ao .ao-date {
min-height: 80px;
position: relative;
font-size: 40px;
line-height: 40px;
text-align: center;
font-weight: bold;
background: #78bde7;
padding: 20px 15px 20px;
color: rgba(255,255,255,0.9);
text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
}
.ao .ao-date span.changeby {
display: block;
font-size: 16px;
}
.ao .ao-date:after {
content: " ";
border-right: 20px solid transparent;
border-left: 20px solid transparent;
position: absolute;
bottom: -20px;
left: 20%;
border-top: 20px solid #78bde7;
}
.ao .ao-volume {
padding: 20px;
font-size: 24px;
font-weight: bold;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Fresh Bootstrap Table
Collapsible Chat Widget
Chat Widget
User Profile Widget

Questions / Comments: