Pls advise how this pricing table is designed

hi

anybody pls advise how this pricing table is designed

i dont know whether its a plugin or not

http://followgram.net/services/followers/

Code (markup):

thanks

 

They are using this theme: http://cyberchimps.com/responsive-theme/

But the pricing plan page doesn't seem to be part of that (or at least isn't included in the demo's or listed as something included - but they don't give lots of detail on that), so I'd guess at this point that it looks like they added it themselves.

 

Well, first it's not a table -- it is not tabular data with semantic relationships, so tables would be wrong.

That said, it's built with definition lists, which is also WRONG. Seriously wrong when you realize they are using DL with no DT. You look at this grabasstastic piece of inept filth:

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


<div class="container">
    <div id="pricing_plan1" class="four columns">
      <dl class="plans">
          <dd class="plan_title">100 Followers</dd>
          <dd class="plan_price">$2</dd>
      </dl>
      <dl class="plan" id="one">
        <dd class="plan_features"><div class="feature_desc">100% Satisfaction!</div></dd>        <dd class="plan_features"><div class="feature_desc">No account access required</div></dd>        <dd class="plan_features"><div class="feature_desc">No need to mass follow users</div></dd>        <dd class="plan_features"><div class="feature_desc">Fast delivery</div></dd>        <dd class="plan_buy"><a href="?buy=100&cash=2" class="buy" >BUY NOW</a></dd>
      </dl>
    </div>

    <div id="pricing_plan1" class="four columns">
      <dl class="plans">
          <dd class="plan_title">500 Followers</dd>
          <dd class="plan_price">$3.5</dd>
      </dl>
      <dl class="plan" id="one">
        <dd class="plan_features"><div class="feature_desc">100% Satisfaction!</div></dd>        <dd class="plan_features"><div class="feature_desc">No account access required</div></dd>        <dd class="plan_features"><div class="feature_desc">No need to mass follow users</div></dd>        <dd class="plan_features"><div class="feature_desc">Fast delivery</div></dd>        <dd class="plan_buy"><a href="?buy=500&cash=3.5" class="buy" >BUY NOW</a></dd>
      </dl>
    </div>

Code (markup):

With a clearing DIV like it's still 2001, abuse of definition tags on things that aren't definitions with no matching terms, endless pointless classes for **** knows what, and of course the use of presentational classes -- well, let's just say somebody needs to go back and learn some HTML. ...and that's without talking the craptastic code of the entire page with idiocy like static CSS inlined in the markup, HTML 5 bloat, that halfwit "let's wrap four HTML tags in IE CC's to show how inept we really are" thing Paul Irish came up with, and of course the absolute trash markup turdpress shoves down skinners throats.

What's there SHOULD be marked up something like this:

<div id="pricing">
	<h2>Followers</h2>

	<div class="priceData">
		<h3>100 Followers <span><span> - </span>$2</span></h3>
		<ul>
			<li>100% Satisfaction!</li>
			<li>No account access required</li>
			<li>No need to mass follow users</li>
			<li>Fast delivery</li>
		</ul>
		<a href="/">BUY NOW</a>
	<!-- .priceData --></div>
	
	<div class="priceData">
		<h3>500 Followers <span><span> - </span>$3.5</span></h3>
		<ul>
			<li>100% Satisfaction!</li>
			<li>No account access required</li>
			<li>No need to mass follow users</li>
			<li>Fast delivery</li>
		</ul>
		<a href="/">BUY NOW</a>
	<!-- .priceData --></div>
	
	<!-- etc, etc, etc... -->
	
<!-- #pricing --></div>

Code (markup):

set #pricing to float wrapping (overflow:hidden and a haslayout trigger good as always), float the .priceData left and set a width on them with a margin on just one side, done.

Of course if you actually care about people using the page you'd also not bother making it a fixed number of them per row and open up your layout semi-fluid and responsive... which is why classes like "four columns" is absolute dumbass ****. (thanks to whatever BS framework that's built around)

 

If you look at their page source, it's all right there. I don't think it's a plugin, it's yet another framework that they have copied and pasted into the page. But, the CSS they used to create the table is right in the HTML. So, everything you need to copy this horrible design is right there (they made it easy for you) just right click on the page and select "view source".

My favorite part is the clearfix class that they added to the css but didn't use in the html.

 

Hi

thanks for the reply. i checked the source

the code is there, but css is not in the source

can u point me?

 

try to compare with zurb framework.... http://foundation.zurb.com/docs/components/pricing-tables.html

You can download the framework and see the css.

Hope it help you.

 

Maybe this will help. Tossed together a working table-less demo:

http://www.cutcodedown.com/for_others/mithunv/

with easy access to the CSS used to build it, and showing it working inside a semi-fluid layout.