css3 Pricing Table on rails 3

when designing the pricing table for list of product.  so, in this article is a how to build a price table for listing the products in Rails code

<h1>Products List</h1>
<pre>
<% @products.each do |product| %>
<ul class="pricing_table">
	<li>
<div class="footer">
<h3>Product <%= product.id %></h3>
</div>
<h3><%= product.name %></h3>
<div class="price_body">
<div class="price"><%= product.price %></div>
</div>
<div class="features">
<ul>
	<li><%= product.description %></li>
</ul>
</div>
<div class="footer"><a class="action_button" href="#">Get Started</a></div></li>
</ul>
<pre>
<% end %>

pricing_table
CSS file

 .pricing_table {
	width: 700px;
	color:#fff;
	font-size:12px;
	font-family: Ubuntu, arial, verdana;
	line-height: 150%;
	text-align: center;
	margin: 10px auto 0 auto;
	text-shadow: 0px 1px 0px rgba(0,0,0,.5);

}

/**/

.pricing_table>li {
 background-color: #35afe3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
    background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
    border-bottom: 2px solid #103c56;
    -webkit-box-shadow: inset 0px 2px 0px 0px #6ad2ef;
    -moz-box-shadow: inset 0px 2px 0px 0px #6ad2ef;
    box-shadow: inset 0px 2px 0px 0px #6ad2ef;

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

    width: 33.33%;
	float: left;
	list-style-type: none;
	/*For smooth hover effects if .active is replaced by :hover*/
	transition: all 0.2s;

    margin-bottom:20px;

}

.pricing_table>li.active {
	background: linear-gradient(#F9B84A, #DB7224);
	transform: scale(1.03);
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
}
.pricing_table h3 {
	text-transform: uppercase;
	padding: 15px 0;
	font-size: 14px;
	font-weight: bold;
}
.pricing_table .price_body {
	width: 125px;
	height: 125px;
	margin: 0 auto 15px auto;
	border: 2px solid #fff;
	border-radius: 100%;
	display: table;
}
.pricing_table .price {
	font-size: 30px;
	font-weight: bold;
	text-transform: uppercase;
	/*Lets vertically center align the price now*/
	vertical-align: middle;
	display: table-cell;
}
.pricing_table .price .price_figure {
	display: block;
}
.pricing_table .price .price_term {
	font-size: 11px;
	font-weight: normal;
}

.pricing_table .features li {
	list-style-type: none;
	padding: 5px 0;
}

.pricing_table .footer {
	padding: 10px;
	background: #333;
	margin-top: 10px;
}

.pricing_table .footer .action_button{
	color: #fff;
	font-size: 11px;
	display: inline-block;
	text-decoration: none;
	font-weight: bold;
	background: #000;
	padding: 4px 20px;
	border-radius: 8px;
	background: linear-gradient(#666, #333);
}
.pricing_table .active .footer .action_button {
	background: linear-gradient(#F9B84A, #DB7224);
}

.pricing_table li.active .footer :hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
	background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
	background-color:#ce0100;
}

.pricing_table .active .footer .signup_button {

	margin-left: auto;
    margin-right: auto;
    text-align: center;
	-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
	box-shadow:inset 0px 1px 0px 0px #f29c93;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
	background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
	background-color:#fe1a00;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #d83526;
	display:block;
	color:#ffffff;
	font-family:arial;
	font-size:20px;
	font-weight:bold;
	padding:24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #b23e35;
}

thi’s the products list of Indonesian food
css3 products list

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s