HTML
khá đẹp Trong bài viết này mình sẽ hướng dẫn cách để mọi người thêm một bảng giá để rao bán sản phẩm của mình như nhiều trang website khác trên thị trường internet hiện này.
Chúng ta bắt đầu nhé.
Bước 1. Phần HTML
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <i class="fa fa-adjust"></i> <div class="price-value"> 500.000 ₫<span class="month">Một năm</span> </div> </div> <h4 class="heading">Gói 1 năm</h4> <div class="pricing-content"> <ul> <li>Chọn lớp bất kỳ</li> <li>Sách kỹ thuật ghi nhớ bản online</li> <li>Videos kỹ thuật ghi nhớ</li> <li>Videos bài giảng sách giáo khoa của 1 lớp</li> <li>Sơ đồ tư duy sách giáo khoa</li> </ul> </div> <div class="pricingTable-signup"> <a href="javascript:;">Mua khóa học</a> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="pricingTable green"> <div class="pricingTable-header"> <i class="fa fa-briefcase"></i> <div class="price-value"> 1.468.000 ₫<span class="month">Một cấp</span> </div> </div> <h4 class="heading">Gói 1 cấp</h4> <div class="pricing-content"> <ul> <li>Chọn cấp bất kỳ</li> <li>Sách kỹ thuật ghi nhớ bản online</li> <li>Videos kỹ thuật ghi nhớ</li> <li>Videos bài giảng sách giáo khoa của 1 cấp</li> <li>Sơ đồ tư duy sách giáo khoa</li> </ul> </div> <div class="pricingTable-signup"> <a href="javascript:;">Mua khóa học</a> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="pricingTable red"> <div class="pricingTable-header"> <i class="fa fa-cube"></i> <div class="price-value"> 2.368.000 ₫<span class="month">Trọn đời</span> </div> </div> <h4 class="heading">Gói trọn đời</h4> <div class="pricing-content"> <ul> <li>Học từ lớp 1 - 12</li> <li>Sách kỹ thuật ghi nhớ bản giấy</li> <li>Videos kỹ thuật ghi nhớ</li> <li>Videos bài giảng sách giáo khoa của 12 năm</li> <li>Sơ đồ tư duy sách giáo khoa</li> </ul> </div> <div class="pricingTable-signup"> <a href="javascript:;">Mua khóa học</a> </div> </div> </div> </div> </div> </div>
Bước 2. Phần CSS
*, ::after, ::before { box-sizing: border-box; } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { width: 100%; padding-right: 1rem; padding-left: 1rem; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container, .container-sm { max-width: 540px; } } @media (min-width: 768px) { .container, .container-md, .container-sm { max-width: 720px; } } @media (min-width: 992px) { .container, .container-lg, .container-md, .container-sm { max-width: 960px; } } @media (min-width: 1200px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1140px; } } @media (min-width: 1400px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1320px; } } .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex: 1 0 100%; flex-wrap: wrap; margin-top: calc(var(--bs-gutter-y) * -1); margin-right: calc(var(--bs-gutter-x) / -2); margin-left: calc(var(--bs-gutter-x) / -2); } .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) / 2); padding-left: calc(var(--bs-gutter-x) / 2); margin-top: var(--bs-gutter-y); } .col { flex: 1 0 0%; } .row-cols-auto > * { flex: 0 0 auto; width: auto; } .row-cols-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-3 > * { flex: 0 0 auto; width: 33.333333%; } .row-cols-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-6 > * { flex: 0 0 auto; width: 16.666667%; } .col-auto { flex: 0 0 auto; width: auto; } .col-1 { flex: 0 0 auto; width: 8.333333%; } .col-2 { flex: 0 0 auto; width: 16.666667%; } .col-3 { flex: 0 0 auto; width: 25%; } .col-4 { flex: 0 0 auto; width: 33.333333%; } .col-5 { flex: 0 0 auto; width: 41.666667%; } .col-6 { flex: 0 0 auto; width: 50%; } .col-7 { flex: 0 0 auto; width: 58.333333%; } .col-8 { flex: 0 0 auto; width: 66.666667%; } .col-9 { flex: 0 0 auto; width: 75%; } .col-10 { flex: 0 0 auto; width: 83.333333%; } .col-11 { flex: 0 0 auto; width: 91.666667%; } .col-12 { flex: 0 0 auto; width: 100%; } @media (min-width: 576px) { .col-sm { flex: 1 0 0%; } .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; } .row-cols-sm-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.333333%; } .row-cols-sm-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-sm-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-sm-6 > * { flex: 0 0 auto; width: 16.666667%; } .col-sm-auto { flex: 0 0 auto; width: auto; } .col-sm-1 { flex: 0 0 auto; width: 8.333333%; } .col-sm-2 { flex: 0 0 auto; width: 16.666667%; } .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.333333%; } .col-sm-5 { flex: 0 0 auto; width: 41.666667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-sm-7 { flex: 0 0 auto; width: 58.333333%; } .col-sm-8 { flex: 0 0 auto; width: 66.666667%; } .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.333333%; } .col-sm-11 { flex: 0 0 auto; width: 91.666667%; } .col-sm-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 768px) { .col-md { flex: 1 0 0%; } .row-cols-md-auto > * { flex: 0 0 auto; width: auto; } .row-cols-md-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-md-3 > * { flex: 0 0 auto; width: 33.333333%; } .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-md-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-md-6 > * { flex: 0 0 auto; width: 16.666667%; } .col-md-auto { flex: 0 0 auto; width: auto; } .col-md-1 { flex: 0 0 auto; width: 8.333333%; } .col-md-2 { flex: 0 0 auto; width: 16.666667%; } .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.333333%; } .col-md-5 { flex: 0 0 auto; width: 41.666667%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.333333%; } .col-md-8 { flex: 0 0 auto; width: 66.666667%; } .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.333333%; } .col-md-11 { flex: 0 0 auto; width: 91.666667%; } .col-md-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 992px) { .col-lg { flex: 1 0 0%; } .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; } .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.333333%; } .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.666667%; } .col-lg-auto { flex: 0 0 auto; width: auto; } .col-lg-1 { flex: 0 0 auto; width: 8.333333%; } .col-lg-2 { flex: 0 0 auto; width: 16.666667%; } .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.333333%; } .col-lg-5 { flex: 0 0 auto; width: 41.666667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.666667%; } .col-lg-9 { flex: 0 0 auto; width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.333333%; } .col-lg-11 { flex: 0 0 auto; width: 91.666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 1200px) { .col-xl { flex: 1 0 0%; } .row-cols-xl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-xl-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-xl-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-xl-3 > * { flex: 0 0 auto; width: 33.333333%; } .row-cols-xl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-xl-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-xl-6 > * { flex: 0 0 auto; width: 16.666667%; } .col-xl-auto { flex: 0 0 auto; width: auto; } .col-xl-1 { flex: 0 0 auto; width: 8.333333%; } .col-xl-2 { flex: 0 0 auto; width: 16.666667%; } .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.333333%; } .col-xl-5 { flex: 0 0 auto; width: 41.666667%; } .col-xl-6 { flex: 0 0 auto; width: 50%; } .col-xl-7 { flex: 0 0 auto; width: 58.333333%; } .col-xl-8 { flex: 0 0 auto; width: 66.666667%; } .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.333333%; } .col-xl-11 { flex: 0 0 auto; width: 91.666667%; } .col-xl-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 1400px) { .col-xxl { flex: 1 0 0%; } .row-cols-xxl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-xxl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-xxl-6 > * { flex: 0 0 auto; width: 16.666667%; } .col-xxl-4 { flex: 0 0 auto; width: 33.333333%; } .col-xxl-6 { flex: 0 0 auto; width: 50%; } } /*Edit*/ .pricingTable { text-align: center; background: #fff; margin: 0 -15px; box-shadow: 0 0 10px #ababab; padding-bottom: 40px; border-radius: 10px; color: #cad0de; transform: scale(1); transition: all .5s ease 0s } .pricingTable:hover { transform: scale(1.05); z-index: 1 } .pricingTable .pricingTable-header { padding: 40px 0; background: #f5f6f9; border-radius: 10px 10px 50% 50%; transition: all .5s ease 0s } .pricingTable:hover .pricingTable-header { background: #ff9624 } .pricingTable .pricingTable-header i { font-size: 50px; color: #858c9a; margin-bottom: 10px; transition: all .5s ease 0s } .pricingTable .price-value { font-size: 20px; color: #ff9624; transition: all .5s ease 0s; font-weight: 100 } .pricingTable .month { display: block; font-size: 14px; color: #cad0de } .pricingTable:hover .month, .pricingTable:hover .price-value, .pricingTable:hover .pricingTable-header i { color: #fff } .pricingTable .heading { font-size: 24px; color: #ff9624; margin-bottom: 20px; text-transform: uppercase; font-weight: 800 } .pricingTable .pricing-content ul { list-style: none; padding: 0px 10px 0px 10px; margin-bottom: 30px; font-size: 14px; } .pricingTable .pricing-content ul li { line-height: 30px; color: #a7a8aa } .pricingTable .pricingTable-signup a { display: inline-block; font-size: 14px; color: #fff; padding: 5px 35px; border-radius: 20px; background: #ffa442; text-transform: uppercase; transition: all .3s ease 0s; font-weight: 700; } .pricingTable .pricingTable-signup a:hover { box-shadow: 0 0 10px #ffa442 } .pricingTable.blue .heading, .pricingTable.blue .price-value { color: #4b64ff } .pricingTable.blue .pricingTable-signup a, .pricingTable.blue:hover .pricingTable-header { background: #4b64ff } .pricingTable.blue .pricingTable-signup a:hover { box-shadow: 0 0 10px #4b64ff } .pricingTable.red .heading, .pricingTable.red .price-value { color: #ff4b4b } .pricingTable.red .pricingTable-signup a, .pricingTable.red:hover .pricingTable-header { background: #ff4b4b } .pricingTable.red .pricingTable-signup a:hover { box-shadow: 0 0 10px #ff4b4b } .pricingTable.green .heading, .pricingTable.green .price-value { color: #40c952 } .pricingTable.green .pricingTable-signup a, .pricingTable.green:hover .pricingTable-header { background: #40c952 } .pricingTable.green .pricingTable-signup a:hover { box-shadow: 0 0 10px #40c952 } .pricingTable.blue:hover .price-value, .pricingTable.green:hover .price-value, .pricingTable.red:hover .price-value { color: #fff } @media screen and (max-width:990px) { .pricingTable { margin: 0 0 20px } }
Như vậy là chúng ta đã hoàn thành việc thêm bảng giá tuyệt đẹp này vào trang website của các bạn rồi đấy.
DEMO BẢNG GIÁ
500.000 ₫Một năm
Gói 1 năm
- Chọn lớp bất kỳ
- Sách kỹ thuật ghi nhớ bản online
- Videos kỹ thuật ghi nhớ
- Videos hướng dẫn và tùy biến chương trình
- Sơ đồ chương trình đã chọn
1.468.000 ₫3 Năm
Gói 1 cấp
- Chọn cấp bất kỳ
- Sách kỹ thuật ghi nhớ bản online
- Videos kỹ thuật ghi nhớ
- Videos hướng dẫn và tùy biến chương trình
- Sơ đồ chương trình đã chon
5.000.000 ₫Trọn đời
Gói trọn đời
- Tất cả chương trình (all in one)
- Sách kỹ thuật ghi nhớ bản giấy
- Videos kỹ thuật ghi nhớ
- Videos hướng dẫn và tùy biến chương trình
- Sơ đồ chương trình