Price Table

Basic
$15/ month
Unlimited Storage
Unlimited Transactions
Unlimited Contacts
Unlimited Users
Choose
Premium
$99/ month
Unlimited Storage
Unlimited Transactions
Unlimited Contacts
Unlimited Users
Try it for a month!
Choose
Plus
$29/ month
Unlimited Storage
Unlimited Transactions
Unlimited Contacts
Unlimited Users
Choose

Price table Custom HTML is based on the following structure:

<div class="gk-price-table col3">
<dl>
<dt>Basic</dt>
<dd class="gk-price">$15<small>/ month</small></dd>
<dd>Unlimited Storage</dd>
<dd>Unlimited Transactions</dd>
<dd>Unlimited Contacts</dd>
<dd>Unlimited Users</dd>
<dd><a href="#">Choose</a></dd>
</dl>

<dl class="gk-premium">
<dt>Premium</dt>
<dd class="gk-price">$99<small>/ month</small></dd>
<dd>Unlimited Storage</dd>
<dd>Unlimited Transactions</dd>
<dd>Unlimited Contacts</dd>
<dd>Unlimited Users</dd>
<dd>Try it for a month!</dd>
<dd><a href="#">Choose</a></dd>
</dl>

<dl>
<dt>Plus</dt>
<dd class="gk-price">$29<small>/ month</small></dd>
<dd>Unlimited Storage</dd>
<dd>Unlimited Transactions</dd>
<dd>Unlimited Contacts</dd>
<dd>Unlimited Users</dd>
<dd><a href="#">Choose</a></dd>
</dl>
</div>

The main wrapper contains two clases: the gk-price-table class is required as a base of the CSS styling and the second class is used to specify the amount of columns – you can use classes col1col5.

Every column is specified by dl element (with gk-premium class the column will be highlighted) – in the dt element you can specify the table column title. In the dd element with gk-price class you can specify the price – using the small element you can specify te service period time.

Adding of the button at the bottom is very simple – it needs just to add the link element in the dd element.

There are no comments

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Start typing and press Enter to search

Shopping Cart