"Awesome discount label"
Bootstrap 3.1.0 Snippet by hardiksondagar

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="dl">
<div class="brand">
<h2>
mango
</h2>
</div>
<div class="discount alizarin">
30%
<div class="type">
off
</div>
</div>
<div class="descr">
<strong>
Mei mucius gloriatur reprimique mollis*.
</strong>
Ad sonet perfecto antiopam mei, denique molestie ne has.
</div>
<div class="ends">
<small>
* Conditions and restrictions apply.
</small>
</div>
<div class="coupon midnight-blue">
<a data-toggle="collapse" href="#code-1" class="open-code">Get a code</a>
<div id="code-1" class="collapse code">
LV5MAY14
</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
section {
padding: 5% 0;
}
.alizarin {
background: #e74c3c;
}
.amethyst {
background: #9b59b6;
}
.emerald {
background: #2ecc71;
}
.midnight-blue {
background: #2c3e50;
}
.peter-river {
background: #3498db;
}
.dl {
background: #f0f0f0;
padding: 30px 0;
border-radius: 20px;
position: relative;
}
.dl:before {
content: " ";
height: 20px;
width: 20px;
background: #ddd;
border-radius: 20px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Hipster As F*** Cards
Awesome Search Box
My Awesome Login Page
Awesome UI Kit

Questions / Comments: