Price Table

Basic
$15 /month
Unlimited Storage
Unlimited Transactions
Unlimited Contacts
Unlimited Users
Try it for a month!
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
Try it for a month!
Choose

Price table Custom HTML is based on the following structure:

<div class="gkPriceTable col3"> <dl> <dt>Basic</dt> <dd class="gkPrice">$15<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 class="gkPremium"> <dt>Premium</dt> <dd class="gkPrice">$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="gkPrice">$29<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> </div>

The main wrapper contains two clases: the gkPriceTable 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 gkPremium class the column will be highlighted) – in the dt element you can specify the table column title. In the dd element with gkPrice 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.

Deja una respuesta

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