material design widget pricing table

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat material design widget pricing table untuk harga jasa atau produk.

widget pricing table seperti ini biasanya dapat kita jumpai di situs yang menyediakan jasa / menjual produk seperti landing page yang berfungsi untuk menampilkan nama produk , harga , deskripsi dan tombol buy now / beli sekarang.

dengan menggunakan widget ini cukup memengaruhi keputusan pelanggan dalam membeli produk atau jasa yang di tawarkan. tentu cara ini akan menguntungkan anda sebagai pemilik bisnis karena dapat memperbesar peluang konversi pengunjung yang datang ke situs kalian.

widget ini bisa kalian letakkan di mana saja mau itu di halaman hompage atau di halaman artikel atau halaman statis, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Widget Pricing Table

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

.wendy-pricing{position:relative;padding:50px 0;text-align:center}
.wendy-pricing .container-pricing{display:grid;grid-template-columns:32% 32% 32%;grid-gap:30px;margin:30px auto 0}
.wendysec-pricing{padding:30px;margin:0 0 20px;position:relative;box-shadow:0 3px 20px 0 rgba(0,0,0,0.15);border-radius:5px;background:#fff;transition:all .2s ease-in-out;border-top:4px solid #fff}
.wendysec-pricing:hover{transform:translateY(-10px);box-shadow:0 3px 20px 0 rgba(0,0,0,0.25);border-color: #ffa200}
.wendysec-pricing .harga{font-size:50px;margin:15px 0;background:linear-gradient(to right, #ffa200,#f0b651);color:#fff;width:100px;height:100px;line-height:2;border-radius:100%}
.wendysec-pricing{box-shadow:none;border:1px solid #ddd}
.wendysec-pricing h3{color:#111;font-size:20px;font-weight:700}
.wendysec-pricing p{font-size:15px;color:#555}
.wendysec-pricing .harga{font-size:25px;font-weight:700;line-height:4;display:inline-block}
.wendy-pricing a.wendybutton{box-shadow:none;background:linear-gradient(to right, #ffa200,#f0b651)}
.wendybutton{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe;background-color:#f09800;border-radius:3px;font-size:18px;line-height:22px;text-decoration:none}
a.wendybutton:hover{transform:scale(1.1)}
.wendysec-pricing.aktif,.wendysec-pricing:hover{box-shadow:0 3px 20px 0 rgba(0,0,0,0.15);border-color:#ddd;border-top:4px solid  #ffa200}
@media screen and (max-width:680px){.wendy-pricing .container-pricing{grid-template-columns:100%;display:block;margin:20px auto}}

catatan:
jika ingin mengubah warnanya silakan ubah kode warna yang telah saya tandai di atas

selanjtunya tambahkan html di bawah ini untuk menampilkan widget pricing tablenya, bisa di letkkan di tempat yang kalian inginkan, misalnya saja di tata letak atau di atas footer atau di halaman artikel dan statis.

<div class='wendy-pricing'>
<div class='container-pricing'>
<div class='wendysec-pricing'>
<h3>Consultation</h3>
<span class='harga'>20K</span>
<p>Graphic Design</p
><p>Web Design</p>
<p>Support</p>
<p>-</p>
<p>-</p>
<a class='wendybutton' href'=#' title='Buy Now'>Buy Now</a>
</div>
  
<div class='wendysec-pricing aktif'>
<h3>Small Business</h3>
<span class='harga'>120K</span>
<p>Graphic Design</p
><p>Web Design</p>
<p>Full Support</p>
<p>Themes</p>
<p>-</p>
<a class='wendybutton' href='#' title='Buy Now'>Buy Now</a>
</div>
  
<div class='wendysec-pricing'>
<h3>Corporate</h3>
<span class='harga'>20K</span>
<p>Graphic Design</p
><p>Web Design</p>
<p>Support</p>
<p>Unlimited Domain</p>
<p>-</p>
<a class='wendybutton' href='#' title='Buy Now'>Buy Now</a>
</div>
</div>
</div>

catatan:
bagian yang saya tandai bisa di ubah sesuai kebutuhan, dan tanda # bisa di ganti dengan url target jadi ketika tombol buy di klik akan mengarah ke mana

ok jadi sekian cara membuat material design widget pricing table untuk harga jasa atau produk semoga bermanfaat.

Source code:
https://blanterlanding.blogspot.com