استایل زیبا برای جداول قیمت - pricing-tables ( نمونه 10)

<section class="pricing-section">

<div class="pricing pricing--yonten">

<div class="pricing__item">

<div class="icon icon--bicycle"></div>

<h3 class="pricing__title">Beginner</h3>

<div class="pricing__price"><span class="pricing__currency">$</span>9<span class="pricing__period">/ month</span></div>

<ul class="pricing__feature-list">

<li class="pricing__feature">1 GB of space</li>

<li class="pricing__feature">Unlimited traffic</li>

<li class="pricing__feature">Forum access</li>

<li class="pricing__feature">Support at $25/hour</li>

</ul>

<button class="pricing__action">Choose plan</button>

</div>

<div class="pricing__item">

<div class="icon icon--bus"></div>

<h3 class="pricing__title">Advanced</h3>

<div class="pricing__price"><span class="pricing__currency">$</span>259<span class="pricing__period">/ year</span></div>

<ul class="pricing__feature-list">

<li class="pricing__feature">5 GB of space</li>

<li class="pricing__feature">Unlimited traffic</li>

<li class="pricing__feature">Forum access</li>

<li class="pricing__feature">Support at $5/hour</li>

</ul>

<button class="pricing__action">Choose plan</button>

</div>

<div class="pricing__item">

<div class="icon icon--train"></div>

<h3 class="pricing__title">Professional</h3>

<div class="pricing__price"><span class="pricing__currency">$</span>699<span class="pricing__period">/ year</span></div>

<ul class="pricing__feature-list">

<li class="pricing__feature">20 GB of space</li>

<li class="pricing__feature">Unlimited traffic</li>

<li class="pricing__feature">Forum access</li>

<li class="pricing__feature">Free support</li>

</ul>

<button class="pricing__action">Choose plan</button>

</div>

</div>

</section>