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.

Đơn giản là nó đã phức tạp như vậy rồi

3 nhận xét

  1. sao mình làm như bạn không được nhỉ
    1. Vì bạn làm chưa đúng thôi
    2. mình có thể liên hệ với bạn như nào
© ‧ Blogger Thức Nguyễn. All rights reserved.