To use the price table on your site grab the following example code below and add to your site. The price table is fully responsive and can display up to 7 price columns. Once you have determined the number of columns you will be using set the wrapper div to the number of columns that you've added. You can use the wrapping classes of "s5_pricetable_1" to "s5_pricetable_7".


<div class="s5_pricetable_3">

<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Basic</div>
<div class="s5_price_wrap">
<span class="dollarsign">$</span><span class="price">49</span><span class="month">/per month</span>
</div>
<div class="s5_options">
<div class="s5_option">
Unlimited Space &amp; Traffic
</div>
<div class="s5_option">
99.9% Server Uptime
</div>
<div class="s5_option">
24/7 Customer Care
</div>
<div class="s5_option">
30 Days Money Back
</div>
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a href="#" class="button s5_pricetable">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column recommended">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Standard</div>
<div class="s5_price_wrap">
<span class="dollarsign">$</span><span class="price">79</span><span class="month">/per month</span>
</div>
<div class="s5_options">
<div class="s5_option">
Unlimited Space &amp; Traffic
</div>
<div class="s5_option">
99.9% Server Uptime
</div>
<div class="s5_option">
24/7 Customer Care
</div>
<div class="s5_option">
30 Days Money Back
</div>
<div class="s5_option">
FREE Domain Name
</div>
<div class="s5_option">
Personal Concierge
</div>
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a href="#" class="button s5_pricetable">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Premium</div>
<div class="s5_price_wrap">
<span class="dollarsign">$</span><span class="price">99</span><span class="month">/per month</span>
</div>
<div class="s5_options">
<div class="s5_option">
Unlimited Space &amp; Traffic
</div>
<div class="s5_option">
99.9% Server Uptime
</div>
<div class="s5_option">
24/7 Customer Care
</div>
<div class="s5_option">
30 Days Money Back
</div>
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a href="#" class="button s5_pricetable">Choose</a></div>

</div>

<div style="clear:both;"></div>
</div>

<div class="pages_highlight_box">
<h3>Find Our Most Frequent Questions Below</h3>
<br />
Fusce ac eleifend erat, cursus pretium ante. Mauris euismod luctus libero ac rutrum. Morbi ullamcorper, mauris et dapibus accumsan, turpis massa ornare metus, eget commodo neque lacus sit amet erat. Vestibulum tempus, mi eget condimentum cursus, augue urna congue justo, a accumsan nunc erat eget leo. Proin sollicitudin tortor et nibh fringilla hendrerit. Praesent vel ante suscipit nisl hendrerit eleifend. Praesent a aliquet purus.
<br />
<p class="readmore"><a href="#" class="btn">Contact Us</a></p>
</div>
<br /><br />
<div class="faq_wrap">
<h3>Product Related Questions</h3>
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="radio" checked="">
<label for="ac-1">1. When will I receive my products?</label>
<article class="ac-small">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis gravida justo, a rhoncus sem volutpat in. Pellentesque lacinia lacinia ligula, eget tempor elit sagittis non. Vestibulum pellentesque lorem nec diam interdum pellentesque.</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio">
<label for="ac-2">2. Where are your products manufactured?</label>
<article class="ac-medium">
<p>Etiam tempus facilisis ultrices. Nam adipiscing nunc nec est dapibus, eget eleifend velit mattis. Curabitur facilisis a rhoncus sem volutpat in condimentum augue at viverra. Ut ut tortor feugiat, dignissim nulla non, venenatis leo.</p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="radio">
<label for="ac-3">3. Is there a warranty on your products?</label>
<article class="ac-large">
<p> Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, a rhoncus sem volutpat in eleifend ornare libero. Cras iaculis interdum dui. </p>
</article>
</div>
</section>
<br />
<h3>Customer Support Questions</h3>
<section class="ac-container2">
<div>
<input id="ac2-1" name="accordion2-1" type="radio" checked="">
<label for="ac2-1">1. Where is your company located?</label>
<article class="ac-small2">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis gravida justo, a rhoncus sem volutpat in. Pellentesque lacinia lacinia ligula, eget tempor elit sagittis non. Vestibulum pellentesque lorem nec diam interdum pellentesque.</p>
</article>
</div>
<div>
<input id="ac2-2" name="accordion2-1" type="radio">
<label for="ac2-2">2. What are your hours of operation?</label>
<article class="ac-medium2">
<p>Etiam tempus facilisis ultrices. Nam adipiscing nunc nec est dapibus, eget eleifend velit mattis. Curabitur facilisis a rhoncus sem volutpat in condimentum augue at viverra. Ut ut tortor feugiat, dignissim nulla non, venenatis leo.</p>
</article>
</div>
<div>
<input id="ac2-3" name="accordion2-1" type="radio">
<label for="ac2-3">3. How can I submit for a return?</label>
<article class="ac-large2">
<p> Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, a rhoncus sem volutpat in eleifend ornare libero. Cras iaculis interdum dui. </p>
</article>
</div>
</section>
</div>
<div style="clear:both;height:0px"></div>