Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Trang chủ
Blogspot
Code

Code tạo bảng giá đẹp, responsive cho Blogspot












Code tạo bảng giá đẹp, responsive cho Blogspot
Code tạo bảng giá đẹp, responsive cho Blogspot



Trong bài viết này mình sẽ hướng dẫn bạn cách để tạo bảng giá đẹp, có
thể responsive trên mọi thiết bị và kích thước màn hình.



Code này có thể sử dụng được cho Blogspot hoặc bất cứ đâu bạn muốn, miễn sao
là bạn có thể chỉnh sửa code.


Demo










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 bài giảng sách giáo khoa của 1 lớp

  • Sơ đồ tư duy sách giáo khoa












1.468.000 ₫Một cấp


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 bài giảng sách giáo khoa của 1 cấp

  • Sơ đồ tư duy sách giáo khoa












2.368.000 ₫Trọn đời


Gói trọn đời




  • Học từ lớp 1 - 12

  • Sách kỹ thuật ghi nhớ bản giấy

  • Videos kỹ thuật ghi nhớ

  • Videos bài giảng sách giáo khoa của 12 năm

  • Sơ đồ tư duy sách giáo khoa










Code


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>


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
  }



...


Nội dung tiếp theo đã bị ẩn bởi admin





Mọi người làm theo hướng dẫn sau để lấy mật khẩu mở nội dung bị ẩn nhé.


Bạn vào Google tìm từ khóa và tìm site rồi click giúp mình để lấy password nhé, pass ở cuối bài viết phần Countdown.







  .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
    }
  }



Thi triển thôi, chúc anh em thành công.

© ‧ Quốc Bình 2023. All rights reserved. Developed by Jago Desain