Basic
Diskon 20%
Rp 80.000
- Documentation
- Premium Template
- 1 License
- Full Optimization
- 1 Month Full Support
- Easy Customize
- -
Personal
Best Value
Rp 210.000
- Documentation
- Premium Template
- 3 License
- Full Optimization
- 3 Month Full Support
- Easy Customize
- -
Developer
For Business
Rp 1.000.000
- Documentation
- Premium Template
- Unlimited License
- Full Optimization
- 6 Month Full Support
- Easy Customize
- 1 Bonus Template
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>
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>
0 Comments:
Posting Komentar