widget kotak Harga

CSS - DIATAS /HEAD

<style type="text/css"> /* Pricing Section Card by Guru Design (www.gurudzgn.com) */ .pricing-section{font-family:'Google Sans',Arial,sans-serif;position:relative;overflow:hidden;display:block;margin:15px 0;line-height:1.7}
  .pricing-section .pricing-title{font-size:1.1rem;margin:1rem 0 0;font-weight:700}
  .pricing-container{display:flex;max-width:1000px;margin:0 auto} 
  .pricing-tag{margin:.5rem 0 1rem;font-size:13px;display:inline-block;background:#333;color:#fff;padding:3px 15px;border-radius:20px} a.pricing-order-btn{font-size:14px;text-transform:uppercase;text-decoration:none;background:#333;color:#fff;display:inline-block;padding:7px 20px;border-radius:20px;transition:all .3s ease-in-out} a.pricing-order-btn:hover{transform:scale(1.1)} 
  .pricing-column{background:#fff;padding:30px 15px;box-sizing:border-box;border-radius:10px;text-align:center;width:33%;margin:10px;box-shadow:0 7px 7px rgba(0,0,0,0.06);border:2px solid #fff;transition:all .3s ease-in-out} 
  pricing-column ul{list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2} 
  .pricing-column img{width:50px} 
  .pricing-section i{font-size:3rem}
  .pricing-price{font-weight:700;font-size:22px} 
  .service-info{opacity:.7}
  .pricing-2-column .pricing-column{width:50%}
  .pricing-column:nth-child(1) 
  .pricing-price,.pricing-column:nth-child(1) i{color:#f87200} 
  .pricing-column:nth-child(2) 
  .pricing-price,.pricing-column:nth-child(2) i{color:#ff5483} 
  .pricing-column:nth-child(3) 
  .pricing-price,.pricing-column:nth-child(3) i{color:#2b73f6} 
  .pricing-column:nth-child(1):hover{border-color:#f87200} 
  .pricing-column:nth-child(2):hover{border-color:#ff5483}
  .pricing-column:nth-child(3):hover{border-color:#2b73f6} 
  .pricing-column:nth-child(1) 
  .pricing-tag,.pricing-column:nth-child(1) 
  a.pricing-order-btn{background:#f87200}   
  .pricing-column:nth-child(2)
  .pricing-tag,.pricing-column:nth-child(2) 
  a.pricing-order-btn{background:#ff5483} 
  .pricing-column:nth-child(3)
  .pricing-tag,.pricing-column:nth-child(3) 
  a.pricing-order-btn{background:#2b73f6} 
  @media screen and (max-width:580px){ .pricing-column,.pricing-2-column .pricing-column{width:auto} 
    .pricing-container{display:block}} </style>

RUANG POSTING - HTML

<div class="pricing-section"> 
  <div class="pricing-container"> 
    <div class="pricing-column"> 
      <div class="pricing-title">Basic</div> 
      
      <div class="pricing-tag">Diskon 20%</div> 
      <div class="pricing-price">Rp 80.000</div> 
      <div class="service-info"> 
        <ul>
          <li>Documentation</li> 
          <li>Premium Template</li> 
          <li>1 License</li> 
          <li>Full Optimization</li> 
          <li>1 Month Full Support</li> 
          <li>Easy Customize</li> 
          <li>-</li> 
        </ul> 
      </div> <a class="pricing-order-btn" href="#" title="#" target="_blank">Order Now</a> 
    </div> 
    <div class="pricing-column">
      <div class="pricing-title">Personal</div> 
      <div class="pricing-tag">Best Value</div>
      <div class="pricing-price">Rp 210.000</div> 
      <div class="service-info"> 
        <ul> 
          <li>Documentation</li> 
          <li>Premium Template</li> 
          <li>3 License</li> 
          <li>Full Optimization</li> 
          <li>3 Month Full Support</li> 
          <li>Easy Customize</li> 
          <li>-</li> 
        </ul> 
      </div> 
      <a class="pricing-order-btn" href="#" title="#" target="_blank">Order Now</a> </div> 
    <div class="pricing-column"> 
      <div class="pricing-title">Developer</div> 
      <div class="pricing-tag">For Business</div> 
      <div class="pricing-price">Rp 1.000.000</div> 
      <div class="service-info"> 
        <ul> 
          <li>Documentation</li> 
          <li>Premium Template</li> 
          <li>Unlimited License</li> 
          <li>Full Optimization</li> 
          <li>6 Month Full Support</li> 
          <li>Easy Customize</li> 
          <li>1 Bonus Template</li>
        </ul>
      </div> 
      <a class="pricing-order-btn" href="#" title="#" target="_blank">Order Now</a> </div> 
  </div> 
</div>