Home
Blogger
Code

Share code widget Price Box

Mở đầu

Winta chào tất cả các bạn, hôm nay Winta sẽ chia sẽ cho các bạn một code widget hộp giá cả cực đẹp.Với tiện ích này các bạn sẽ bạn sẽ có thể bán các sản phẩm trên web của bạn với tư cách là một chủ doanh nghiệp.
Bạn có thể xem demo bên dưới bài viết này.

Hướng dẫn

Bước 1: Dán toàn bộ CSS bên dưới vào trước thẻ ]]></b:skin>. 

/*Price Box Winta*/
.tableWrap {
    position: relative;
    width: 350px;
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 3px 5px 30px 5px rgba(46, 56, 77, .1);
    margin: auto
}
.tableWrap .tab {
    height: 55px;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 30px;
    position: relative
}
.tab label {
    height: 100%;
    z-index: 2;
    width: 30%;
    display: flex;
    cursor: pointer;
    font-size: 15px;
    position: relative;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease
}
#tab-1:checked~.tab .tab-1, #tab-2:checked~.tab .tab-2, #tab-3:checked~.tab .tab-3 {
    color: #fefefe
}
.tab label:nth-child(2) {
    width: 40%
}
.tab .tabSlider {
    position: absolute;
    height: 85%;
    border-radius: inherit;
    background: #509600;
    opacity: .8;
    transition: all 0.3s ease
}
#tab-1:checked~.tab .tabSlider {
    left: 0%;
    width: 90px;
    transform: translateX(5%)
}
#tab-2:checked~.tab .tabSlider {
    left: 50%;
    width: 120px;
    transform: translateX(-50%)
}
#tab-3:checked~.tab .tabSlider {
    left: 100%;
    width: 95px;
    transform: translateX(-105%)
}
.tableWrap input[type='radio'] {
    display: none
}
.tableCard {
    overflow: hidden
}
.tableCard .tableCards {
    display: flex;
    width: 300%
}
.tableCards .tableS {
    width: 33.4%
}
.tableCards .tableRow-1 {
    transition: all 0.3s ease
}
#tab-1:checked~.tableCard .tableCards .tableRow-1 {
    margin-left: 0%
}
#tab-2:checked~.tableCard .tableCards .tableRow-1 {
    margin-left: -33.4%
}
#tab-3:checked~.tableCard .tableCards .tableRow-1 {
    margin-left: -66.8%
}
.tableS .tableDetail {
    margin: 20px 0;
    text-align: center;
    padding-bottom: 25px;
    border-bottom: 1px solid #e6e6e6
}
.tableDetail .tableHarga {
    font-size: 55px;
    font-weight: 600;
    position: relative
}
.tableDetail .tableHarga:before, .tableDetail .tableHarga:after {
    position: absolute;
    font-weight: 400
}
.tableDetail .tableHarga:before {
    left: -30px;
    top: 17px;
    font-size: 20px
}
.tableDetail .tableHarga:after {
    content: '$';
    right: -27px;
    bottom: 12px;
    font-size: 23px;
    font-weight: 600
}
.tableDetail p {
    font-size: 18px;
    margin-top: 5px
}
.tableS .tableContent li {
    display: flex;
    font-size: 15px;
    list-style: none;
    margin-bottom: 10px;
    align-items: center
}
.tableContent li svg {
    flex-shrink: 0;
    height: 20px;
    margin-right: 10px;
    margin-top: 4px;
    stroke: #509600;
    fill: none;
}
.tableContent li span {
    margin-left: 10px
}
.tableWrap .buttonx {
    width: 90%;
    border-radius: 25px;
    border: 1px #ccc solid;
    outline: none;
    height: 50px;
    font-size: 18px;
    color: #444;
    cursor: pointer;
    margin: 20px 25px 20px 10px;
    background: transparent;
    transition: transform 0.3s ease;
    align-items: center
}
.tableWrap .buttonx:hover {
    transform: scale(0.98);
    border: 1px #509600 solid;
    color: #509600;
    outline: none
}
/* CSS darkmode */
.darkMode .tableWrap {
    background-color: #1e1e1e;
    color: #fefefe
}
.darkMode .tableWrap .tab, .darkMode .tableS .tableDetail, .darkMode .tableWrap .buttonx {
    border-color: rgba(255, 255, 255, .1)
}
Bước 2: Chèn HTML dưới đây vào bài viết nào bạn muốn. 

<div class="tableWrap">
  <input id="tab-1" name="tabSlider" type="radio" /><input
    checked=""
    id="tab-2"
    name="tabSlider"
    type="radio"
  /><input id="tab-3" name="tabSlider" type="radio" />
  <div class="tab">
    <label for="tab-1" class="tab-1">Free</label
    ><label for="tab-2" class="tab-2">Personal</label
    ><label for="tab-3" class="tab-3">Developer</label>
    <div class="tabSlider"></div>
  </div>
  <div class="tableCard">
    <div class="tableCards">
      <div class="tableS tableRow-1">
        <div class="tableDetail">
          <span class="tableHarga">0</span>
          <p>Personal Use</p>
        </div>
        <ul class="tableContent">
          <li>
            <svg viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="15" y1="9" x2="9" y2="15"></line>
              <line x1="9" y1="9" x2="15" y2="15"></line></svg
            ><span>Lisensi</span>
          </li>
          <li>
            <svg viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="15" y1="9" x2="9" y2="15"></line>
              <line x1="9" y1="9" x2="15" y2="15"></line></svg
            ><span>Support</span>
          </li>
          <li>
            <svg viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="15" y1="9" x2="9" y2="15"></line>
              <line x1="9" y1="9" x2="15" y2="15"></line></svg
            ><span>Gratis Update Versi Te
            aru</span>
          </li>
          <li>
            <svg viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="15" y1="9" x2="9" y2="15"></line>
              <line x1="9" y1="9" x2="15" y2="15"></line></svg
            ><span>Hapus Cridit Link</span>
          </li>
        </ul>
        <button class="buttonx">Download</button>
      </div>
      <div class="tableS">
        <div class="tableDetail">
          <span class="tableHarga">5</span>
          <p>Enterprise</p>
        </div>
        <ul class="tableContent">
          <li>
            <svg viewbox="0 0 24 24">
              <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="23 3 12 14 9 11"></polyline></svg
            ><span>Max 3 Domain</span>
          </li>
          <li>
            <svg viewbox="0 0 24 24">
              <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="23 3 12 14 9 11"></polyline></svg
            ><span>Support 1 Bulan</span>
          </li>
          <li>
            <svg viewbox="0 0 24 24">
              <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="23 3 12 14 9 11"></polyline></svg
            ><span>Gratis Update Versi Tearu</span>
          </li>
          <li>
            <svg viewbox="0 0 24 24">
              <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="23 3 12 14 9 11"></polyline></svg
            ><span>Hapus Cridit Link</span>
          </li>
        </ul>
        <button class="buttonx">Buy Now</button>
      </div>
      <div class="tableS">
        <div class="tableDetail">
          <span class="tableHarga">10</span>
          <p>Pro</p>
        </div>
        <ul class="tableContent">
          <li>
            <svg viewbox="0 0 24 24">
              <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="23 3 12 14 9 11"></polyline></svg
            ><span>Unlimited Lisensi</span>
          </li>
          <li>
            <svg viewbox="0 0 24 24">
              <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="23 3 12 14 9 11"></polyline></svg
            ><span>Support 12 Bulan</span>
          </li>
          <li>
            <svg viewbox="0 0 24 24">
              <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="23 3 12 14 9 11"></polyline></svg
            ><span>Gratis Update Versi Terbaru</span>
          </li>
          <li>
            <svg viewbox="0 0 24 24">
              <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="23 3 12 14 9 11"></polyline></svg
            ><span>Hapus Cridit Link</span>
          </li>
        </ul>
        <button class="buttonx">Buy Now</button>
      </div>
    </div>
  </div>
</div>

Demo

0

Personal Use

  • Lisensi
  • Support
  • Gratis Update Versi Te aru
  • Hapus Cridit Link
5

Enterprise

  • Max 3 Domain
  • Support 1 Bulan
  • Gratis Update Versi Tearu
  • Hapus Cridit Link
10

Pro

  • Unlimited Lisensi
  • Support 12 Bulan
  • Gratis Update Versi Terbaru
  • Hapus Cridit Link

Do code sử dụng HTML với CSS nên không ảnh hưởng gì đến tốc độ load của trang nhé.

Lời kết

Chúc các bạn thành công và đừng quên để lại bình luận, đánh giá bên dưới nhé!

Related Posts
Rate this post

3 comments

  1. Hay lắm ad
    • Thank bro
  2. Shukriya.............


    winta
Leave a comment by topic of the article, and check in Notifications for Me to receive email notifications when your comment is responded to.
Put URL image or Code Snippet , và Quote , then click the button you want to analyze the syntax. Copy the results of the syntax analysis and paste it into the comment field.


image quote pre code

•