Design a Pricing Plan Using CSS3 in Under 15 Minutes

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 on JavaScript, 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.

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

 

When You Design a Pricing Plan, Keep in Mind the Following:

• Don’t over design it, people are after the information, not the design.
• Make it visually pleasing and easy to read.
• Don’t over complicate the code, be sure to always keep your CSS in check in case you will need to update it at a future date.

Tell us what you think about this video tutorial in the comments!

[Source : 1stwebdesigner.com]