Pricing table template in CSS

      No Comments on Pricing table template in CSS

Pricing table template in CSS : Learn how to create a responsive pricing table with CSS with professional CSS styles

Pricing table template in CSS

Start-up-2

Pricing table template in CSS

This template uses simple CSS coding. It is made completely responsive using @media queries.

Markup:

<div class="price col-md-12">
  <h2 class="heading down-border"><u>Buy a service</u></h2>
<div class="pricing-table">
		<div class="plan">
			<h3 class="name">Basic</h3>
			<h4 class="price">$10<span>/month</span></h4>
			<ul class="details">
				<li><strong>1</strong> Domains</li>
				<li><strong>2</strong>Bandwidth</li>
				<li><strong>20</strong> Variations</li>
			</ul>
			<h5 class="order"><a href="#">Order Now</a></h5>
		</div><!--.plan-->
		<div class="plan">
			<h3 class="name">Standard</h3>
			<h4 class="price">$20<span>/month</span></h4>
			<ul class="details">
				<li><strong>2</strong> Domains</li>
				<li><strong>20</strong> Bandwidth</li>
				<li><strong>150</strong> Variations</li>
			</ul>
			<h5 class="order"><a href="#">Order Now</a></h5>
		</div><!--.plan-->
		<div class="plan">
			<h3 class="name">Premium</h3>
			<h4 class="price">$30<span>/month</span></h4>
			<ul class="details">
				<li><strong>5</strong> Domains</li>
				<li><strong>50</strong> Bandwidth</li>
				<li><strong>500</strong> Variations</li>
			</ul>
			<h5 class="order"><a href="#">Order Now</a></h5>
		</div>
	</div>
</div>
<br><br>

Style:

@import url('https://fonts.googleapis.com/css?family=Pacifico');
.heading{
  font-family: 'Pacifico', cursive;
  font-size:30px}
/*price*/
.price{
  padding:5% 10%;
  text-align: center;
  margin-bottom:4%;}
.pricing-table{
  color:#90a4ae;
  margin-top:3%;
}
.pricing-table ul{
  list-style-type:none;
}
.pricing-table h3,.pricing-table h4{
  padding:0;
  margin:0
}
.plan{
  box-sizing: border-box;
  width: 33%;
  background-color: #fff; 
  float:left;
  text-align: center;
  position: relative;
  box-shadow: 0px 0px 10px #ccc;
}
.pricing-table h3.name
{
  font-size: 20px;
  background-color: #546e7a;
  padding: 15px;
  color: #fff;
}
.pricing-table h4.price{
  font-size: 40px;
  color: #fff;
  padding:20px 30px;
  background-color: #FFA41F;
  line-height: 40px;
}
.pricing-table 	span{
  font-size: 16px; 
  font-style: italic;
}
.pricing-table li
{
  border-bottom: 1px solid #B3B9C4;
  padding: 15px;
  display:block
}
.pricing-table 	h5.order{
  padding: 30px; 
  font-size: 17px;
}
.pricing-table a{
  text-decoration: none;
  color: #fff; 
  background-color: #546e7a;
  padding: 10px 20px;
}
.plan:nth-child(2n){
  box-shadow: 0px 0px 10px #424242; z-index:100;
}

@media (max-width:1100px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ 
   .price{padding:5% 1%}
    .plan{float:left;width:33%}
}
@media (max-width:641px)  {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
      .price{padding:5% 10%}
      .plan{float:none;width:100%}
     }

Demo:

See the Pen Pricing table by scanfcode (@scanfcode) on CodePen.

Summary
Pricing table template in CSS
Article Name
Pricing table template in CSS
Description
Pricing table template in CSS : Learn how to create a responsive pricing table with CSS with professional CSS styles simply.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *