<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-4">
<div class="dl">
<div class="brand">
<h2>
DVD COURSE
</h2>
</div>
<div class="discount emerald">
200.000đ
<div class="type">
DVD
</div>
</div>
<div class="descr">
<strong>
Sản phẩm chỉ có đĩa DVD
</strong> không kèm sách.
Trong đó có hơn 120 chủ đề nằm trong 5 VOLUME chính & VIP Program. DVD bao gồm các file bài học audio, video, ebook. Bạn có thể xem và sử dụng các bài học hầu hết trên các loại máy tính và thiết bị di động.
<br/>
</div>
<div class="ends">
<small>
Hướng dẫn sử dụng tiếng Việt, mp3 và ebook (new 2014) tối ưu 100% trên các thiết bị di động, yêu cầu người học có thị lực tốt và trình độ tiếng Anh khá... </small>
</div>
<div class="coupon midnight-blue">
<a data-toggle="collapse" href="#code-2" class="open-code">Tìm hiểu thêm</a>
<div id="code-2" class="collapse code">
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="dl">
<div class="brand">
<h2>
Master Course
</h2>
</div>
<div class="discount alizarin">
590.000đ
<div class="type">
DVD + BOOK
</div>
</div>
<div class="descr">
<strong>
Bộ sản phẩm DVD có kèm Sách Giáo Khoa
</strong> giúp bạn học dễ dàng hơn,
với hơn 120 chủ đề bài học đầy đủ trong 5 VOLUME chính là Original, Flow, Business, Power, Real English được in sẵn trong sách (<strong>Master Course</strong> đã bao gồm <strong>DVD Course</strong> và <strong>Student Course</strong>).
</div>
<div class="ends">
<small>
3 sách in bìa màu, hướng dẫn tiếng việt, sử dụng tốt trên smartphone & tablet, tặng phần mềm hỗ trợ, thời gian học 1-2 năm... <a href="http://www.effortlessenglishclub.edu.vn/shop.html">tìm hiểu thêm</a>
</small>
</div>
<div class="coupon midnight-blue">
<a data-toggle="collapse" href="#code-1" class="open-code">Tìm hiểu thêm</a>
<div id="code-1" class="collapse code">
LV5MAY14
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="dl">
<div class="brand">
<h2>
Student Course
</h2>
</div>
<div class="discount peter-river">
370.000đ
<div class="type">
DVD + BOOK
</div>
</div>
<div class="descr">
<strong>
Bộ sản phẩm DVD có kèm Sách Giáo Khoa
</strong>
với 40 chủ đề quan trọng nhất được chọn lọc từ <strong>Master Course</strong>, nội dung bài học là những câu chuyện thú vị, mang nhiều cảm xúc, dễ ghi nhớ nhất. <strong>Student Course</strong> sẽ giúp bạn nói tiếng Anh dễ dàng chỉ trong 6 tháng.
</div>
<div class="ends">
<small>
1 sách in bìa màu, hướng dẫn tiếng việt, sử dụng trên smartphone & tablet, tặng phần mềm hỗ trợ, thời gian học 6-8 tháng... <a href="http://www.effortlessenglishclub.edu.vn/shop.html">tìm hiểu thêm</a>
</small>
</div>
<div class="coupon midnight-blue">
<a data-toggle="collapse" href="#code-3" class="open-code">Tìm hiểu thêm</a>
<div id="code-3" class="collapse code">
OLV4SY3R
</div>
</div>
</div>
</div>
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: 60px;
line-height: 80px;
text-align: center;
font-weight: bold;
padding: 20px 15px 0;
color: #FFF;
}
.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: #444;
margin-top: 10px;
padding: 20px 15px;
text-align: justify;
}
.dl .ends {
padding: 0 15px;
color: #FF6C6C;
margin-bottom: 10px;
text-align: justify;
}
.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;
}
