Design a Pricing Plan Using CSS3 in Under 15 Minutes – Downloadable

Today we continue the series of tutorials on basic HTML5 and CSS3 coding and we jump even deeper into CSS3 with this video on how to design a pricing plan.

If you own a product which you sell only on a subscription basis, then you will probably need pricing tables in order to showcase your product and the purchase options better. This tutorial will teach you how to do that.

The tutorial is based on lots of things we went through in the previous tutorials, but today you will also learn how to:

  • Only style some elements of a list without giving a class to each of them.
  • You will also learn how to apply different styles only on the first and last element of a parent (which could also be a list as well).
  • Regarding transitions, which we’ve worked with since the second tutorial, you will learn how to scale objects up or down on hover by using CSS instead of relying onJavaScript, as we had to before.

At the end of the video I also make a promise to you regarding what am I going to come with next time. Sneak peek: it’s for mobile.

Until next time, I hope you enjoy the video and, as always, I am looking forward to your feedback and comments.

Comparison Table Preview

By the end of this tutorial you will be able to design a pricing plan like the image below.


preview  download

Saw the demo? If you’re ready to design a similar pricing plan, free up at least 23 minutes of your time and get ready to design your very first pricing table!

Pricing Plans Using CSS3 Video Tutorial



full source :


One thought on “Design a Pricing Plan Using CSS3 in Under 15 Minutes – Downloadable

  1. 330380 293117As far as me being a member here, I wasnt aware that I was a member for any days, actually. When the article was published I received a notification, so that I could participate in the discussion of the post, That would explain me stumbuling upon this post. But were certainly all members in the world of ideas. 967850

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s