<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 ---------->
<section id="labels">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at felis pulvinar, iaculis purus vitae, pharetra lorem. Ut pretium sagittis urna, nec condimentum erat pellentesque id. Vivamus sed congue dui. Duis posuere placerat vehicula. Curabitur tempus, purus ut luctus dignissim, purus elit mollis ex, nec pharetra justo ligula eu justo. Aliquam quis dolor felis. Ut vitae facilisis metus, sed egestas sem. Donec eu orci convallis, lacinia felis quis, condimentum quam. In hac habitasse platea dictumst. In lacus massa, convallis et imperdiet ut, placerat id justo. Phasellus non nisl maximus, imperdiet elit nec, hendrerit lorem. Etiam mollis, mauris ut faucibus consequat, nisl ligula posuere ipsum, at sagittis ante urna sit amet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam fringilla elit neque, sed placerat lectus posuere sed.</p>
<a data-toggle="collapse" href="#code-1" class="open-code">Get a code</a>
<div id="code-1" class="collapse code">
<p>Aenean nibh lectus, interdum sit amet pellentesque vel, luctus vel tellus. Vestibulum non urna interdum, pretium magna et, tincidunt orci. Vivamus dignissim augue quis convallis pellentesque. Morbi auctor sapien et fermentum rhoncus. Fusce porta venenatis nunc at aliquam. Mauris varius semper neque et varius. Nunc ac posuere nunc, et efficitur arcu..</p>
<p>Aliquam eget diam vitae mauris tempus tincidunt. Sed sagittis ultrices nisl sit amet tincidunt. Mauris et semper leo, eu scelerisque elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a tincidunt enim. Sed vel dolor ut ex blandit venenatis. Etiam quis facilisis metus, a luctus elit. Suspendisse vestibulum augue non accumsan scelerisque. Aliquam eu accumsan lacus, ut tincidunt risus. Cras volutpat faucibus felis, ac tristique felis dapibus Ca</p>.
<p>Maecenas facilisis aliquam turpis vitae ornare. Etiam cursus suscipit convallis. Praesent sed turpis et sem finibus varius vitae posuere leo. Curabitur ligula diam, hendrerit nec tellus at, imperdiet dignissim lectus. Aliquam vel aliquam elit. Quisque nec mi a lacus iaculis mollis in at lorem. Ut blandit, orci nec pretium eleifend, tellus orci cursus dolor, ac vulputate augue quam vitae erat. Nunc eget tellus vel libero gravida ultricies ut ac arcu.</p>
<p>Mauris fermentum risus elit, nec placerat leo consectetur eget. Aenean dui arcu, sodales at pharetra id, gravida tincidunt nisi. Vestibulum imperdiet, metus eget consectetur lacinia, arcu nisi hendrerit est, vel viverra mi sapien sed libero. Nulla quis tempor libero. Vivamus id nibh arcu. Aliquam a fringilla ante. Suspendisse ullamcorper nibh eget pulvinar dictum. Cras viverra felis et imperdiet semper. Suspendisse nec ex feugiat, rhoncus arcu in, gravida diam</p>
</div>
</div>
</div>
</div>
</section>
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;
position: absolute;
left: 50%;
top: 20px;
margin-left: -10px;
}
.dl .brand {
text-transform: uppercase;
letter-spacing: 3px;
padding: 10px 15px;
margin-top: 10px;
text-align: center;
min-height: 100px;
}
.dl .discount {
min-height: 50px;
position: relative;
font-size: 80px;
line-height: 80px;
text-align: center;
font-weight: bold;
padding: 20px 15px 0;
color: #f1c40f;
}
.dl .discount:after {
content: " ";
border-right: 20px solid transparent;
border-left: 20px solid transparent;
position: absolute;
bottom: -20px;
left: 20%;
}
.dl .discount.alizarin:after {
border-top: 20px solid #e74c3c;
}
.dl .discount.peter-river:after {
border-top: 20px solid #3498db;
}
.dl .discount.emerald:after {
border-top: 20px solid #2ecc71;
}
.dl .discount.amethyst:after {
border-top: 20px solid #9b59b6;
}
.dl .discount .type {
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
margin-top: -30px;
}
.dl .descr {
color: #999;
margin-top: 10px;
padding: 20px 15px;
}
.dl .ends {
padding: 0 15px;
color: #f1c40f;
margin-bottom: 10px;
}
.dl .coupon {
min-height: 50px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
font-size: 18px;
padding: 20px 15px;
}
.dl .coupon a.open-code {
color: #16a085;
}
.dl .coupon .code {
letter-spacing: 1px;
border-radius: 4px;
margin-top: 10px;
padding: 10px 15px;
color: #f1c40f;
background: #f0f0f0;
}
