BLOG ĐANG TRONG THỜI GIAN PHÁT TRIỂN, MONG SỰ QUAN TÂM CỦA MỌI NGƯỜI DÀNH CHO BLOG MỚI NÀY CỦA HUNG.PRO.VN
Home
BLOGGER
HTML

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

[BLOGGER] Code tạo bảng giá đẹp, responsive cho Blogspot
Xin chào mọi người, ngồi loay hoay ngó nghiêng những thứ mà mình đang tìm hiểu và tiếp thị một số thứ mình tìm thấy bài viết này khá hay về giao diện bảng giả 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

Post a Comment