Cara Membuat Pricing Section Card/kotak Harga dengan Gaya Mewah dan Menarik

Hi Web Developers! kali ini guru design akan berbagi tutorial cara membuat Pricing Section Card/kotak Harga dengan gaya mewah dan menarik yang simpel enak dipandang gak ngebosenin pastinya.

Oh iya buat kamu yang ingin tahu cara membuat halaman profile card klik disini ya

Yuk kita mulai tutorial-nya ikutin sampai habis ya😃

pertama-tama siapkan komputer kamu atau smartphone kamu dan jangan lupa satu gelas air kopi yang masih hangat untuk menemani mu ngoding nantinya.

 

jika bahan bahan sudah siap semua kita lanjut ketutorialnya ya:

Silahkan buka lembar kerja kamu tambahkan kode berikut di lembar keja kamu.

HTML

Silahkan tambahkan kode HTML berikut ini: 

untuk isi kontennya bisa kamu sesuaikan sendiri ya

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

 

CSS

Silahkan tambahkan kode css berikut ini:

untuk warna bisa kalian sesuaikan sendiri ya

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

Tutorialnya sudah selesai, nanti di sambung kembali dengan tutorial lain yang menarik pastinya. Pantau terus blog ini ya atau follow blog ini supaya saat mimin buat artikel baru kamu mendapatkan notifikasinya.

Result

Sekian terimakasih, semoga bermanfaat