استایل زیبا برای جداول قیمت - 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>