"Notif"
Bootstrap 3.3.0 Snippet by janine

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
<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 ---------->
<div class="col-md-1"></div>
<div class="col-md-8 padding-top-10">
<div class="notif-extended">
<div>
<p class="notify-count-green">You have 5 new messages</p>
</div>
<div class="notif-message">
<a href="#">
<span class="fa fa-clock-o fa-fw"></span>
<span class="notif-subject">
<span class="notif-subject-from">Jenika Macaso</span>
</span>
<span class="notif-subject-message padding-right-10">
subscribed to your newsletter.
<span class="label label-danger pull-right">25 MAR 2015</span>
</span>
</a>
</div>
</div>
</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
.notif-extended {
border: medium none !important;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.176) !important;
max-width: 300px !important;
min-width: 160px !important;
padding: 0;
top: 42px;
width: 235px !important;
}
.notify-arrow-green {
border-bottom-color: #68dff0 !important;
border-left-color: rgba(0, 0, 0, 0);
border-right-color: rgba(0, 0, 0, 0);
border-top-color: #68dff0 !important;
}
.notify-arrow {
border-style: solid;
border-width: 0 9px 9px;
height: 0;
left: 7px;
margin-top: 10px;
opacity: 1;
position: absolute;
top: -18px;
transition: all 0.25s ease 0s;
width: 0;
z-index: 10;
}
.notify-count-green {
background-color: #68dff0;
color: #ffffff;
padding: 5px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Coming Sssoon Page

Questions / Comments: