Responsive Pricing Table HTML & CSS Snippets

Responsive Pricing Table HTML & CSS Snippets

by Frontendor UI Library

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="generic_price_table">
	<section>
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<!--PRICE HEADING START-->
					<div class="price-heading clearfix">
						<h1>Bootstrap Pricing Table</h1>
					</div>
					<!--//PRICE HEADING END-->
				</div>
			</div>
		</div>
		<div class="container">
			<!--BLOCK ROW START-->
			<div class="row">
				<div class="col-md-4">
					<!--PRICE CONTENT START-->
					<div class="generic_content clearfix">
						<!--HEAD PRICE DETAIL START-->
						<div class="generic_head_price clearfix">
							<!--HEAD CONTENT START-->
							<div class="generic_head_content clearfix">
								<!--HEAD START-->
								<div class="head_bg"></div>
								<div class="head">
									<span>Basic</span>
								</div>
								<!--//HEAD END-->
							</div>
							<!--//HEAD CONTENT END-->
							<!--PRICE START-->
							<div class="generic_price_tag clearfix">	
								<span class="price">
								<span class="sign">$</span>
								<span class="currency">99</span>
								<span class="cent">.99</span>
								<span class="month">/MON</span>
								</span>
							</div>
							<!--//PRICE END-->
						</div>
						<!--//HEAD PRICE DETAIL END-->
						<!--FEATURE LIST START-->
						<div class="generic_feature_list">
							<ul>
								<li><span>2GB</span> Bandwidth</li>
								<li><span>150GB</span> Storage</li>
								<li><span>12</span> Accounts</li>
								<li><span>7</span> Host Domain</li>
								<li><span>24/7</span> Support</li>
							</ul>
						</div>
						<!--//FEATURE LIST END-->
						<!--BUTTON START-->
						<div class="generic_price_btn clearfix">
							<a class="" href="">Sign up</a>
						</div>
						<!--//BUTTON END-->
					</div>
					<!--//PRICE CONTENT...

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700italic,700,900italic,900);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);
body{background-color:#eee;}

#generic_price_table{
	background-color: #f0eded;
}

/*PRICE COLOR CODE START*/
#generic_price_table .generic_content{
	background-color: #fff;
}

#generic_price_table .generic_content .generic_head_price{
	background-color: #f6f6f6;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{
	border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{
	color: #525252;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{
    color: #414141;
}

#generic_price_table .generic_content .generic_feature_list ul li{	
	color: #a7a7a7;
}

#generic_price_table .generic_content .generic_feature_list ul li span{
	color: #414141;
}
#generic_price_table .generic_content .generic_feature_list ul li:hover{
	background-color: #E4E4E4;
	border-left: 5px solid #2ECC71;
}

#generic_price_table .generic_content .generic_price_btn a{
	border: 1px solid #2ECC71; 
    color: #2ECC71;
} 

#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg{
	border-color: #2ECC71 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)...